MVC jQPlot JSON數據渲染器不繪圖

Question

我正在使用MVC4和jQPlot一起構建多筆DateTime X軸圖。

I'using下面的代碼在控制器通過Ajax以檢索服務器數據：

public ActionResult GetPlotData() 
     { 
       List<Tuple<DateTime, decimal>> plotData = new List<Tuple<DateTime, decimal>>(); 

       /// 
       /// Plot data 
       /// 
       plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now, 10)); 
       plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 20)); 
       plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 30)); 
       plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 40)); 
       plotData.Add(new Tuple<DateTime, decimal>(DateTime.Now.AddHours(-1), 50)); 

       return Json(plotData, JsonRequestBehavior.AllowGet); 
      } 

這是我的觀點：

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.json2.min.js"></script> 

<div id="chart"></div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var ajaxDataRenderer = function (url, plot, options) { 
      var ret = null; 
      $.ajax({ 
       // have to use synchronous here, else the function 
       // will return before the data is fetched 
       async: false, 
       url: url, 
       dataType: "json", 
       success: function (data) { 
        ret = data; 
       } 
      }); 
      return ret; 
     }; 

     var jsonurl = '@Url.Action("GetPlotData", "UserPDataTrend")'; 

     var plot1 = $.jqplot('chart', jsonurl, { 
      title: 'Tendência Dados de Processo', 
      dataRenderer: ajaxDataRenderer, 
      axes: { 
       xaxis: { 
        renderer: $.jqplot.DateAxisRenderer, 
        tickOptions: { 
         formatString: '%b&nbsp;%#d' 
        } 
       }, 
       yaxis: { 
        tickOptions: { 
         formatString: '$%.2f' 
        } 
       } 
      }, 
      highlighter: { 
       show: true, 
       sizeAdjust: 7.5 
      }, 
      cursor: { 
       show: false 
      } 
     }); 
    }); 

</script> 

這是我從瀏覽器中得到（得到它通過瀏覽器上的F12）：

[{"Item1":"\/Date(1386710588647)\/","Item2":10},{"Item1":"\/Date(1386706988649)\/","Item2":20},{"Item1":"\/Date(1386706988649)\/","Item2":30},{"Item1":"\/Date(1386706988649)\/","Item2":40},{"Item1":"\/Date(1386706988649)\/","Item2":50}] 

當然，jqPlot的數據是不可讀的，但我嘗試使用廣告不同的類，全部轉換爲字符串數組作爲Json數據，並且它們都不起作用。

如何在Controller中構建數據以便jQPlot可以理解DateTime和Value。

感謝您的任何幫助。

Answer 1

不會在控制器端，但在JavaScript的端 更改數據並將其轉換爲數組的數組爲jqplot應用於LineChart

 for (var i = 0; i < result.Data.length; i++) { 
      var date = result.Data[i].Date; 
      var value = result.Data[i].Value; 
      date = moment(date).format("YYYY MM DD,h:mm:ss"); 
      arr.push([date, value]); 
     } 

傳遞陣列到jqplot數據 這將工作