Плагин 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,
},
}
}
Может ли кто-нибудь объяснить мне, как я могу устранить сообщение об ошибке, сохранив при этом аннотации?