如何在asp.net MVC中呈現jqPlot圖表

Question

我想呈現一個使用asp.net MVC的jqPlot條形圖。不知道如何使用從控制器返回的數據在客戶端構建數組。

我想這是與此類似，http://jsfiddle.net/du8GZ/

@foreach (var d in Model.SampleChart) 
     { 
     // What to write here? 
     } 

public class SampleChart 
    { 
     public int Count { get; set; } 
     public string Name { get; set; } 
    } 

     public ActionResult BarIn() 
     { 
       List<SampleChart> data = new List<SampleChart>(); 
       SampleChart bar; 
       Random r = new Random(); 
       for (int i = 0; i < 10; i++) 
       { 
         bar = new SampleChart(); 
         bar.Count = i; 
         bar.Name = "Sample " + i.ToString(); 
         data.Add(bar); 
       } 

       return View(data); 
     } 

<link class="include" rel="stylesheet" type="text/css" href="@Url.Content("~/scripts/jqplot/css/jquery.jqplot.min.css")" /> 
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="@Url.Content("~/scripts/jqplot/excanvas.min.js")"></script><![endif]--> 
<script type="text/javascript" src="@Url.Content("~/scripts/jqPlot/jquery.jqplot.min.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/scripts/jqplot/jqplot.categoryAxisRenderer.min.js")"></script> 
<script type="text/javascript" src="@Url.Content("~/scripts/jqPlot/jqplot.barRenderer.min.js")"></script> 

<div class="example-content"> 
    <!-- Example scripts go here --> 
    <style type="text/css"> 
     .jqplot-target 
     { 
      margin: 30px; 
     } 
     .tooltipCss 
     { 
      position: absolute; 
      background-color: #b2b1ac; 
      color: White; 
      z-index: 200; 
      padding: 5px; 
      border-radius: 5px; 
      display: none; 
     } 
    </style> 
    <div id="chart2" class="plot" ></div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     var data = new Array(); 
     var series = new Array(); 

     @foreach (var d in Model.SampleChart) 
     { 

     } 
     plot2 = $.jqplot('chart2', data, { 

      seriesDefaults: { 
       renderer: $.jqplot.BarRenderer, 
       rendererOptions: { 
        barDirection: 'horizontal', 
        barPadding: 10, 
        barMargin: 15 
       } 
      }, 
      series: series, 
     axes: { 
      yaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer 
      } 
     } 
     }); 
     $('#chart2').bind('jqplotDataMouseOver', 
      function (ev, seriesIndex, pointIndex, data) { 
       //$('#info2').html('series "' + series[seriesIndex].label + '" point "' + (pointIndex + 5) + '"<br /> value "' + data[1] + '"'); 
       //$('#info2').css({ "left": ev.pageX + 3, "top": ev.pageY }) 
       $('#info2').show(); 
      } 
     ); 
     $('#chart2').bind('jqplotDataUnhighlight', 
      function (ev) { 
       $('#info2').hide(); 
      } 
     ); 
    }); 
</script> 
<div id="info2" class="tooltipCss"></div> 

Answer 1

在你的客戶端上的數組實際上是在JSON代表因此，所有你需要做的就是創建一個將舉行的表示視圖模型陣列，並且傾銷它在一個隱藏字段作爲JSON ...這樣的：

@Html.Hidden("BarGraphData",Json.Encode(Model.BarGraphData)) 

，然後使用jQuery將數據發送到jqPlot這樣的：

var columnChartData = $.parseJSON($('#BarGraphData').val()); 
var plot2 = $.jqplot('chart1', columnChartData ,{....