web-dev-qa-db-ja.com

ロード後にハイチャートを自動的に拡大

グラフの読み込みが完了した後、グラフの一部を自動的に拡大する方法を知っている人はいますか？時系列データはたくさんありますが、最も重要な情報は右側にあります。引き続きすべてのデータを利用できるようにしたいのですが、ズームインしたのは最新の7日間のみです。

シミュレートしたいのは、ユーザーがチャートの最新7日間をクリックしてドラッグすることです。したがって、そのイベントを手動でトリガーする方法を誰かが知っている場合は、おそらくそれが私がやりたいことです。

これは、通常のズーム機能を備えたjsfiddleのサンプルチャートです。 http://jsfiddle.net/Y5q8H/50/

これをどのように行うことができるかについては他にもいくつか考えがありますが、私が望んでいるのはそれを実現するための最良の方法だと思います。

その他のアイデア：

1）過去7日間のみロードし、偽の「ズームのリセット」ボタンを配置して、その後データシリーズ全体をロードします

2）その姉妹製品を調べてください StockCharts 現在ベータ版です。プリセットレンジディスプレイがたくさんあるようですが、これもクールです。ただし、既存のコードをどれだけ変更する必要があるかはわかりません。

javascriptjquerychartshighcharts
17
RoboKozo

SetExtremes関数を使用してズームを変更できます。 http://jsfiddle.net/quVda/382/

日ごとの情報を含む時系列グラフの場合、日付のUTC表現を使用する必要があります。

var d = new Date();
chart.xAxis[0].setExtremes(
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7),
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
30
Dennis

ソリューションの公式フィドルを更新しました： http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis- setextremes /

$(function() {
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });

    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2007, 0, 1),
            Date.UTC(2007, 11, 31)
        );
    });
});
4
Andy Webov

あなたがしようとすると別のオプションがあります

var max_in = 100; //the highest y value you have in your series data;
var min_in = 41 ;//the lowest y value you have in your series data;

yaxis=this.yAxis[0];
yaxis.options.max = max_in;
yaxis.options.min = min_in;
0
zero8