Question

使用Highchart，我们如何根据状态更改某行的 zIndex ，还是从点击事件动态更改？

我试过了：

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

                            lineWidth: 2,
                            zIndex:10
                     }
               },

使用点击事件中的this.setState(this.state === 'select' ? '' : 'select');，但它不起作用。

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
                }
            }
        }
    }

在HighChart中更改z索引

2 个答案: