Change zIndex in HighChart

问题

using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?

I tried :

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

                            lineWidth: 2,
                            zIndex:10
                     }
               },

with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.

回答1:

Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:

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));

And here's the JSFiddle demonstrating:

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

Let me know if that's what you needed.

回答2:

I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)

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

来源：https://stackoverflow.com/questions/15268963/change-zindex-in-highchart

标签

Highcharts