在Highcharts中使用JSON和金字塔图时,控制台日志中不会出现任何错误,但不会显示任何数据。
我有charts.php,结果是这样的:
{"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]}
这是我尝试过的,但没有返回任何数据。
<div id="chart" style=
"height:600px;width:100%;"></div>
<script>
$(function () {
$("#chart").html("Loading Activity Log Graph...");
var options = {
chart: {
type: 'pyramid',
renderTo: 'chart',
marginRight: 100
},
title: {
text: 'Activity',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
}
}
},
legend: {
enabled: false
},
name: 'Activity Count',
series: [{}]
};
$.ajax({
url: "charts.php",
type:'post',
dataType: "json",
success: function(data){
options.series = data.data;
var chart = new Highcharts.Chart(options);
}
});
});
</script>
这是我想要的结果,在不使用JSON的情况下显示:http://jsfiddle.net/0dyy44hz/
我需要更改什么才能显示数据?
查看金字塔示例,数据必须是单个序列的形式,每个数据点都是[name, value]
的数组。您有两种选择,一种是更改PHP以输出正确的格式,另一种是用javascript修改PHP输出。由于你没有发布你的PHP代码,我稍后会做:
var data = {"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]};
options.series = [{
data: $.map(data.data, function(i){ // loop outputted data
return [[i.name, i.data]]; // coerce into an array of [name,value]
})
}];
下面是一个工作示例。