首页 > 解决方案 > 有没有办法在不使用@ViewChild 的情况下获得 Angular Chart.js 颜色渐变?

问题描述

我有一些图表——折线图和条形图。

我需要能够更改线条/条上的颜色渐变和边框半径等内容。

我在网上看到解决方案是获取上下文并执行步骤。但是,我无法成功获取上下文。这是我尝试过的:

@ViewChild('myCanvas') canvas: ElementRef;
  
  const gradient = this.canvas.nativeElement.getContext('2d').createLinearGradient(0, 0, 0, 600);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'green');
  this.lineChartColors = [
      {
          backgroundColor: gradient
      }
];

我相信我放置的位置是错误的。我尝试将渐变创建部分放在 ngOnInit 中,但这不起作用。

我没有发现任何有用的东西,我想避免使用@ViewChild,因为我发现这种不可靠的和以前的图表实现只会随机出现而不是随机出现。

此外,在获取图表的上下文方面,我还没有成功。我已经看到这是我可以使用渐变颜色的另一种方法。我已经尝试了一些东西,但现在找不到它们……斗争是真实的。

我遇到的许多解决方案都在 JS 中 - 如何将其添加到我的 TS 文件中?我有问题。如果可能的话,我希望找到一个 ts 解决方案。

标签: angularchart.jscolor-gradient

解决方案


推荐阅读