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