Question

在highcharts stacked column中，如果我单击一列，我怎么能突出显示整个单击列而不是列的一个块？

我只能突出显示所选列的一个块，但不能突出显示整列。就像这样（整个黑色不仅仅是一个块）：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('');

                    }
                }

Highcharts堆叠列突出显示

1 个答案: