为JqPlot条形图构造Json

我已经设法创建了一些东西来填充JqPlot饼图（非常硬编码 – 它将自动化）。 我是这样做的：

public ActionResult PieChart() { return View(); } public ActionResult PieChartJSON() { List sampleData = new List(); 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://sofzh.miximages.com/jquery/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']); }); 

以下代码演示了这一点，该代码重用了jqPlot网站的标准示例 。

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