highcharts - 更改 HighChart 中的 zIndex

Question

使用 Highchart，我们如何根据其状态或从点击事件动态更改线条的zIndex ？

我试过了 ：

plotOptions: {
        series: {
               states: {
                     select: {

                            lineWidth: 2,
                            zIndex:10
                     }
               },

with :this.setState(this.state === 'select' ? '' : 'select');在Click事件中，但它不起作用。

Answer 1

好吧，它肯定不漂亮，但我找不到实际设置 zIndex 的方法，所以我不得不做一些操作来伪造它，并按照一定的顺序将每个系列放在前面。这是要包括的代码段：

Highcharts.Series.prototype.setState = (function (func) {
        return function () {
            if (arguments.length>0){
                if (arguments[0] !== ''){
                    if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
                        this.options.oldZIndex = this.group.zIndex;
                        this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
                    }
                }else{
                    if (typeof this.options['oldZIndex'] !== "undefined"){
                        this.group.zIndex = this.options['oldZIndex'];
                    }
                }
                var order = [], i = 0;
                $.each(this.chart.series, function(){
                    order.push({id:i,zIndex:this.group.zIndex,me:this});
                    i++;
                });
                order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
                $.each(order, function(){
                    this.me.group.toFront();
                });
                func.apply(this, arguments);
            }
        };
    } (Highcharts.Series.prototype.setState));

这是 JSFiddle 演示：

http://jsfiddle.net/G9d9H/9/

让我知道这是否是您需要的。

Answer 2

我认为更好的解决方案是在点击时设置 series.group.toFront() 方法（我更喜欢在鼠标悬停时使用它）

plotOptions: {
        series: {
            events: {
                click: function () {
                    this.group.toFront();//bring series to front when hovered over
                }
            }
        }
    }