angular - Chartjs-plugin-annotation 与 ng2-charts 的正确配置位置？

Question

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

这是一个简约的demo 。然而，虽然它在 stackblitz 上运行良好，但我本地计算机上的 IDE 提示 ChartOptions 接口(interface)不需要 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 中定义，事实上，它没有 注释 (也不应该，因为这个接口(interface)是在 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 documentation 说它应该位于 plugins 下，这完全有意义)，但在所有其他位置它只是被忽略了。所以最终，为了摆脱警告，我只是删除了 : ChartOptions 部分 - 也就是说，而不是这个:

  public barChartOptions: ChartOptions = {

我只是写了这个:

  public barChartOptions = {

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

Answer 1

我或多或少遇到了同样的问题。我发现在 chartjs-plugin-annotations 的 index.d.tx 文件中存在一个已弃用的 ChartOptions 接口(interface)定义，它发生了冲突与 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;
}

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