Блог

Я пытаюсь использовать плагин аннотаций ChartJS версии 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) =gt; Math.min(a, b)).toString(),  yMax: this.yValues.reduce((a, b) =gt; 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")) =gt; 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,  },  } }  

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