使用ng2图表更正chartjs插件注释的配置位置

Question

我在Angular应用程序中使用ng2-charts绘制条形图。在某个时刻，我不得不在图表中添加静态行，于是我决定使用chartjs-plugin-annotation。将这两个库连接在一起并没有很好的记录，但经过一些谷歌搜索，我最终能够使其发挥作用。

这是一个极简主义的演示。然而，尽管它在stackblitz上工作得很好，但我本地机器上的IDE抱怨ChartOptions接口不期望annotation

public barChartOptions: ChartOptions = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0
}
}]
},
// This whole section is underlined in red by IDE
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [
{
type: 'line',
...

编译器也是如此：

ERROR in src/app/calendar/calendar.component.ts(31,5): error TS2322: Type '{ responsive: true; scales: { yAxes: { display: true; ticks: { suggestedMin: number; }; }[]; }; annotation: { drawTime: string; annotations: { type: string; mode: string; scaleID: string; value: number; borderColor: string; borderDash: number[]; borderWidth: number; }[]; }; }' is not assignable to type 'ChartOptions'.
Object literal may only specify known properties, but 'annotation' does not exist in type 'ChartOptions'. Did you mean to write 'rotation'?

尽管此警告不会阻止项目编译，但它看起来仍然不正确。

我检查了node_modules/@types/chart.js/index.d.ts中定义的ChartOptions，事实上，它没有annotation(也不应该，因为这个接口是在chart.js库中定义的，谁不知道也不应该知道插件的细节(：

interface ChartOptions {
responsive?: boolean;
responsiveAnimationDuration?: number;
aspectRatio?: number;
maintainAspectRatio?: boolean;
events?: string[];
legendCallback?(chart: Chart): string;
onHover?(this: Chart, event: MouseEvent, activeElements: Array<{}>): any;
onClick?(event?: MouseEvent, activeElements?: Array<{}>): any;
onResize?(this: Chart, newSize: ChartSize): void;
title?: ChartTitleOptions;
legend?: ChartLegendOptions;
tooltips?: ChartTooltipOptions;
hover?: ChartHoverOptions;
animation?: ChartAnimationOptions;
elements?: ChartElementsOptions;
layout?: ChartLayoutOptions;
scale?: RadialLinearScale;
scales?: ChartScales | LinearScale | LogarithmicScale | TimeScale;
showLines?: boolean;
spanGaps?: boolean;
cutoutPercentage?: number;
circumference?: number;
rotation?: number;
devicePixelRatio?: number;
plugins?: ChartPluginsOptions;
}

我试图在其他地方重新定位annotation部分(chartjs-plugin-annotation文档说它应该在plugins下，这完全有意义(，但在所有其他位置它都被忽略了。因此，最终，为了消除警告，我只是删除了: ChartOptions部分，而不是以下部分：

public barChartOptions: ChartOptions = {

我只写了这个：

public barChartOptions = {

这消除了警告，但它看起来仍然不够整洁。有人知道如何正确使用这个插件吗？

Answer 1

我或多或少也遇到了同样的问题。我发现在chartjs-plugin-annotations的index.d.tx文件中有一个不推荐使用的ChartOptions接口定义，它与ng2-charts中定义的接口冲突。

因此，在~/project-folder/node_modules/@types/chartjs-plugin-annotation/index.d.ts中，更改

// Extend the types from chart.js
declare module 'chart.js' {
interface ChartOptions {
// This is deprecated on master (not released yet)
annotation?: ChartJsAnnotation.AnnotationConfig;
}
// This is the correct version on master (not released yet)
// interface ChartPluginsOptions {
//   annotation?: ChartJsAnnotation.AnnotationConfig;
// }
const Annotation: ChartJsAnnotation.AnnotationStatic;
}

到这个

// Extend the types from chart.js
declare module 'chart.js' {
// interface ChartOptions {
//   // This is deprecated on master (not released yet)
//   annotation?: ChartJsAnnotation.AnnotationConfig;
// }
// This is the correct version on master (not released yet)
interface ChartPluginsOptions {
annotation?: ChartJsAnnotation.AnnotationConfig;
}
const Annotation: ChartJsAnnotation.AnnotationStatic;
}

这样做为我消除了编译器错误。