我已经设法创建了一些东西来填充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
}
}
});
});
答案 0 :(得分:4)
了解您要为给定数据构建条形图,假设您的JSON
数据以数组形式出现,您可以使用以下方式构建dataSlices:
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。
答案 1 :(得分:0)
试试这个,工作正常,
$.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' }
}
);
});