0

設定された間隔でフロー グラフのデータを更新する必要があります。これを行う組み込み機能を見つけることができなかったので、間隔が切れるたびにグラフを再描画するという行に沿って何かをするつもりです。flot に渡されるデータ パラメータは、変更される唯一の値です。データ変数は、json を返すサーバー メソッドへの ajax 要求を使用して設定されます。

私は正しいツリーを吠えていますか、それともこれを行うためのより良い方法はありますか?

また、javascript/jquery でどのようにタイマーをインスタンス化しますか (できれば、ajax リクエストを処理して再描画するために渡すことができるコールバックを使用して)。

編集 - 以下のように実装されました。

$(document).ready(function() {
    var options = { xaxis: { mode: 'time' } };
    var i = window.setInterval(function() {
        $.getJSON('<%= Url.Action("SomeAction", "SomeController") %>', {}, function(jsonData) {
            var graphData = new Array();
            $.each(jsonData, function(i, series) {
                graphData[i] = { label: series.label, data: new Array() };
                $.each(series.data, function(j, point) { graphData[i].data[j] = [point.date, point.value]; });
            });
            var plot = $.plot($('#FlotPlot'), graphData, options);
        });
    }, 1500);
});

flot が必要とする (ほぼ) 形式で json を返す ASP.Net MVC コントローラーがあることに注意してください。

public class SomeController : Controller {
    public ActionResult SomeAction() {
        return Json(new Models.FlotGraph(...).Items);
    }
}

public class FlotGraph {
    public FlotGraph(...) {
        List<FlotSeries> items = new List<FlotSeries>();
        ...
        Items = items.ToArray();
    }
    public FlotSeries[] Items { get; private set; }
}

public class FlotSeries {
    internal FlotSeries(string label, IEnumerable<FlotPoint> data) {
        this.label = label;
        this.data = data.ToArray();
    }
    public string label { get; private set; }
    public FlotPoint[] data { get; private set; }
}
public class FlotPoint {
    internal FlotPoint(DateTime date, float value) {
        this.date = (date - new DateTime(1970, 1, 1, 0, 0, 0, 0).ToLocalTime()).TotalSeconds;
        this.value = value;
    }
    public double date { get; private set; }
    public float value { get; private set; }
}
4

1 に答える 1

2

あなたのアプローチは、これを行う正しい方法のように思えます。あなたが尋ねるように、グラフを定期的に再描画するためにflot以外のjavascriptを書くだけの問題です。

JQuery には便利なタイマー プラグインがあります。

于 2009-08-24T16:46:51.717 に答える