Chart.js 和 Angular 的渐变效果

Question

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

我的 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,

的情况下的做法

我按照 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;

Chart.js 和 Angular 的渐变效果

Gradient effect with Chart.js and Angular

angular

typescript

chart.js

ng2-charts