javascript - 如何为 Highcharts 图例设置颜色属性中的对象值？

Question

我必须根据图例的某些条件设置动态文本颜色，在下图中有一些图例，例如"new"，“影响评估”，“Stackholder Review”等。因此所有图例都与堆栈相关联，例如前4个与 X 实体关联，其余与 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

正如下面讨论的检查答案。

我正在使用图表events load修改图例文字颜色的函数

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>

更新

能够禁用字体颜色更改onmouseover和onmouseout。

onclick 功能如果删除，则字体颜色不会改变，反之亦然

Highcharts.chart('container', {

  chart: {
    type: 'column',
    events: {
      load: function() {
        var seriesData = this.series;
        for (var i = 0; i < seriesData.length; i++) {
          if (seriesData[i].options.stack == 'male') { //checks the stack
            /*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'
  }]
}, function(chart) {

  $.each(chart.series, function(i, series) {
    /* comment  onclick. for onclick functionality*/
    series.legendGroup.element.onmouseover = null;
    series.legendGroup.element.onmouseout = null;
    series.legendGroup.element.onclick = null;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>