ng2图中折线图的渐变颜色

Question

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

Answer 1

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

  

ngAfterViewInit（）   在Angular初始化组件的视图和子视图/指令所在的视图之后作出响应。

这意味着HTML已准备就绪，当您在ngOnInit()中调用它时，页面上实际上没有该元素。

enter here for more info