Chart.js和Angular的渐变效果

Question

我想让我的图表更漂亮一点，并发现了渐变效果，但如何在我的Angular项目中正确实现这一点？我在网上发现了一些类似的东西，但无论我如何初始化DOM元素，我总是得到ERROR TypeError: this.canvas is undefined。有人能帮我解决这个问题吗？附言：我正在使用ng2图表包。

我的ViewChild和我的Init:

@ViewChild("canvas") canvas: ElementRef;
lineChartColors;

ngAfterContentInit() {
const domCanvasAccess = this.canvas.nativeElement as HTMLCanvasElement;
const gradientColor = domCanvasAccess.getContext('2d').createLinearGradient(0, 0, 0, 200);
gradientColor.addColorStop(0, 'green');
gradientColor.addColorStop(1, 'white');
this.lineChartColors = [
{
backgroundColor: gradientColor,
borderColor: "black",
}
];
}

剩下的是StackBiltz：https://stackblitz.com/edit/angular-ivy-uop8dm?file=src/app/app.component.ts

Answer 1

注意：这是我在没有ng2图表、的情况下如何做到的

我按照charts.js文档中的说明创建图表：

this.chart =  new Chart(
"canvas",
{...
}

然后，在那之后，我添加梯度

const ctx = this.chart.ctx;
const height = this.chart.height;
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(1, "rgba(128, 182, 244, 0.6)");
gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
this.chart.data.datasets[0].backgroundColor = gradient;