jQuery使用ASP.NET MVC和DateTime属性进行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列表，并在控制器中使用如下内容：

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