爲JqPlot條形圖構建Json

Question

我已經設法創建了一些東西來填充JqPlot餅圖（非常硬編碼 - 它將被自動化）。這裏是如何我已經做到了：

public ActionResult PieChart() 
    { 
     return View(); 
    } 

    public ActionResult PieChartJSON() 
    { 
     List<PieChartData> sampleData = new List<PieChartData>(); 
     PieChartData test = new PieChartData(); 
     PieChartData test2 = new PieChartData(); 
     PieChartData test3 = new PieChartData(); 
     PieChartData test4 = new PieChartData(); 
     PieChartData test5 = new PieChartData(); 

     test.Label = "ta"; 
     test.Value = 3; 
     sampleData.Add(test); 

     test2.Label = "be"; 
     test2.Value = 5; 
     sampleData.Add(test2); 

     test3.Label = "ga"; 
     test3.Value = 3; 
     sampleData.Add(test3); 

     test4.Label = "ma"; 
     test4.Value = 8; 
     sampleData.Add(test4); 

     test5.Label = "ja"; 
     test5.Value = 8; 
     sampleData.Add(test5); 

     return Json(sampleData, JsonRequestBehavior.AllowGet); 
    } 

JQuery的：

jQuery(document).ready(function() { 
    urlDataJSON = '/Home/PieChartJSON'; 

    $.getJSON(urlDataJSON, "", function (data) { 
     var dataSlices = []; 
     var dataLabels = ""; 

     $.each(data, function (entryindex, entry) { 
      dataSlices.push(entry['Value']); 
      dataLabels = dataLabels + entry['Label']; 
     }); 
     options = { 
      legend: { show: true }, 
      title: 'Poll Results', 
      seriesDefaults: { 
       // Make this a pie chart. 
       renderer: jQuery.jqplot.PieRenderer, 
       rendererOptions: { 
        // Put data labels on the pie slices. 
        // By default, labels show the percentage of the slice. 
        showDataLabels: true 
       } 
      } 
     } 
     var plot = $.jqplot('pieChart', [dataSlices], options); 
    }); 
}); 

http://i.stack.imgur.com/ohup4.png *製作圖表

我希望能夠創建一個類似於在條形圖的東西以下頁面：http://www.jqplot.com/tests/bar-charts.php（第二張圖下）。這條線圖使用創建以下的jQuery：

我很新的C＃和JSON，我有點不確定JSON數據應該如何被構建爲創建該柱狀圖。 任何人都可以幫我嗎？

$(document).ready(function(){ 
    // For horizontal bar charts, x an y values must will be "flipped" 
    // from their vertical bar counterpart. 
    var plot2 = $.jqplot('chart2', [ 
     [[2,1], [4,2], [6,3], [3,4]], 
     [[5,1], [1,2], [3,3], [4,4]], 
     [[4,1], [7,2], [1,3], [2,4]]], { 
     seriesDefaults: { 
      renderer:$.jqplot.BarRenderer, 
      // Show point labels to the right ('e'ast) of each bar. 
      // edgeTolerance of -15 allows labels flow outside the grid 
      // up to 15 pixels. If they flow out more than that, they 
      // will be hidden. 
      pointLabels: { show: true, location: 'e', edgeTolerance: -15 }, 
      // Rotate the bar shadow as if bar is lit from top right. 
      shadowAngle: 135, 
      // Here's where we tell the chart it is oriented horizontally. 
      rendererOptions: { 
       barDirection: 'horizontal' 
      } 
     }, 
     axes: { 
      yaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer 
      } 
     } 
    }); 
}); 

Answer 1

瞭解，你想建立一個條形圖你可以有你的dataSlices給出的數據建立在下面的方式，假設你JSON數據來作爲一個數組：

var json = [ 
    {"Label": "be", "Value": 5} 
    ,{"Label": "ga", "Value": 3} 
    ,{"Label": "ma", "Value": 8} 
    ,{"Label": "ja", "Value": 8}]; 
var dataSlices = []; 
var ticks = []; 
$.each(json, function (entryindex, entry) { 
    dataSlices.push(entry['Value']); 
    ticks.push(entry['Label']); 
}); 

這是demonstrated in the following code其中重複使用standard example from jqPlot website。

Answer 2

試試這個，做工精細，

$.getJSON('/mservice/getvalues', function(data) { 
     var items1 = new Array(); 
     var j=0; 
     for (var i in data) { 
      var items = new Array(); 
      items.push(i,Number(data[i])); 
      items1[j++] = items; 
     } 

     var plot1 = jQuery.jqplot('chart1', eval([items1]), { 

        seriesDefaults:{ 
         renderer:jQuery.jqplot.PieRenderer, 
         rendererOptions:{ 
          dataLabels:'value', 
          showDataLabels:true 
         } 
        }, 
        legend:{ show:true, location:'e' } 
       } 
     ); 

    });