2

Highchartを使用して、ラインのzIndexをその状態に応じて、またはクリックイベントから動的に変更するにはどうすればよいですか？

私は試した ：

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

                            lineWidth: 2,
                            zIndex:10
                     }
               },

クリックイベントで：this.setState(this.state === 'select' ? '' : 'select');を使用しますが、機能しません。

4

2 に答える 2

2

確かにきれいではありませんが、実際に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/

それがあなたが必要なものであるかどうか私に知らせてください。

于 2013-03-07T15:31:08.310 に答える
0

より良い解決策は、クリック時にseries.group.toFront（）メソッドを設定することだと思います（マウスオーバーで使用することを好みます）

plotOptions: {
        series: {
            events: {
                click: function () {
                    this.group.toFront();//bring series to front when hovered over
                }
            }
        }
    }
于 2016-03-31T15:30:36.567 に答える