ng2-charts中折线图的渐变颜色答案

【问题标题】：Gradient Color For Line Chart In ng2-chartsng2-charts中折线图的渐变颜色
【发布时间】：2019-04-30 17:38:00
【问题描述】：

我正在尝试为ng2-charts 中的折线图应用渐变色。但我收到错误

ERROR TypeError: Cannot read property 'nativeElement' of undefined

代码

<canvas #myCanvas [colors]="lineChartColors" ...
export class Demo {
  @ViewChild("myCanvas") canvas: ElementRef;
  lineChartColors;

// in ngOnInit
let gradient = this.canvas.nativeElement.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'white');
this.lineChartColors = [
  {
    backgroundColor: gradient
  }
];

【问题讨论】：

标签： angular ng2-charts

【解决方案1】：

HTML 并不完全存在于ngOnInit 挂钩中。您应该在 ngAfterViewInit() 函数中执行此操作。这个钩子的定义是

ngAfterViewInit() 在 Angular 初始化组件的视图和子视图/指令所在的视图后响应。

这意味着这里的 HTML 已经准备好了，当你在 ngOnInit() 中调用它时，实际上页面上并没有这个元素。

enter here for more info

【讨论】：

还是ERROR TypeError: Cannot read property 'nativeElement' of undefined