Chart.js на Angular с помощью @ types / chart.js

Question

Я пытаюсь реализовать Chart.js в своем проекте Angular с версией 7.1.4.

Однако я не могу инициализировать какие-либо графики всеми средствами. Есть ли какие-то строки, которые я пропустил?

Используемый пакет:

chart.js : npm install chart.js --save

@types/chart.js: npm install @ types / chart.js --save

HTML сторона:

<canvas #canvas id="chart">{{ chart }}</canvas>

Сторона компонента:

import { Chart } from 'chart.js';
chart: Chart;

var canvas = <HTMLCanvasElement>document.getElementById("rohsProductSummaryChart");
var ctx = canvas.getContext("2d");
this.chart = new Chart(ctx, {
            type: 'bar',
            data: barChartData,  //<-- confirmed with correct structure
            options: {
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        stacked: true,
                        display: true
                    }],
                    yAxes: [{
                        stacked: true,
                        display: true
                    }],
                }
            }
  });

Как я могу генерировать без исключений? Спасибо.

Answer 1

Проблема решается добавлением тега div, покрывающего тег canvas.

<div>
<canvas #canvas id="chart">{{ chart }}</canvas>
</div>

Спасибо.