計時器上的浮點圖

Question

我希望我的浮動圖表在設定的時間間隔內更新其數據。 我一直找不到能做到這一點的內置功能，因此我打算在每次間隔到期時按照重繪圖表的方式進行操作。 傳遞給flot的data參數是唯一會更改的值。 使用對返回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);
});

請注意，我有一個ASP.Net MVC控制器，以（幾乎）flot所需的格式返回json：

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; }
}

Answer 1

您的方法聽起來像是正確的方法。 正如您所要求的，編寫非浮點javascript定期重繪圖形即可。

JQuery有一個不錯的計時器插件 。