带有@type/ Chart.js的角上的Chart.js

Question

我正在尝试用7.1.4版本在我的with项目上实现Chart.js。

但是，我不能以任何方式初始化任何图。我错过了什么台词吗？

使用的包：

chart.js ：npm安装chart.js-保存 @types/chart.js：npm @type/chart.js--保存

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标记覆盖画布标签，解决了这个问题。

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

谢谢。