html - Highcharts stacked column highlight

Question

In highcharts stacked column, if I click one column how could I highlight the whole of the clicked column instead of only one block of the column?

I can highlight only one block of selected column but cannot highlight the whole column. Just like this(to black the whole not only one 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('');

                    }
                }