如何获取线形图中的所有json值 [英] How to get all json values in line chart
本文介绍了如何获取线形图中的所有json值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有很多Json值，使用它们我将创建一个折线图，但它只显示图表中的一个值。我是一个新手javascript，并有一个想法，绘制图表中的所有值。请任何人给此问题的jsfiddle示例。
HTML代码
< div id =chartContainerclass =chart>
脚本
$。getJSON（'dashboard_summary.php？'，function（data）{
var len = data.length
$ .each（data，function（i，v）{
chart（v.Date，v.Tip，v.Revenue，len）;
}）;
} ;
功能图（日期，提示，修订版，len）{
var chart = new CanvasJS.Chart（chartContainer，{
title：{
text： Revenue，
fontSize：15
}，
axisX：{
gridColor：Silver，
tickColor：silver，
valueFormatString： DD / MMM
}，
toolTip：{
shared：true
}，
theme：theme2，
axisY：{
gridColor：Silver，
tickColor：silver
}，
legend：{
verticalAlign：center，
horizontalAlign：right
}，
data：[
{
type：line，
showInLegend：true，
lineThickness：2，
name： Tip，
markerType：square，
color：＃F08080，
dataPoints：[
{
x：new Date（dates），
y：parseInt（Tip）
}
]
}，
{
type：line，
showInLegend：true，
name ：Revenue，
color：＃20B2AA，
lineThickness：2，
dataPoints：[
{
x：new Date（dates），
y：parseInt（Rev）
}
]
}
]，
legend：{
cursor：pointer，
itemclick： function（e）{
if（typeof（e.dataSeries.visible）===undefined|| e.dataSeries.visible）{
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render（）;
}
}
}）;
chart.render（）;
};
Json数据
{
Date：2014-01-30，
CarsParked：1，
RevenueWithTip：0，
Revenue：0，
Tip：0，
}，
{
Date：2014-01-31，
CarsParked：10，
RevenueWithTip：10，
Revenue：7，
Tip：3，
} ，
{
Date：2014-02-28，
CarsParked：28，
RevenueWithTip：55，
Revenue：47，
Tip：8，
}
解决方案
根据您的代码，我可以看到为什么图表只显示一个点，这是预期在图表上显示的点的最后一个数据点。这里是问题：
var len = data.length;
/ *循环遍历数据中的每个项目* /
$ .each（data，function（i，v）{
chart（v.Date，v.Tip， v.Revenue，len）; / *绘制一个点* /
}的图表;
所以你最终绘制了多个图表，最后一个图表有最后一个数据点，
相反，您应该如下调整 foreach 块，并在转换后绘制图表将数据转换为点数组。
$。getJSON（'dashboard_summary.php？'，function（data）{
var Tips = [];
var Revs = [];
$ .each（data，function（i，v）{
Tips.push（{x：new Date .Date），y：parseInt（v.Tip）}）;
Revs.push（{x：new Date（v.Date），y：parseInt（v.Revenue）}）;
} ）;
chart（Tips，Revs）;
}）;
此外，您可以设置x轴的格式，使图表看起来更漂亮在您的应用程序中，您可能必须根据实际数据使用其他格式样式）：
功能图（提示，修订）{
var chart = new CanvasJS.Chart（chartContainer，{
title：{
text：Revenue，
fontSize：15
}，
axisX：{
gridColor：Silver，
tickColor：silver，
valueFormatString：DD / MMM，
interval：14，
intervalType：day
}，
toolTip：{
shared：true
}，
theme：theme2 ，
axisY：{
gridColor：Silver，
tickColor：silver
}，
legend：{
verticalAlign：center
horizontalAlign：right
}，
data：[
{
type：line，
showInLegend：true，
lineThickness ：2，
name：Tip，
markerType：square，
color：＃F08080，
dataPoints：Tips
}，
{
type：line，
showInLegend：true，
name：Revenue，
color：＃20B2AA，
lineThickness：2，
dataPoints：Revs
}
]，
legend：{
cursor：pointer，
itemclick：function（e）{
if （typeof（e.dataSeries.visible）===undefined|| e.dataSeries.visible）{
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render（）;
}
}
}）;
chart.render（）;
}
I have many Json values, using them I am going to create a line chart but it shows only one value in the chart. I am a newbie to javascript and have an idea to plot all values in chart. please anybody give jsfiddle example for this issue.
HTML code
<div id="chartContainer" class="chart">
Script
$.getJSON('dashboard_summary.php?', function(data) {
var len = data.length
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
};
Json data
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}
解决方案
Based on your code, I can see why the chart shows only one point, which is the last data point of those points expected to be shown on the chart. Here is the problem:
var len = data.length;
/* Loop through each item in the data */
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});
So you end up drawing many charts with the last chart which has the last data point to replace all the previous charts.
Instead, you should adjust the foreach block as follow and draw the chart once you've converted the data into an array of points.
$.getJSON('dashboard_summary.php?', function(data) {
var Tips = [];
var Revs = [];
$.each(data, function(i, v) {
Tips.push({ x: new Date(v.Date), y: parseInt(v.Tip) });
Revs.push({ x: new Date(v.Date), y: parseInt(v.Revenue) });
});
chart(Tips, Revs);
});
Also, you can format the x-axis to make the chart look prettier (The format of the x-axis here is designed for the data given above. In your application, you may have to use another format style depending on the actual data):
function chart (Tips, Revs) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM",
interval:14,
intervalType: "day"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: Tips
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: Revs
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
A jsFiddle is made here for your review.
这篇关于如何获取线形图中的所有json值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
