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.
