使用 ng2-charts 正确配置 chartjs-plugin-annotation 的位置？

Question

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

这里是极简主义demo。然而，虽然它在 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'?

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

我检查了ChartOptions，在node_modules/@types/chart.js/index.d.ts中定义，确实，它里面没有annotation（而且不应该，因为这个接口是在[=中定义的） 22=] 库，他们不知道也不应该知道任何关于插件细节的信息）：

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 documentation 说它应该在 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;
}

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

使用 ng2-charts 正确配置 chartjs-plugin-annotation 的位置？

Correct config location of chartjs-plugin-annotation with ng2-charts?

chart.js

ng2-charts

angular

chartjs-plugin-annotation