ng2图表和注释插件:数据更新后注释不可见

Question

我正在创建一个图形，该图形使用ng2-charts库使用REST API中的数据进行更新。我使用注释插件。注释的数量发生了变化，所以仅仅更改现有的注释是不够的——我需要能够在运行时添加/删除新的注释。

当我一开始就向图形选项添加注释时，注释渲染得很好。但在运行时，在更新数据和选项对象之后，看不到任何注释。

稍后，我为图形的选项添加注释：

this.barChartOptions.annotation.annotations.push(
{
drawTime: 'beforeDatasetsDraw',
type: 'box',
xScaleID: 'x-axis-0',
yScaleID: 'y-axis-0',
xMin: tmpFirstBorder,
xMax: tmpLastBorder,
yMin: 0.5,
yMax: 5,
backgroundColor: 'rgba(71, 158, 245, 0.5)',
borderColor: 'rgb(71,158,245)',
onClick: function (e) {
console.log('Box', e.type, this);
}
}

然后更新数据，以便重新绘制图表：

this.barChartOptions = this.barChartOptions;
this.barChartData = tempChartData;

图形被重新绘制得很好，但没有注释。

我认为这可能是图表选项不更新的问题，所以我尝试添加一个明确的更新：

@ViewChild(BaseChartDirective) chart: BaseChartDirective;
[...]
this.chart.chart.update();

但无济于事。

有人知道我如何正确绘制注释吗？谢谢

Answer 1

this.barChartOptions.annotation.annotations

不是一个数组。这是另一个像例子中的对象

const options = {
plugins: {
autocolors: false,
annotation: {
annotations: {
line1: {
type: 'line',
yMin: 60,
yMax: 60,
borderColor: 'rgb(255, 99, 132)',
borderWidth: 2,
}
}
}
}
};

因此，要添加新的注释，需要添加一个对象，而不是推送数组元素。例如，您可以使用获得对象中已经存在的注释数

let annotationsCount = Object.entries(this.barChartOptions.annotation.annotations)

然后你可以用添加一个新元素

this.barChartOptions.annotation.annotations[annotationsCount] = yourNewAnnotationObject

annotationCount可以是任何值。它只是新对象的键，如示例中的line1。使用已经在里面的对象数量只是一个建议但是它必须是唯一的，否则您将覆盖现有的，而不会添加新的

Answer 2

您可以尝试设置drawTime属性

annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [....]
}