Правильное расположение конфигурации chartjs-plugin-annotation с ng2-charts?

Question

Я использую ng2-chartsчтобы нарисовать гистограмму в моем приложении Angular. В какой-то момент мне пришлось добавить статические линии в свои диаграммы, и я решил использоватьchartjs-plugin-annotation. Соединение этих двух библиотек вместе не очень хорошо задокументировано, но после некоторого поиска в Google мне в конце концов удалось заставить его работать.

Вот минималистичная демонстрация. Тем не менее, хотя он хорошо работает на stackblitz, IDE на моем локальном компьютере жалуется, чтоannotation не ожидается ChartOptions интерфейс:

  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 в нем (и не должно, потому что этот интерфейс определен в 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;
}

Это устранило ошибку компилятора для меня.