9

最後の 100 データ ポイントに基づいて Y 軸の最大値を計算し、正常にプロットするフロート チャートがあります... しかし、進行中のプロットの現在の合計 (新しいデータ ポイントがプロットされた場合の 5 秒の遅延) が現在の値を超えることがあります。上限。グラフに新しいポイントをプロットするときに、Y 軸を動的にスケーリングする方法はありますか?

これは、現在の Y 軸を超えた場合にチャートの Y 軸を動的にスケーリングする方法に関する有効な質問です。チャートは 5 秒ごとに新しいポイントが追加されて時間の経過とともにプロットされるため、Y 軸をスケーリングする方法を尋ねていました。現在の最大 Y 軸の値を超えた場合に、新しいプロット データに合わせて軸を調整します。

アップデート：

ここに私が使用するコード（Jsonがデータを返す）とプロット更新タイマーがあります：「highY」はデータベースから最後の100個のデータポイントを取得し、最大値を最高カウント+ 10％に設定します

        <script type="text/javascript">
            $(function () {
                var str1 = [], totalPoints = 300;
                var str2 = [], totalPoints = 300;
                var pts1 = '';
                var pts2 = '';
                if (pts1 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
                if (pts2 == "" || pts == null) { pts = '2012-10-02 17:17:02'; }
                var maxYaxis = <?PHP echo $highY; ?>;
                function getStr1() {
                    var ts1 = new Date().getTime();
                    var json1 = (function () {
                        var json1 = null;
                        var myURL = '<?PHP echo $updateURL; ?>?s=1&ts=' + ts1;
                        $.ajax({
                            'async': false,
                            'global': false,
                            'url': myURL,
                            'dataType': "json",
                            'success': function (data) {
                                json1 = data;
                            }
                        });
                        return json1;
                    })(); 
                    var y1 = json1['data']['avgpersec'];
                    var total_1 = json1['data']['running_total'];
                    document.getElementById('<?PHP echo $string1; ?>Total').innerHTML = total_1;
                    if (str1.length > 0) { str1 = str1.slice(1); }

                    while (str1.length < totalPoints) {
                        var prev = str1.length > 0 ? str1[str1.length - 1] : 50;
                        str1.push(y1);
                    }

                    // zip the generated y values with the x values
                    var res = [];
                    for (var i = 0; i < str1.length; ++i){ res.push([i, str1[i]]) }
                    return res;
                }

                function getStr2() {
                    var ts2 = new Date().getTime();
                    var json2 = (function () {
                        var json2 = null;
                        var myURL = '<?PHP echo $updateURL; ?>?s=2&ts=' + ts2;
                        $.ajax({
                            'async': false,
                            'global': false,
                            'url': myURL,
                            'dataType': "json",
                            'success': function (data) {
                                json2 = data;
                            }
                        });
                        return json2;
                    })(); 
                    var y2 = json2['data']['avgpersec'];
                    var total_2 = json2['data']['running_total'];
                    document.getElementById('<?PHP echo $string2; ?>Total').innerHTML = total_2;
                    if (str2.length > 0) { str2 = str2.slice(1); }

                    while (str2.length < totalPoints) {
                        var prev = str2.length > 0 ? str2[str2.length - 1] : 50;
                        str2.push(y2);
                    }

                    // zip the generated y values with the x values
                    var res = [];
                    for (var i = 0; i < str2.length; ++i){ res.push([i, str2[i]]) }
                    return res;
                }

                // setup control widget
                var updateInterval = 5000;
                $("#updateInterval").val(updateInterval).change(function () {
                    var v = $(this).val();
                    if (v && !isNaN(+v)) {
                        updateInterval = +v;
                    if (updateInterval < 1)
                        updateInterval = 1;
                    if (updateInterval > 2000)
                        updateInterval = 2000;
                        $(this).val("" + updateInterval);
                    }
                });

                // setup plot
                var options = {
                    series: { shadowSize: 0 }, // drawing is faster without shadows
                    yaxis: { min: 0, max: maxYaxis},
                    xaxis: { show: false },
                    colors: ["<?PHP echo $string1Color; ?>","<?PHP echo $string2Color; ?>"]
                };
                var plot = $.plot($("#placeholder"), [ getStr1(), getStr2() ], options);

                function update() {
                    plot.setData([ getStr1(), getStr2() ]);
                    plot.draw();
                    setTimeout(update, updateInterval);
                }

                update();
            });
        </script>

私が達成したいと考えているのは、新しいデータ ポイントの値が現在の "yaxis { max : # }" をチャート オプションで設定します。

4

1 に答える 1

8

私はあなたが今使っていると思いますflot.setDataとflot.draw?

$.plot最も簡単な解決策は、新しいデータを受け取るたびに呼び出すことです。これは、flot プラグインの作成者によって、この状況に対処するかなり効率的な方法として何度も推奨されてきました。これを毎秒更新するグラフで使用したところ、1 ページで 3 ～ 4 個のグラフが毎秒更新されても、ユーザーのコンピューターで CPU を過剰に使用しないことがわかりました。

追加したコード（および提案された編集）に基づいて編集します。更新機能を次のように変更します。

function update() {
   var data = [ getStr1(), getStr2() ];

   //modify options to set the y max to the new y max
   options.yaxis.max = maxYaxis;
   $.plot($("#placeholder"), data, options);
   setTimeout(update, updateInterval);
}

さらに、変数を最新の状態に保つコードをgetStrおよびに追加します。getStrmaxYaxis

于 2012-10-23T15:16:29.610 に答える