Chart.js 在 Angular 上与 @types/chart.js

Question

我正在尝试在我的 Angular 版本 7.1.4 的项目上实施 Chart.js。

但是，我无法以任何方式初始化任何图表。有没有我漏掉的台词？

使用的包：

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

问题通过添加覆盖canvas标签的div标签解决。

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

谢谢。

Chart.js 在 Angular 上与 @types/chart.js

Chart.js on Angular with @types/chart.js

javascript

typescript

chart.js

angular

angular7