Angular 上的 Chart.js 与 @types/chart.js答案

【问题标题】：Chart.js on Angular with @types/chart.jsAngular 上的 Chart.js 与 @types/chart.js
【发布时间】：2019-01-17 10:23:30
【问题描述】：

我正在尝试在我的 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
                    }],
                }
            }
  });

如何生成没有异常？谢谢。

【问题讨论】：

在 stackblitz 中重现此问题并在此处显示链接
确保在页面上绘制图表的那一刻而不是之后传递数据，您可以在 ngOnInit 中构建/获取数据集，让它设置一个变量，例如 canRender = true 一旦它完成，然后在你的画布标签中添加 *ngIf="canRender" 告诉画布在你的数据集被确认构建的那一刻进行绘制

标签： javascript angular typescript chart.js angular7

【解决方案1】：

通过添加一个div标签覆盖canvas标签来解决问题。

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

谢谢。

【讨论】：