构建Json用来JqPlot条形图 [英] Constructing Json for JqPlot Bar Charts
问题描述
我设法创造一些填充JqPlot饼图（很辛苦$ C $光盘 - 这将是自动的）。下面是我已经做到了：
公众的ActionResult饼图（）
{
返回查看（）;
} 公众的ActionResult PieChartJSON（）
{
清单＆LT; PieChartData＆GT;的sampleData =新名单＆LT; PieChartData＆GT;（）;
PieChartData测试=新PieChartData（）;
PieChartData测试2 =新PieChartData（）;
PieChartData TEST3 =新PieChartData（）;
PieChartData TEST4 =新PieChartData（）;
PieChartData TEST5 =新PieChartData（）; test.Label =TA;
test.Value = 3;
sampleData.Add（试验）; test2.Label =是;
test2.Value = 5;
sampleData.Add（测试2）; 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）; 返回JSON（的sampleData，JsonRequestBehavior.AllowGet）;
}
JQuery的：
的jQuery（文件）。就绪（函数（）{
urlDataJSON ='/主页/ PieChartJSON'; $ .getJSON（urlDataJSON，功能（数据）{
变种dataSlices = [];
变种dataLabels =; $。每个（数据，功能（entryindex，进入）{
dataSlices.push（入门['值']）;
dataLabels = dataLabels +入门['标签'];
}）;
选项= {
传说：{显示：真正}，
标题：投票结果，
seriesDefaults：{
//使这个饼图。
渲染：jQuery.jqplot.PieRenderer，
rendererOptions：{
//把数据标签的馅饼片。
//缺省情况下，标签显示切片的百分比。
showDataLabels：真
}
}
}
VAR情节= $ .jqplot（饼图，[dataSlices]选项）;
}）;
}）;
http://i.stack.imgur.com/ohup4.png *生产图
我希望能够创建一个类似于下页的条形图的东西：的 http://www.jqplot.com/tests/bar-charts.php （第二张图下）。使用下面的jQuery创建此条形图：
我很新的C＃和JSON，我有点不确定JSON数据应该如何构造创建此条形图。
谁能帮我？
$（文件）。就绪（函数（）{
//对于水平条形图，x上的y值必须将翻转
//从他们的竖线对应。
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：{
渲染：$ jqplot.BarRenderer，
//显示点标签给每个栏右侧（'e'ast）。
// -15 edgeTolerance允许标签流向电网外
//多达15个像素。如果流出不止于此，他们
//将被隐藏。
pointLabels：{显示：真实的，位置：E，edgeTolerance：-15}，
//旋转杆影子，酒吧是从右上方点燃。
shadowAngle：135，
//这里我们告诉它是水平方向的图。
rendererOptions：{
barDirection：水平
}
}，
轴：{
Y轴：{
渲染：$ .jqplot.CategoryAxisRenderer
}
}
}）;
}）;
这要建立在给定的数据柱状图，你可以有你的dataSlices建立在下面的方式，假设你的 JSON理解数据来作为一个数组：
VAR JSON = [
{标签：是，值：5}
{标签：GA，值：3}
{标签：马，值：8}
{标签：JA，值：8}];
变种dataSlices = [];
变种蜱= [];
$。每个（JSON，功能（entryindex，进入）{
dataSlices.push（入门['值']）;
ticks.push（入门['标签']）;
}）;
这是中重用的证明：//www.jqplot.com/tests/bar-charts.php相对=nofollow>从jqPlot网站标准的例子
。I have managed to create something to populate the JqPlot pie chart (very hard coded – it will be automated). Here is how I’ve done it:
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 *Produced Graph
I’d like to be able to create something similar to the bar graph on the following page: http://www.jqplot.com/tests/bar-charts.php (second chart down). This bar graph is created using the following jQuery:
I’m quite new to C# and Json and I’m a little unsure how the Json data should be constructed to create this bar graph. Can anyone help me out?
$(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
}
}
});
});
Understanding that you want to build a bar chart for the given data you could have your dataSlices build in a following way, assuming your JSON data comes as an array:
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']);
});
This is demonstrated in the following code which reuses a standard example from jqPlot website.
这篇关于构建Json用来JqPlot条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.stack.imgur.com/ohup4.png](\"http://i.stack.imgur.com/ohup4.png\"){kind=link}
