1

ハイチャート グラフに 2 つの系列があります。どちらもmousemove (ツールチップを表示するため) や mouse clickなどのイベントを処理しています。

残念ながら、これらのシリーズの 1 つはarea、他のシリーズによってトリガーされるイベントをブロックするシリーズです。

これらのプロットオプションを備えたシリーズがあるとしましょう：

plotOptions: {
    series: {
        cursor: 'pointer',
        point: {
            events: {
                click: function() {
                    alert ('Category: '+ this.category +', value: '+ this.y);
                }
            }
        }
    }
},

series: [{
    color:'red',
    data: [29.9, 51.5, 16.4, 19.2, 44.0, 16.0, 35.6, 48.5, 26.4, 4.1, 9.6, 54.4]        
},
{
    type:'area',
    data: [39.9, 75.5, 120.4, 150.2, 130.0, 120.0, 140.6, 158.5, 216.4, 194.1, 95.6, 54.4]}
]
}

このJSFiddleに見られるように

赤いシリーズ ポイントのツールチップをクリックしたり、表示したりできません。

私ができることは、シリーズの順序を変更して、赤が青の上になるようにすることです. （このように）。しかし、そのようにいくつかの面グラフが重なり合っている状況があります。この場合、順序を変更しても役に立ちません。塗りつぶし領域でイベントを処理する方法はありますか?

4

2 に答える 2

1

わかりました、私は自分のニーズに合った方法を見つけました: このトピックに示されているように SVG 要素の順序を操作します: SVG の並べ替え z-index (Raphael オプション)

チャートの再描画イベントでこのコードを使用しています:

redraw : function(){
    //get a reference on the first series svg element.
    var svgSeriesParent = document.querySelectorAll('.highcharts-series')[0];

    //loop on all the path drawn by highchart
    var pathArray = document.querySelectorAll('path');

    for (var pathIndex = 0; pathIndex < pathArray.length; pathIndex++) {
        var pathObj = pathArray[pathIndex];
        //if attribute fill is not "none", this is an area path.
        if ($(pathObj).attr('fill') !== "none") {

            //move the current fill path before the first series svg element.
            svgSeriesParent.insertBefore(pathObj, svgSeriesParent.firstChild);
        }
    }
}

このJSFiddleで結果を参照してください

制限: 塗りつぶし領域には同じ SVG グループがもうないため、シリーズの非表示/表示が壊れています: すべての塗りつぶし領域は最初のシリーズの一部と見なされます。(凡例をクリックすると表示されます)。

私の場合、シリーズを非表示にする必要はないので、この解決策を続けます。

svg の順序操作は複雑ではないため、ハイチャートがこのケースを管理することを期待しています。パラメーターを追加することfillZIndexは難しくないようで、非常に便利です...

于 2013-06-19T15:08:18.617 に答える
0

私の頭に浮かぶのは、4つのシリーズ、2つのエリア、2つのラインを使用してindex.

http://jsfiddle.net/j8qYK/3/

于 2013-06-19T11:30:51.223 に答える