Плагин ChartJS Annotation либо выдает ошибку консоли, либо вообще не отображается на диаграмме

Существует вопрос по этому же вопросу здесь , но без ответа.

Я пытаюсь использовать плагин ChartJS Annotation версии 0.5.7 в приложении Angular 8. Однако, в зависимости от того, где я добавляю логику, я получаю либо ошибку в консоли (но рабочие аннотации), либо отсутствие ошибки в консоли (но неработающие аннотации).

Вот код, который вызывает ошибку в консоли (но также создает ожидаемую аннотацию на диаграмме):

      let annotation = [];

annotation.push({
        drawTime: 'beforeDatasetsDraw',
        type: 'box',
        xMin: i - 1, //index + 1,
        xMax: i + 1, //index + 5,
        yMin: this.yValues.reduce((a, b) => Math.min(a, b)).toString(),
        yMax: this.yValues.reduce((a, b) => Math.max(a, b)).toString(),
        // ID of the X scale to bind onto
        xScaleID: 'x-axis-0',

        // ID of the Y scale to bind onto
        yScaleID: 'y-axis-0',
        backgroundColor: 'rgba(101, 33, 171, 0.15)',
        borderColor: 'rgba(101, 33, 171, 0.5)',
        borderWidth: 2,
      });

let namedChartAnnotation = ChartAnnotation;
Chart.pluginService.register(namedChartAnnotation);

return new Chart('histogram' + number, {
  type: 'bar',
  data: {
    labels: this.xValues,
    datasets: [
      {
        label: 'Number of alerts',
        data: this.yValues,
      },
    ],
  },
  options: {
     annotation: {
        annotations: annotation,
     }
  }
});

Мое сообщение об ошибке следующее:

      Type '{ legendCallback: (chart: import("c:/Sensitivity/anomalydetection-ui/node_modules/@types/chart.js/index.d.ts")) => string; legend: { display: false; }; tooltips: { enabled: true; titleFontSize: number; titleFontStyle: string; bodyFontSize: number; titleMarginBottom: number; callbacks: { ...; }; }; annotation: { ...;...' 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'?ts(2322)
index.d.ts(279, 9): The expected type comes from property 'options' which is declared here on type 'ChartConfiguration'

Если, однако, я перенесу свой код в plugins:, Я не получаю консольной ошибки, но аннотации больше не отображаются для меня:

      ....
options: {
   plugins: {
      annotation: {
         annotations: annotation,
      },
   }
}

Может ли кто-нибудь объяснить мне, как я могу устранить сообщение об ошибке, сохранив при этом аннотации?

0 ответов

Другие вопросы по тегам