ng2 图表中折线图的渐变颜色

Question

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

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() 中调用它时，你实际上在页面上没有这个元素。

输入此处了解更多信息