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

Question

我必须根据传奇的某些条件设置动态文本颜色。在下面的图片中有一些传说，如＆＃34; New＆＃34; ，＆＃34;影响评估＆＃34;，＆＃34; Stackholder Review＆＃34;因此，所有图例都与堆栈相关联，例如与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'**

上述声明很好并且给出了正确的图例颜色，但这里＆＃34;缺陷＆＃34;是静态值，我需要从动态值中获取吗？

问题我无法设置动态值。

解决方案

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

以上解决方案也正常工作

Answer 1

如下所述，请查看以下答案。

我正在使用图表events load功能修改图例文字颜色

＆＃13;

＆＃13;

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'
  }]
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

<强>更新

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

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

＆＃13;

＆＃13;

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;

  });

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;