angular - Angular 11 中 ng2-charts 的注释问题
问题描述
我需要在我的图表中显示一条固定线(如图像中的“测试标签”):
所以我在我的 Angular 11 项目中添加了 chartjs-plugin-annotation,所以我有这些版本:
"chart.js": "^2.9.3",
"chartjs-plugin-annotation": "^1.0.2",
"ng2-charts": "^2.3.0",
然后我添加了我的选项:
this.chartOptions = {
responsive: true,
scales: {
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [{
type: 'line',
drawTime: 'afterDatasetsDraw',
id: 'strip-line-1',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: tagvalue,
borderColor: 'red', // '#feaf00',
borderWidth: 3
}]
}
};
}
但是没有显示任何线条......所以我发现我必须注册这个,但它不起作用
import * as ChartAnnotation from 'chartjs-plugin-annotation';
Chart.pluginService.register(ChartAnnotation);
我有:
TS2559: Type 'typeof import("C:/.../node_modules/chartjs-plugin-annotation/types/index")' has no properties in common with type 'Plugin'.
它是chartjs-plugin-annotation 错误吗?我需要更改一些依赖项?
解决方案
如注释插件文档中所述,如果您使用的是 chart.js 版本 2,则需要使用版本 0.5.7
重要说明 对于 Chart.js 2.4.0 到 2.9.x 的支持,请使用此插件的 0.5.7 版本 v0.5.7 的文档可以在 GitHub 上找到。
因此,您需要删除注释插件并安装较低版本或更新到 chart.js 版本 3
npm uninstall chartjs-plugin-annotation
npm install chartjs-plugin-annotation@0.5.7
推荐阅读
- android - Whatsapp 音频分享
- java - 是否可以在 Java 代码中集成 R 算法?
- java - 如何使用 iText7 将 SVG 添加到 PDF
- php - mysql选择具有相同ID的行并按另一列排序
- powershell - CMD 仅使用多个参数之一启动 .exe
- video - 逐帧处理视频
- c++ - 解决方法 GCC 5.5 unordered_map 错误
- angularjs - 如果选择了另一行,Angularjs隐藏行
- java - Android Firebase,从 firebase 数据库中检索数据
- .net-core - Unix 上的 net core 启动过程