我是JSON和High Charts的新手。我需要显示带有高图表的动态线条。我正在使用JSON格式。我真的很困惑我的代码中出了什么问题。我没有在Firebug中收到任何错误,但图表没有渲染。下面是我的JSON。
{
"data": [
{
"AccountName": "test@test.com",
"Campaign": [
{
"id": 1138,
"name": "Samsung Corporate v2",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 78,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 1133,
"name": "Samsung Corporate Fan Gate oCPM",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 90,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 647,
"name": "Samsung Corporate Fan Gate",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 646,
"name": "Samsung Corporate Timeline",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 1548,
"name": "Sauza Tequila v2.0",
"accountid": 108139269338750,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 953,
"name": "Samsung Corporate Timeline O C P M",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 738,
"name": "MSN EN FB",
"accountid": 106388236165899,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 1511,
"name": "Samsung Passions Program",
"accountid": 106680966134773,
"FBImpression": 2786134,
"CLImpression": 2786134,
"FBClick": 566,
"CLClick": 566,
"FBSpent": 679.77001953125,
"CLSpent": 679.77001953125,
"FBConnection": 396,
"CLConnection": 358
},
{
"id": 917,
"name": "Samsung Passion App",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
},
{
"id": 1606,
"name": "Samsung Corporate v2 oCPM",
"accountid": 106680966134773,
"FBImpression": 0,
"CLImpression": 0,
"FBClick": 0,
"CLClick": 0,
"FBSpent": 0,
"CLSpent": 0,
"FBConnection": 0,
"CLConnection": 0
}
]
}
]
}
这是我的html文件。
<script src="jquery.min.js" type="text/javascript"></script>
<script src="highcharts.js"></script>
<div id="errq" style="height: 400px"></div>
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'errq',
type: 'line'
},
title: {
text: 'shannon.way'
},
tooltip: {
formatter: function() {
return this.series.name + ':' + '<b> ' + this.y + '</b>';
},
style: {
fontSize: '10px'
}
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
},
xAxis: {
labels: {
enabled: false
}
},
series: [{
name: 'Budget Spent',
data: []},
{
name: 'Impressions',
data: []},
{
name: 'Clicks',
data: []},
{
name: 'Likes',
data: []}
]
};
$.getJSON('accounts.json', null, function(data) {
var str = JSON.stringify(data);
/* options.series[0].data = data[0].CLImp;
options.series[1].data = data[0].CLClick;
options.series[2].data = data[0].CLSpent;
options.series[3].data = data[0].CLLikes;
chart = new Highcharts.Chart(options);*/
var json_parsed = $.parseJSON(str);
var CLimp = new Array();
for (var u = 0; u < json_parsed.data.length; u++) {
var user = json_parsed.data[u];
for (i = 0; i < user.Campaign.length; i++) {
CLimp[i] = parseInt(user.Campaign[i].CLImpression);
}
}
var imp = CLimp.join(",");
alert(imp);
options.series[0].data = imp;
chart = new Highcharts.Chart(options);
});
});
</script>
当我alert(imp);
时,我得到78,90,0,0,0,0,0,2786134,0,0
但无法弄清楚为什么图表不会呈现。请你就此提出建议。
答案 0 :(得分:1)
Highcharts不希望数据采用字符串格式,而是采用数组格式。您的问题是您将数组转换为字符串:
var imp = CLimp.join(",");
alert(imp);
options.series[0].data = imp;
直接使用数组,它应该可以工作:
options.series[0].data = CLimp;
jsFiddle的工作示例。