2016-01-19 58 views
2

我想生成一個圖表,但沒有顯示任何結果。 這是我的控制器代碼:條形圖的返回數據

public dynamic Get(int year) 
     { 
      var alldata = (from item in db.PT_OrderedList_vw 
          where item.expected_date.Value.Year == year 
          group item by item.expected_date.Value.Month into grp 
          select new 
          { 
           totalPT = grp.Sum(x => x.totalPT.Value), 
           Month = (double)grp.Max(x => x.expected_date.Value.Month) 
          }).ToList(); 
      var final_data = new[] 
       { 
        new { label="Purchase", data = alldata.Select(x=>new double[]{ x.totalPT, x.Month })} 

       }; 

      final_data; 
     } 

查看:

<section style="width: 500px; margin: 10px; text-align:center;"> 
    <div id="placeholder" style="width: 500px; height: 300px;"></div> 
    <h3 style="font-size:1.4em">Traffic Overview - 2012 </h3> 
</section> 

腳本,我把視圖網頁上面:

<script> 
    var dataurl = 'Get/'; 
    // setup plot 
    var options = { 
     legend: { 
      show: true, 
      margin: 10, 
      backgroundOpacity: 0.9 
     }, 
     points: { 
      show: true, 
      radius: 3 
     }, 
     lines: { 
      show: true 
     }, 
     grid: { hoverable: true, clickable: true }, 
     yaxis: { min: 0, tickFormatter: formatter }, 
     xaxis: { ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]] } 

    }; 
    function formatter(val, axis) { 
     return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    } 
    $.ajax({ 
     url: dataurl, 
     method: 'GET', 
     data: { year: 2016 }, 
     dataType: 'json', 
     success: function (data) { 
      $.plot($("#placeholder"), data, options); 
     } 
    }); 


    var previousPoint = null; 
    $("#placeholder").bind("plothover", function (event, pos, item) { 
     if (item) { 
      if (previousPoint != item.dataIndex) { 
       previousPoint = item.dataIndex; 

       $("#tooltip").remove(); 
       var x = item.datapoint[0], 
        y = item.datapoint[1].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
       showTooltip(item.pageX, item.pageY, item.series.label + ": " + y); 

      } 
     } 
     else { 
      $("#tooltip").remove(); 
      previousPoint = null; 
     } 
    }); 


    function showTooltip(x, y, contents) { 
     $('<div id="tooltip">' + contents + '</div>').css({ 
      position: 'absolute', 
      display: 'none', 
      top: y + 5, 
      left: x + 5, 
      border: '1px solid #fdd', 
      padding: '2px', 
      'background-color': '#fee', 
      opacity: 0.80 
     }).appendTo("body").fadeIn(200); 
    } 
</script> 

結果:

我需要生成一個圖表,但它什麼也沒有顯示。 這是我第一次這樣做,不知道這段代碼有什麼錯誤。我只是研究一切,並按照谷歌提供的一些步驟。

我需要建議或建議,以便我可以實現此圖。

+0

你不能只是更新你的問題的答案匹配碼(答案將沒有任何意義),我已經撤消你的修改代碼。 –

回答

3

您的控制器代碼必須返回並且json的ActionResult

public ActionResult Get(int year) 
{ 

     //code omitted 
     return Json(final_data;, JsonRequestBehavior.AllowGet); 

} 

JsonResult Class

+0

圖表現在顯示,但標籤不存在的X軸 – Jen143Me

+0

@ Jen143Me我會創建一個新的問題,因爲它是一個不同的問題。如果你可以創建一個jsFiddle,並且有人會很快回答它,我會想象。 :) – hutchonoid

+0

我明白了。感謝您的幫助。 – Jen143Me