This JSFiddle demo显示了Highcharts明细的示例.单击图表中的某列时,系列将替换为与单击的列对应的向下钻取系列
drilldown: {
series: [{
id: 'animals',data: [
['Cats',4],['Dogs',2],['Cows',1],['Sheep',['Pigs',1]
]
},{
id: 'fruits',data: [
['Apples',['Oranges',2]
]
},{
id: 'cars',data: [
['Toyota',['Opel',['Volkswagen',2]
]
}]
}
例如,如果单击fruits列,将显示此数据
data: [
['Apples',2]
]
请注意,必须预先创建所有向下钻取系列.在这种特殊情况下,只有3个向下钻系列,所以这不是一个大问题.但是,在我的情况下,大约有30个向下钻取系列,并且创建每个系列需要执行一些查询.有没有办法让钻取系列延迟加载,即仅在用户点击其中一列时请求钻取系列数据？
解决方法
对于这个级别的功能,我会继续自己创建它.使用point.events.click回调进行ajax调用并替换系列：
plotOptions: {
series: {
point: {
events: {
click: function(event) {
var chart = this.series.chart;
var name = this.name;
$.ajax({
url: name + ".json",success: function(data) {
swapSeries(chart,name,data);
},dataType: "json"
});
}
}
}
}
},
swapSeries在哪里：
function swapSeries(chart,data) {
chart.series[0].remove();
chart.addSeries({
data: data,name: name,colorByPoint: true
});
}
这是一个工作example.