如何以 Angular 方式访问 ChartJS 图表

Question

所以我想应用像chart.update()和chart.clear()这样的东西，但不知道如何用角度来做到这一点？我的 html 模板和 ts 文件是什么意思，以便能够访问这些 Chartjs 属性？

我已将 @viewchild 装饰器添加到 baseChartDirective

类似

@viewchild (baseChartDirective) chart?: baseChartDirective 

但是打印图表内容时返回未定义

console.log(this.chart)

Answer 1

在

HTML

模板中，除了

canvas

之外不声明任何内容。在 Angular 完成组件视图的初始化之后，应该在组件类中创建图表。合适的方法是

ngAfterViewInit()

。

HTML 模板

<canvas #canvas></canvas>

组件类

export class ChartComponent implements AfterViewInit {

  @ViewChild('canvas') canvasRef: ElementRef<HTMLCanvasElement>;

  chart: Chart;

  ngAfterViewInit(): void {
     const canvas = this.canvasRef.nativeElement;
     chart = new Chart(canvas, {
       // chart config
     });
  }

然后应该可以调用

chart.update()

以及

chart

上的其他功能。

为了让您的工作更轻松，您也可以使用

ng2-charts

并查看其 Stackblitz 起始模板。