Изменить цвет точки фона во время выполнения для angular ng2-charts / chartjs

Я добавляю chartjs в свое приложение и хочу изменить цвет фона конкретной точки в зависимости от условий во время выполнения. Я могу правильно построить график, но не знаю, как изменить цвет графика.

Из документа chartjs я понимаю, что мы можем сделать это с помощью pointBackgroundColor, но все онлайн-примеры содержат пример времени разработки.

Я пробовал с this._chart.chart.data.datasets[0].pointBackgroundColor = "red";, но он изменился по всем пунктам, а не по отдельным пунктам.

Изменить цвет точки фона во время выполнения для angular ng2-charts / chartjs

Моя версия:
Угловая вер 6
chartjs, версия 2.7.3
ng2-графики 1.6.0

Код Component.ts

@ViewChild(BaseChartDirective) public _chart: BaseChartDirective;

constructor(private router: Router, private _realtimeData  : RealtimeDataService) { 
 this._realtimeData.getRealtimeData(1)).subscribe(data => 
{
for (let stat of data) 
{
    this.labels.push(newDate(stat.DateTime).toLocaleDateString('de-IN', this.options));

    this.datasets_lines[0].data.push(stat.value);
    this.datasets_lines[1].data.push(stat.value1);
    this.datasets_lines[2].data.push(stat.vlue2);

    if ((stat.value > stat.value1) || (stat.value< stat.vlue2))
    {
    this._chart.chart.data.datasets[0].pointBorderColor = "red";
    }
    else
    {
    this._chart.chart.data.datasets[0].pointBorderColor = "black";
    } 

    this._chart.chart.update();
}
}
}

public chartColors: Array<any> = [
  { // first color
    borderColor: "#36ff2f",
    pointBackgroundColor: 'rgba(225,10,24,0.2)',
    pointBorderColor: '#fff',
  },

  { // first color
    borderColor: '#1780cc',
    pointBackgroundColor: 'rgba(225,10,24,0.2)',
    pointBorderColor: '#fff',

  },

  { // second color
    borderColor: '#ed8b00',
    pointBackgroundColor: 'rgba(225,10,24,0.2)',
    pointBorderColor: '#fff',
  }];

HTML код

<canvas 
      #mylinechart
      baseChart
      [chartType] = "'line'"
      [datasets] = "datasets_lines"
      [labels] = "labels"
      [options] = "chartOptions"
      [legend] = "true"
      [colors] = "chartColors"
  </canvas>
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
1 679
1

Ответы 1

Я думаю, вы можете напрямую изменить эту переменную chartColors, и вы получите результат.

if (true)
{
  this.chartColors[0].pointBorderColor = "red";
}

Спасибо за ответ RViral. Это не решает проблему. Все точки, определенные в chartColors, по-прежнему отображаются черным цветом.

Sushil Jadhav 07.12.2018 13:19

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