html - Highcharts 堆积柱突出显示

Question

在 highcharts stacked column 中，如果我单击一列，我如何突出显示整个单击的列而不是仅突出显示该列的一个 block ？

我只能突出显示所选列的一个 block ，但不能突出显示整个列。 就像这样(不仅要黑整个 block ):Stacked column highlight

 xAxis: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five']
    },

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

           cursor: 'pointer',
           point: {
              events: {
                     click: function(e) {
                         this.update({ color: 'black' }, true, false)
                        }
                      }
                   }
                  }
    },

    series: [
    // first stack 
    {
        data: [29.9, 71.5, 106.4, 129.2, 144.0],
        stack: 0
    }, {
        data: [30, 176.0, 135.6, 148.5, 216.4],
        stack: 0},
    // second stack 
    {
        data: [106.4, 129.2, 144.0, 29.9, 71.5],
        stack: 1
    }, {
        data: [148.5, 216.4, 30, 176.0, 135.6],
        stack: 1
    }]

Answer 1

您可以捕获 mouseOver/mouseOut 事件并使用循环在其他系列中查找具有相同 x 值的点。然后使用允许设置悬停的 setState() 函数。

http://jsfiddle.net/3Utat/8/

events: {
                    mouseOver: function () {

                        console.log(this);

                        var indexS = this.series.index,
                            indexP = this.x,
                            series = this.series.chart.series;

                        switch (indexS) {
                            case 0:
                                series[1].data[indexP].setState('hover');
                                break;
                            case 1:
                                series[0].data[indexP].setState('hover');
                                break;
                            case 2:
                                series[3].data[indexP].setState('hover');
                                break;
                            case 3:
                                series[2].data[indexP].setState('hover');
                                break;
                        }
                    },
                    mouseOut: function () {
                        var indexS = this.series.index,
                            indexP = this.x,
                            series = this.series.chart.series;

                                series[1].data[indexP].setState('');
                                series[0].data[indexP].setState('');
                                series[3].data[indexP].setState('');
                                series[2].data[indexP].setState('');

                    }
                }