更改HighChart中的zIndex [英] Change zIndex in HighChart

问题描述

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

我试过：

  plotOptions：{
 series：{
 states：{b $ b < 
 select：{
 
 lineWidth：2，
 zIndex：10 
} 
}，
  

与： this.setState（this.state ==='select'？''：'select'）; 在点击事件中，但它不起作用。

解决方案

不是很漂亮，但我找不到实际设置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/

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

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.

解决方案

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.

这篇关于更改HighChart中的zIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！