0

グラフのサイズ変更やズームが行われるたびに適切に再配置される注釈を使用して、HighCharts で縦棒グラフを作成しようとしています。

http://jsfiddle.net/2tJ3G/

チャートの周りのフレームのサイズを変更すると、私が何を意味するかがわかります。注釈は、あるべき場所にとどまります。

この問題は、この再描画関数がズームから呼び出された場合にのみ発生します。チャートがリロードされるだけです。再描画イベントの関数を提供することに成功しましたが、これは選択ズーム (すべてのデータを表示するだけ) を完全に壊してしまいました。ここに私のハンドラがあります:

function drawIt() {
    var optionsTmp = options;  
    chart = new Highcharts.Chart(optionsTmp, function(chart) {

    var text, box, point;
    var count = 0;
    for (var annotX in annots) {
        var annot = annots[annotX];
        if (annot.length > 0) {
           //draw rectangles / text with annot vals
        }
        count++;
    }
});
options = optionsTmp;
}

ズーム ( ) から新しい極値を適切に通過していない可能性がありますoptions.xAxis.minが、これをハンドラーに渡そうとしてもあまりうまくいきませんでした。

何か案は？

4

2 に答える 2

0

問題は、チャートを削除して新しいチャートを作成しようとしているということです。これは、空のコンテナを設定するだけでは不可能です。チャートも破棄する必要があります。ただし、再描画中にチャートを破棄することはできません。エラーが発生します。

たとえば、その注釈を更新するなど、別の解決策を試す必要があると思います。ポイントの追加行を使用して同様のことがここで行われます。http://www.highcharts.com/jsbin/oyadep/4/edit#javascript,liveを参照してください。

もちろん、完成していませんが、拡大すると問題なく動作します。

function drawPaths(options) {
var maxNum = 2;


//add the paths
group_init = options.renderer.g().add();
// console.log(options);
for (i = 0; i < maxNum; i++) {

    $.each(options.series[i].data, function(i2, point) {
        var xpos = options.xAxis[0].translate(this.x);
        var ypos = options.yAxis[0].translate(this.y, false, true);
        var gr = this.y; //gross revenue
        var p_gr = 0; //for tests
        var eq; //equation
        var my;
        //console.log(this);
        eq = gr + 1; //equation
        my = options.yAxis[0].translate(eq, false, true);
        //console.log(xpos, ypos, my);
        options.renderer.path(['M', xpos + 105, ypos + 5, 'L', xpos + 105, my + 5]).attr({
            'stroke-width': 1,
            stroke: '#ad2b2b'
        }).add(group_init);

    });
}
}
于 2013-03-08T11:27:37.913 に答える
0

簡単に言うと、私の setExtremes 関数 (チャートを完全に再描画する前に呼び出される) は、次の再描画関数の足元を踏みにじっていました。そこにしきい値を設定して、早期に沈黙させる必要がありました。

            setExtremes: function(e) {
                doZoom = true; 
                min= e.min; 
                max = e.max;
                e.preventDefault();
                e.stopPropagation();
            }

修正されたフィドル:

http://jsfiddle.net/9LgUf/1/

于 2013-03-18T21:57:42.060 に答える