angular - Angular 9 - chartjs-plugin-annotation 错误
问题描述
我试图在我的图表上画一条垂直线。ng2-charts
为了实现这一点,我安装了这个chartjs-plugin-annotation
包。不幸的是,它不起作用,我无法弄清楚出了什么问题。
我的配置和这里的demo基本一样。
import { Input } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ChartDataSets, ChartOptions, ChartPoint } from 'chart.js';
import * as annotations from 'chartjs-plugin-annotation';
import { Color, Label } from 'ng2-charts';
import { STO } from 'src/app/models/STO';
@Component({
selector: 'app-sto-chart',
templateUrl: './sto-chart.component.html',
styleUrls: ['./sto-chart.component.css']
})
export class StoChartComponent implements OnInit {
@Input() sto: STO;
STOs: STO[];
stoChartData = new Array<ChartDataSets>();
stoChartLabels = new Array<Label>();
// ***** HERE IS THE ISSUE **************************************
stoChartOptions: (ChartOptions & { annotation?: any }) = {
responsive: true,
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2020-10-05',
borderColor: 'red',
borderWidth: 2,
label: {
content: 'TODAY',
enabled: true,
position: 'top'
}
}
]
}
};
stoChartColors: Color[] = [
{
borderColor: 'black',
},
];
stoChartLegend = true;
stoChartType = 'line';
stoChartPlugins = [];
constructor() {}
ngOnInit(): void {
// *** some code here ***
}
}
问题出在ChartOptions中:我不断收到此错误:
Type '{ responsive: true; annotation: { annotations: { type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]; }; }' is not assignable to type 'ChartOptions & { annotation?: any; }'.
Type '{ responsive: true; annotation: { annotations: { type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]; }; }' is not assignable to type 'ChartOptions'.
The types of 'annotation.annotations' are incompatible between these types.
Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }[]' is not assignable to type 'AnnotationOptions[]'.
Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }' is not assignable to type 'AnnotationOptions'.
Type '{ type: string; mode: string; scaleID: string; value: string; borderColor: string; borderWidth: number; label: { content: string; enabled: boolean; position: string; }; }' is not assignable to type 'LineAnnotationOptions'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"line"'.
可能值得注意的是,声明了import * as annotations from 'chartjs-plugin-annotation';
“注释”,但从未读取过它的值。
解决方案
根据 ChartJS 文档和 Github 上的 Annotations 自述文件,看起来需要将 Annotations 插件添加到“ChartOptions”对象中的“plugins”对象中。
我会尝试这样的事情:
stoChartOptions: (ChartOptions & { annotation?: any }) = {
responsive: true,
plugins: {
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: '2020-10-05',
borderColor: 'red',
borderWidth: 2,
label: {
content: 'TODAY',
enabled: true,
position: 'top'
}
}
]
}
}
};
此外,您正在将 * 作为annotations导入。在这种情况下,这可能需要更改为注释,因为插件数组中的第一项是插件的名称。
推荐阅读
- c++ - 为什么是这个结果?
- python - 匹配另一个数据框中的文本并用识别的实体填充缺失的列
- selenium - 使用硒线时的 ERR_PROXY_CONNECTION_FAILED
- javascript - 处理联系表格中的错误 - 获得正确的功能
- reactjs - ReactJS 中的多个复选框选项
- excel - 在excel中复制一列并将每个条目/单元格加倍。如何?
- python - Django rest 框架 - 可写(创建,更新)双嵌套序列化程序
- css - 在选择选项上自定义引导表单控件
- python - 如何在使用 sklearn 进行一次热编码后给出列名?
- hadoop - 如何将字符串数据存储在长度大于 VARCHAR(32k) 的 BIGSQL 表中