我做了一個JSFIDDLE demo。
你需要做的是PHP數組的JSON編碼字符串賦值給這樣一個JavaScript變量:
var my_data = <?php echo json_encode($php_array); ?>
這個變量my_data
會有像值:
var my_data = {
"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}
};
現在這個對象需要被結構化爲這種格式,以便高層圖可以用它作爲繪製圖的值的數據源。這是可以做到這樣的:
var data_array = [];
$.each(my_data, function(key, value){
var total_value = value.total;
delete value.total;//remove the attribute total
value.y = total_value;//add a new attribute "y" for plotting values on y-axis
data_array.push(value);
});
這data_array
後,將有結構一樣:
data_array = [
{"name":2011,"y":963,"drilldown":"true"},//note we have removed attribute "total" with "y"
{"name":2012,"y":1997,"drilldown":"true"},
{"name":2013,"y":1188,"drilldown":"true"}
];
現在這個data_array
可以作爲數據源被傳遞到圖表,同時初始化是這樣的:
// Create the chart
$('#container').highcharts({
....
.....
series: [{
name: 'Things',
colorByPoint: true,
data:data_array//put the data_array here
....
..
你就完成了!
下面是完整的代碼:
$(function() {
var data_array = [];
//assign the json encoded string of PHP array here like:
//var my_data = <?php echo json_encode($php_array); ?>
var my_data = {
"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}
};
$.each(my_data, function(key, value){
//console.log("key = "+key);
//console.log("value=");
//console.log(value);
var total_value = value.total;
delete value.total;//remove the attribute total
value.y = total_value;//add a new attribute "y" for plotting values on y-axis
data_array.push(value);
});
//console.log("data_array = ");
//console.log(data_array);
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function() {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data:data_array
}],
drilldown: {
series: []
}
})
});
感謝您的答覆,但我沒有得到結果.. – user3815568
感謝..我已經算起來現在.. =) – user3815568
很高興爲您服務!希望你得到你想要的東西! :) –