LinearGradient 不适用于 Angular 的 chartJs 画布

Posted 2023-03-25

【中文标题】LinearGradient 不适用于 Angular 的 chartJs 画布

【英文标题】：LinearGradient doesnt't work on chartJs canvas for Angular

【发布时间】：2021-01-01 02:35:54

【问题描述】：

这里我尝试像往常一样在画布的ctx对象上添加线性渐变。

    let canvas= $("#canvas");
    let ctx=canvas[0].getContext('2d');
    var gradient = ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(250,174,50,1)');   
    gradient.addColorStop(1, 'rgba(250,174,50,0)');

我没有使用 jQuery 访问画布对象，而是尝试了document.getElementbyId，但也没有用。 正在打印图表，只是缺少渐变。我不知道为什么

Stackblitz:https://stackblitz.com/edit/angular-h83adp-chartjs-kfdgcy?file=app/app.component.ts

【问题讨论】：

见this工作演示

【参考方案1】：

您正确创建了linear gradient，但忘记将其分配给dataset 的backgroundColor 属性。

datasets: [
  label: 'test',
  data: [100, 200, 300],
  backgroundColor: gradient // you need to do this
]

请查看您修改后的StackBlitz。