1

画像を追加したチャートを作成しました。この画像をクリックすると、yAxis の最大値を特定のポイントに設定し、もう一度クリックして yAxis を元の値にリセットします。これはそのための jsfiddle です: http://jsfiddle.net/inadcod/TynwP/ 画像を追加して、画像にクリック イベントを追加することができましたが、それは私が得た限りです。誰でもこれで私を助けることができますか? ありがとう！

4

1 に答える 1

3

やりたいことを実行するには、2 つの方法があります。

最初の方法:

問題は、チャート オプションを更新してから更新することができないことです。次のように、再度作成するredraw必要があります。destroy

そのため、チャートoptionsを var に保存してからパラメーターとして渡すことができます。

// inside options
    load: function() {
        this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
        .on('click', function() {
            if(options.yAxis.max) {
                delete options.yAxis.max; // return to default
            } else {
                options.yAxis.max = 25;
            }
            chart = new Highcharts.Chart(options);                        
        })
        .css({
            cursor: 'pointer',
            position: 'relative',
            "margin-left": "-90px",
            opacity: 0.75
        }).attr({
            id: 'myImage',
            zIndex: -100
        }).add();
    }

デモ

2 番目の方法:次のようにデータを

redraw更新するだけの場合は呼び出されません。、それが私が上記の方法を提案した理由です。 ただし、 を設定して呼び出すと、機能します。私のデモは以下で見ることができます。axis
chart.yAxis[0].max = 25;
chart.yAxis[0].isDisty = true;chart.redraw();

// inside chart options
    load: function() {
        this.renderer.image('http://inadcod.com/img/zoom.png', 70, 10, 28, 28)
        .on('click', function() {
            var axis = chart.yAxis[0];
            axis.max = 25;
            axis.isDirty = true;
            chart.redraw();
        })
        .css({
            cursor: 'pointer',
            position: 'relative',
            "margin-left": "-90px",
            opacity: 0.75
        }).attr({
            id: 'myImage', // your image id
            zIndex: -100
        }).add();
    }

デモ

于 2012-09-04T21:14:23.920 に答える