如何改变Highcharts中不活动条形图的颜色？

Question

我想改变Highcharts中不活动条形图的颜色，我知道如何改变不透明度，但没有设置不同颜色的选项，这里我的例子是这样的。

Answer 1

使用 mouseOver 和 mouseOut 事件来更新系列颜色。

var seriesColors = ['red', 'blue', 'green'];

function applyColorState(e) {
    var allSeries = this.chart.series;

    allSeries.forEach(function(series, i) {
        if (series !== this) {
            series.update({
                color: e.type === 'mouseOver' ? 'gray' : seriesColors[i]
            }, false);
        }
    }, this);

    this.chart.redraw();
}


Highcharts.chart('container', {
    plotOptions: {
        series: {
            ...,
            events: {
                mouseOver: applyColorState,
                mouseOut: applyColorState
            }
        }
    },
    ...
});

---

现场演示。 http:/jsfiddle.netBlackLabelz42jn8dv。

API参考。

https:/api.highcharts.comhighchartsseries.column.events。

https:/api.Highcharts.comclass-referenceHighcharts.Series#update。

---

EDIT:

如果你想拥有同样的功能，请添加下面的插件，用于传说。

(function(H) {
  H.wrap(H.Legend.prototype, 'setItemEvents', function(proceed, points) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    this.allItems.forEach(function(item) {
      if (item.legendGroup) {
        item.legendGroup.on('mouseover', function() {
          item.onMouseOver();
        });

        item.legendGroup.on('mouseout', function() {
          item.onMouseOut();
        });
      }
    });
  });
}(Highcharts));

现场演示。 http:/jsfiddle.netBlackLabelz42jn8dv1。

文件。 https:/www.highcharts.comdocsextending-highchartsextending-highcharts