如何设置高图表图例的颜色属性中的对象值？

Question

我必须根据图例的某些条件设置动态文本颜色，下图中有一些图例，如“新建”、“影响评估”、“堆栈持有人审核”等。因此，所有图例都与堆栈关联，如与X实体关联的前4个图例和与Y实体关联的其余图例。对于X实体，我需要将文本颜色更改为绿色，对于Y实体，我需要将文本颜色更改为红色。

 legend: {
                layout: 'horizontal',
                align: 'left',
                verticalAlign: 'bottom', borderWidth: 0, enabled: true,
                 x: -2, y: 7,
                symbolWidth: 4, symbolHeight: 4,
                itemStyle: {
                    'cursor': 'default',
                    fontSize: '10px', 
                    color: 'Red'
                }
            },
            series: formatChartData(ctrl.TeamData)
        });

             **color : "Defect" ? 'Red' : 'Green'**

上面的语句很好，并且给出了正确的图例颜色，但是这里的“缺陷”是静态值，我需要它从动态值中取出来吗？

问题我无法设置动态值。

解决方案

     legend: { 
     labelFormatter: function () {
     var color = this.options.stack == 'Male' ? '#AB1133' : '#02A202';
     return '<span style="color:' + color + '">' + this.name + '</span>';
     }
     }

上述解决方案也有效

Answer 1

如前所述，检查下面的答案。

我使用图表事件加载功能修改图例文本颜色

Highcharts.chart('container', {

  chart: {
    type: 'column',
    events: {
      load: function() {
        var seriesData = this.series;
        for (var i = 0; i < seriesData.length; i++) {
          //checks the stack type
          if (seriesData[i].options.stack == 'male') {
            /*update the legend fonts*/
            this.legend.allItems[i].legendItem.css({
              color: 'red',
              fill: 'red',
            });
          }
          if (seriesData[i].options.stack == 'female') {
            this.legend.allItems[i].legendItem.css({
              color: 'green',
              fill: 'green',
            });
          }
        }
      }
    }
  },

  title: {
    text: 'Total fruit consumtion, grouped by gender'
  },

  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },

  yAxis: {
    allowDecimals: false,
    min: 0,
    title: {
      text: 'Number of fruits'
    }
  },

  tooltip: {
    formatter: function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },

  plotOptions: {
    column: {
      stacking: 'normal'
    }
  },

  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male',
    //color: 'red'
  }, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male',
    //color: 'red'
  }, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female',
    //color: 'green',
  }, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female',
    //color: 'green'
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>