Angular 11 中 ng2-charts 的注释问题
Annotation problem with ng2-charts in Angular 11
我需要在我的图表中显示一条固定线(如图像中的“测试标签”):
所以我将 chartjs-plugin-annotation 添加到我的 Angular 11 项目中,所以我有这些版本:
"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 错误?我需要更改一些依赖项?
如注释插件的 documentation 所述,如果您使用 chart.js 版本 2
,则需要使用版本 0.5.7
Important Note
For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin Documentation for v0.5.7 can be found on GitHub.
因此您需要删除注释插件并安装较低版本或更新到 chart.js 版本 3
npm uninstall chartjs-plugin-annotation
npm install chartjs-plugin-annotation@0.5.7
解决方法:
按照@LeeLenalee 的建议,npm install chartjs-plugin-annotation@0.5.7,之后:
import * as ChartAnnotation from 'chartjs-plugin-annotation';
import Chart from 'chart.js';
ngOnInit(): void {
Chart.pluginService.register(ChartAnnotation);
}
// ...
this.myChartOptions = {
responsive: true,
scales: {
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left'
}
]
},
annotation: {
annotations: [
{
drawTime: 'afterDatasetsDraw',
id: 'hline',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 50, // My value
borderColor: 'red',
borderWidth: 3,
label: {
backgroundColor: 'red',
enabled: true
}
}
]
}
};
如果没有显示线条,您可以更新图表:
import { BaseChartDirective } from 'ng2-charts';
// ...
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
// ...
this.chart.update();
我需要在我的图表中显示一条固定线(如图像中的“测试标签”):
所以我将 chartjs-plugin-annotation 添加到我的 Angular 11 项目中,所以我有这些版本:
"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 错误?我需要更改一些依赖项?
如注释插件的 documentation 所述,如果您使用 chart.js 版本 2
,则需要使用版本 0.5.7Important Note For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin Documentation for v0.5.7 can be found on GitHub.
因此您需要删除注释插件并安装较低版本或更新到 chart.js 版本 3
npm uninstall chartjs-plugin-annotation
npm install chartjs-plugin-annotation@0.5.7
解决方法:
按照@LeeLenalee 的建议,npm install chartjs-plugin-annotation@0.5.7,之后:
import * as ChartAnnotation from 'chartjs-plugin-annotation';
import Chart from 'chart.js';
ngOnInit(): void {
Chart.pluginService.register(ChartAnnotation);
}
// ...
this.myChartOptions = {
responsive: true,
scales: {
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left'
}
]
},
annotation: {
annotations: [
{
drawTime: 'afterDatasetsDraw',
id: 'hline',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 50, // My value
borderColor: 'red',
borderWidth: 3,
label: {
backgroundColor: 'red',
enabled: true
}
}
]
}
};
如果没有显示线条,您可以更新图表:
import { BaseChartDirective } from 'ng2-charts';
// ...
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
// ...
this.chart.update();