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

Question

我有一個整數屬性和DateTime屬性的對象，我想用jQuery flot繪製這些對象的集合，但是我試過用google搜索周圍尋找示例但沒有看，所以我想知道是否有人可以指向我正確的方向將對象集合轉換爲jQuery flot將理解的數組，我也理解您需要將DateTime轉換爲Javascript日期。任何幫助朝着正確的方向將不勝感激。

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