Блог

Я создаю график, который обновляется данными из REST API, используя библиотеку ng2-charts. Я использую плагин аннотаций. Количество изменений аннотаций, поэтому изменения существующей аннотации недостаточно — мне нужно иметь возможность добавлять / удалять новые аннотации во время выполнения.

Когда я добавляю аннотации к параметрам графика в начале, аннотации отображаются просто отлично. Но во время выполнения, после обновления данных и обновления объекта options, аннотации не видны.

Позже я добавляю аннотации к параметрам графика:

 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();
  

Но безрезультатно.

Кто-нибудь знает, как я могу правильно рисовать аннотации? Спасибо.

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
  

Количество аннотаций может быть любым. Это просто ключ нового объекта, например, line1 в примере, использование количества объектов, уже находящихся внутри, — это просто предложение. НО он должен быть уникальным, иначе вы перезаписываете существующий, а не добавляете новый

Вы можете попробовать установить drawTime свойство

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