Question

我想根据JSON文件的内容在饼图中不断定义每个切片的颜色。因此，如果JSON文件为op = [{name: "Idle", y: 3},{name: "Overload", y: 7}]，但有时它还会不断变化，则格式数据将始终包含字符串（名称：忙/过载/空闲）和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

在饼图中动态定义颜色数据

1 个答案: