在餅圖中動態定義顏色數據

Question

我想根據JSON文件的內容在餅圖中不斷定義每個切片的顏色。 因此，如果JSON文件是op = [{name: "Idle", y: 3},{name: "Overload", y: 7}]但有時它還在不斷變化，則格式數據始終包含string（name：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.

但不幸的是，它不起作用。

任何幫助，將不勝感激。 謝謝

Answer 1

您需要在點級別上設置顏色：

    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