0

我希望我的浮动图在设定的时间间隔内更新它的数据。我一直找不到任何内置功能可以做到这一点，所以我打算在每次间隔到期时按照重绘图表的方式做一些事情。传递给 flot 的 data 参数是唯一会改变的值。使用 ajax 请求向返回 json 的服务器方法填充数据变量。

我是在吠叫正确的树还是有更好的方法呢？

另外，如何在 javascript/jquery 中实例化一个计时器（最好使用我可以传入的回调来处理 ajax 请求和 flot 重绘）？

编辑 - 现在实现如下：

$(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; }
}
4

1 回答 1

2

您的方法听起来是正确的方法。正如您所问的，这只是编写非浮动 javascript 以定期重绘图形的问题。

JQuery 有一个不错的计时器插件。

于 2009-08-24T16:46:51.717 回答