具有 ASP.NET MVC 和 DateTime 属性的 jQuery flot

Question

我有一个带有整数属性和 DateTime 属性的对象，我想使用 jQuery flot 绘制这些对象的集合，但是我尝试在谷歌上搜索示例但没有查看，所以我是想知道是否有人可以为我指明将对象集合转换为 jQuery flot 能够理解的数组的正确方向，我也知道您需要将 DateTime 转换为 Javascript Date。任何有助于朝着正确方向前进的帮助将不胜感激。

Answer 1

我创建了一个扩展方法来将我的数据时间转换为 JavaScript 日期时间。它看起来像:

private static long ToJavascriptTimestamp( this DateTime input )
{
  TimeSpan span = new TimeSpan( new DateTime( 1970, 1, 1, 0, 0, 0 ).Ticks );
  DateTime time = input.Subtract( span );
  return ( long )( time.Ticks / 10000 );
}

然后我只是将其作为 Json 结果传回。

如果您想将其设为柱形图，则条形宽度也基于刻度，因此如果您希望其为一小时，则宽度将为:60 * 60 * 1000(刻度 * 秒 * 分钟)

你的对象可能是这样的:

public class GraphData
{
  public int Value {get; set;}
  public long Date {get; set;}
}

然后只需创建一个 GraphData 列表，并在 Controller 中使用如下内容:

return Json(myGraphDataList, "application/json", Encoding.Default);

然后，在您的 javascript 中，您可能会进行一些 $.Ajax 调用来获取数据，并在成功响应中进行设置，如下所示:

$.ajax({
  url: "/someUrl",
  type: 'POST',
  dataType: 'json',
  success: function (result) {

    var graphData = [{
        data: result.Data,
        lines: {
            show: true
        },
        points: {
            radius: 3
        }
    }];

    var graphOptions = {
        grid: {
            hoverable: true,
            borderWidth: 1
        },
        yaxis: {
            axisLabel: "Title",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            min: 0
        },
        xaxis: {
            axisLabel: "Time",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            mode: "time",
            timeformat: "%H:%M",
            tickSize: 1000 * 60 * 60
        }
    };

     $.plot($("#tag"), data, options);
  }
});