javascript - 懒惰的 Highcharts 向下钻取

Question

This JSFiddle demo显示 Highcharts 向下钻取的示例。当您单击图表中的其中一列时，该系列将替换为与所单击的列相对应的向下钻取系列

drilldown: {
    series: [{
        id: 'animals',
        data: [
            ['Cats', 4],
            ['Dogs', 2],
            ['Cows', 1],
            ['Sheep', 2],
            ['Pigs', 1]
        ]
    }, {
        id: 'fruits',
        data: [
            ['Apples', 4],
            ['Oranges', 2]
        ]
    }, {
        id: 'cars',
        data: [
            ['Toyota', 4],
            ['Opel', 2],
            ['Volkswagen', 2]
        ]
    }]
}

比如点击fruits栏，就会显示这个数据

data: [
    ['Apples', 4],
    ['Oranges', 2]
]

请注意，必须预先创建所有向下钻取系列。在这种特殊情况下，只有 3 个向下钻取系列，所以这不是什么大问题。但是，就我而言，大约有 30 个向下钻取系列，创建每个向下钻取系列都需要执行一些查询。有没有办法让向下钻取系列延迟加载，即向下钻取系列数据仅在用户单击其中一列时请求？

Answer 1

对于那种级别的功能，我会继续自己创建它。使用 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, name, data) {
    chart.series[0].remove();
    chart.addSeries({
      data: data,
      name: name,
      colorByPoint: true
    });
  }

这是一个有效的 example .