3

シリーズタイプが「散布」のハイチャートを使用しています。X 軸のズーム機能も有効にしています。

ここで、マーカーの半径をズーム レベルに合わせるとよいでしょう。何かのようなもの：

events: {
    selection: function(event) {
        var extremesObject = event.xAxis[0],
            min = extremesObject.min,
            max = extremesObject.max;

        this.series[0].marker.radius = (max - min)/5;
    }

}

最後の行this.series[0]...は、私が探しているコードです。

私はこれを試しました：

        jQuery.each(this.series[1].data, function (i, point) {
            point.update({
                marker: {
                    radius: 10 / (max - min)
                }
            });
        });

しかし、再描画イベントで使用するとエラーが発生します。以下に例を示します: http://jsfiddle.net/dbX4F/2/

4

2 に答える 2

3

シリーズオプションを更新するためのAPIがないため、現在のバージョンのhighchartsではこれが可能ではないと思います。ただし、v3Betaリリースでは可能です。

ズームの計算には多少の作業が必要ですが、基本はここで機能します：http: //jsfiddle.net/Jrh2G/

events: {
    selection: function (event) {
        var extremesObject = event.xAxis[0],
         min = extremesObject.min,
         max = extremesObject.max;
        console.log(min + " " + max);
        // The maths needs some work to make the radius scale better with min/max.
        // Also, you should probabl take into account min/max y values as well.
        this.series[0].update({marker:{radius:10/(max-min)}});
}
于 2013-03-12T09:04:10.090 に答える
0

最後に、解決策を見つけました。グラフ データと同じ配列で Point 構成を渡すことができます。

jQuery.each(data, function(i, val) {
    if (i > min && i < max) {
        detailScatter.push({
            marker: {
                radius: 80 / (max - min)
            },
            x: i,
            y: val
        });
    }
});

detailChart.series[1].setData(detailScatter);

魅力のように動作します - ここを参照してください: http://jsfiddle.net/dbX4F/3/

于 2013-03-13T14:04:39.387 に答える