angular - 有没有办法在不使用@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 解决方案。
解决方案
推荐阅读
- xrp - 如何签署 JSON 交易?
- ajax - “检测到非法选择...”动态下拉选择列表错误 I Drupal8
- javascript - 在我的 React 应用程序中,如何在这个 map 函数中的每个项目之后添加一个换行符?
- mongodb - 如何使用 MongoDB 和 Spring Data MongoDB 自动生成 id?
- javascript - Vuex - 为什么 JS 变量不能按预期工作?
- pyqt5 - 如何将文本添加到 PyQt QcalendarWidget
- python - 将结构化 numpy 数组(包含子数组)转换为 pandas 数据帧
- c# - 确认倒数 CRC-8 值?
- c - 使用 container_of 宏时出现意外结果(Linux 内核)
- css - Stylelint 规则到 value-keyword-case 以忽略 camelCase 变量