Определить цвета в круговой диаграмме динамически данных - PullRequest
Новая
       58

Определить цвета в круговой диаграмме динамически данных

0 голосов
/ 02 марта 2019

Я хочу постоянно определять цвет каждого среза на круговой диаграмме в соответствии с тем, что содержит файл JSON.Поэтому, если файл JSON op = [{name: "Idle", y: 3},{name: "Overload", y: 7}], но иногда он также продолжает изменяться, данные формата всегда содержат строку (имя: Busy / Overload / Idle) и int (y).

Я пробовал другой подход,один из них: 

ngOnInit() {
 this.indicatorservice.getIndicator().subscribe((res)=>{
  this.indicator = res;
  let op = this.indicator.map(e=>{
    let key = Object.keys(e)[0]
    return { name: key, y: +e[key] }
  })
  op.forEach(element => {
    if (element.name == 'Busy') {
      this.colorVal = '#ffff00';
    }
    if (element.name == 'Idle') {
      this.colorVal = '#008000';
    }
    if (element.name == 'Overload') {
      this.colorVal = '#ff0000';
    }
  });
  setTimeout( ()=>{
    this.Highcharts.chart({
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        renderTo:'container',
      },
      title: {
        text: 'Todays Shift Indicator'
      },
      tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: 'white'
                }
            }
        }
      },
      series: [{
        name: 'Brands',
        colorByPoint: true,
        data: op,
        color: this.colorVal
      }]

   })},300);
 })
}

Выборка динамических данных: 

op : [{name: "Idle", y: 3},{name: "Overload", y: 7},{name: "Busy", y: 2}]

or sometimes...

op : [{name: "Idle", y: 3},{name: "Overload", y: 7}]

etc.

Но, к сожалению, это не работает.

enter image description here

Любая помощь будет оценена.Спасибо

1 Ответ

0 голосов
/ 05 марта 2019

Вам необходимо установить цвета на уровне точек: 

    op.forEach(element => {
        if (element.name == 'Busy') {
            element.color = '#ffff00';
        }
        if (element.name == 'Idle') {
            element.color = '#008000';
        }
        if (element.name == 'Overload') {
            element.color = '#ff0000';
        }
    });

Демонстрационная версия: http://jsfiddle.net/BlackLabel/850wx1L3/

Справочник по API: https://api.highcharts.com/highcharts/series.pie.data.color

...