解析JSON数据时出现高图数据显示 [英] Issue with highchart data display when parsing JSON data
问题描述
我试图从PhP模块动态获取数据，将其作为JSON数据加载到JavaScript中，并使用此数据使用HighCharts生成饼图。当我使用一些静态数据但不加载时，我正在生成饼图，当我解析JSON数据并将其作为输入提供给Highchart系列对象时。我相信这是与输入到Highcharts的数据格式有关的，但我现在无法弄清楚一段时间:(所以想到的只是接触到你们。我已经附上了代码和示例json输出由php模块生成，供您参考。
从PhP模块生成的示例JSON输入：[{skill：html，count：158 }，{skill：css，count：134}]。需要解析这个JSON输入并作为我的HighCharts系列对象的输入来生成一个饼图，显示html和css 作为馅饼切片。
任何指导将不胜感激。
谢谢。
< head>
< meta http-顶级技巧分析< / title>
<脚本类型=文字/标题&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& < javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js>< / script>
&l t; script src =highcharts.js>< / script>
< / head>
< body>
< table>
< tr>
< td colspan =2align =center>< u>< b>< font size =4>顶级技能分析< / font>< / b><<< ; / U>
< / td>
< / tr>
< tr>
< td>
< div id =containerstyle =height：500px; width：500px; margin-bottom：1em;>< / div>
< / td>
< / tr>
< / table>
< script type =text / javascript>
//使用来自PhP模块的动态生成数据创建HighChart
函数loadCharts（）{
//分析JSON数据并返回一个数组数组
var result = [];
// php的json类似于：[{skill：html，count：158}，{skill：css，count：134}]
$ .getJSON（'test.php'，function（json）{
$ .each（json，function（i，entry）{
result.push（entry.skill，entry.count ）;
}）;
}）;
// result = [[html，158]，[css，134]]; - >这个作品
var options1 = {
series：[{
name：Jobs，
type：pie，
sliced：true，
data：result，//在用[[html，158]，[css，134]]填充静态值时工作
pointWidth ：15，
color：＃C6D9E7，
borderColor：＃8BB6D9，
shadow：true，
}]，
title：{
text：顶级技能分析
}，
legend：{
layout：vertical，
style：{
left：auto，
bottom：auto，
right：auto，
top：汽车
}，
图表：{
renderTo：container
}，
credits：{
enabled：false
}
};
var chart1 = new Highcharts.Chart（options1）;
//首次加载网页时加载图表
$（document）.ready（function（）{
loadCharts（）;
}）;
< / script>
< / body>
它适用于静态数据，因为count是一个int b
$ b $ $ p $ $ $ $ $ $ $ $ $ $
$
它不适用于动态数据，因为它返回一个字符串数量
{skill：html，count：158}
注意第二个代码行的双引号？
您需要将您的字符串转换为PHP或javascript中的int值，然后将其传递给highcharts。另外，如果您运行代码highcharts应该抱怨有错误
Uncaught Highcharts错误＃14：www.highcharts.com/errors/14
如果您访问该链接，它基本上会提到关于字符串的相同内容。
代码还有另一个错误
[[html，158]，[css，134]]
正如您在这里看到的，我们有一个数组数组，当我们将您的代码用字符串运行到int解析我们得到
[html，158，css，134]
注意这个问题？我们有四个元素的阵列。
您需要做的是：
result.push（[entry.skill，entry.count]）;
将两个元素的数组推送到结果变量，并且不要忘记count必须是int
I am trying to dynamically fetch the data from a PhP module, load it as JSON data into javascript and use this data to generate a Pie chart using HighCharts. The Pie chart is generating properly when I am using some static data but not loading when I am parsing JSON data and feeding that as input to the Highchart series object. I am sure this is something to do with the formatting of data while inputting to Highcharts but I am not able to figure that out for sometime now :( So thought would just reach out to you guys . I have attached the code here and the sample json output generated by the php module for your reference.
Sample JSON input generated from PhP module : [{"skill":"html","count":"158"},{"skill":"css","count":"134"}]. Need to parse this JSON input and feed as input to my HighCharts series object to generate a pie-chart showing "html" and "css" as pie-slices.
Any guidance would be appreciated.
Thanks.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top Skills Analytics</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="highcharts.js"></script>
</head>
<body>
<table>
<tr>
<td colspan="2" align="center"><u><b><font size="4">Top Skills Analysis</font></b></u>
</td>
</tr>
<tr>
<td>
<div id="container" style="height: 500px; width: 500px; margin-bottom: 1em;"></div>
</td>
</tr>
</table>
<script type="text/javascript">
// Creates the HighChart using the dynamically generated data from PhP module
function loadCharts() {
// Parses the JSON data and returns an array of an array
var result = [];
// json from php is like : [{"skill":"html","count":"158"},{"skill":"css","count":"134"}]
$.getJSON('test.php', function (json) {
$.each(json, function (i, entry) {
result.push(entry.skill, entry.count);
});
});
//result = [["html",158],["css",134]]; --> this works
var options1 = {
"series": [{
"name": "Jobs",
"type": "pie",
"sliced": true,
"data": result, // works when populated with static value like [["html",158],["css",134]]
"pointWidth": 15,
"color": "#C6D9E7",
"borderColor": "#8BB6D9",
"shadow": true,
}],
"title": {
"text": "Top Skills Analytics"
},
"legend": {
"layout": "vertical",
"style": {
"left": "auto",
"bottom": "auto",
"right": "auto",
"top": "auto"
}
},
"chart": {
"renderTo": "container"
},
"credits": {
"enabled": false
}
};
var chart1 = new Highcharts.Chart(options1);
}
// Load the charts when the webpage loads for the first time
$(document).ready(function () {
loadCharts();
});
</script>
</body>
It works with static data because the count is an int
["html",158]
And it doesn't work with dynamic data because it returns a string count
{"skill":"html","count":"158"}
Notice the double quotes around the second code line? You need to either cast your string to an int in php or in javascript before passing it to highcharts
And another thing, if you run the code highcharts should complain with an error
Uncaught Highcharts error #14: www.highcharts.com/errors/14
If you visit the link it basically says the same thing about strings.
There is another thing wrong with the code
[["html",158],["css",134]]
As you can see here we have an array of arrays and when we run your code with string to int parsing we get
["html", 158, "css", 134]
Notice the problem? We have an array of four elements. What you need to do is:
result.push([entry.skill, entry.count]);
Push an array of two elements to the result variable and don't forget that count must be an int
这篇关于解析JSON数据时出现高图数据显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
