Javascript 懒洋洋的海图向下钻取

显示了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]
        ]
    }]
}

例如，如果单击“水果”列，将显示此数据

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

---

请注意，所有深入系列都必须提前创建。在这种特殊情况下，只有3个深入系列，所以这不是一个大问题。然而，在我的例子中，大约有30个深入系列，创建每个系列都需要执行一些查询。是否有一种方法可以让深入分析系列延迟加载，即只有在用户单击其中一列时才会请求深入分析系列数据？

对于这一级别的功能，我只需要自己创建它。使用

point.events。单击
回调进行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
    });
  }

这是一个可行的方法。
Highcharts支持惰性深入分析，尽管它使用术语“异步深入分析”


$（函数（）{
//创建图表
$（“#容器”）。高图({
图表：{
键入：“列”，
活动：{
向下展开：函数（e）{
如果（！e.系列选项）{
var图表=此，
深入调查={
“动物”：{
名称：“动物”，
数据：[
[Cows'，2]，
[‘绵羊’，3]
]
},
“水果”：{
名称：'水果'，
数据：[
[‘苹果’，5]，
[Oranges'，7]，
[‘香蕉’，2]
]
},
“汽车”：{
名称：“汽车”，
数据：[
[Toyota'，1]，
[Volkswagen'，2]，
[欧宝，5]
]
}
},
系列=钻取[e.point.name]；
//显示加载标签
showLoading（'simulationajax…'）；
setTimeout（函数（）{
chart.hideLoading（）；
图表.添加系列向下倾斜（e.点，系列）；
}, 1000);
}
}
}
},
标题：{
文本：“异步向下展开”
},
xAxis：{
类型：“类别”
},
图例：{
已启用：false
},
打印选项：{
系列：{
边框宽度：0，
数据标签：{
已启用：true
}
}
},
系列：[{
名称：'事物'，
colorByPoint：对，
数据：[{
名称：“动物”，
y:5，
深入调查：正确
}, {
名称：'水果'，
y:2，
深入调查：正确
}, {
名称：“汽车”，
y:4，
深入调查：正确
}]
}],
向下展开：{
系列：[]
}
});
});

非常令人印象深刻，为什么是Plunker而不是JSFIDLE？@Dónal，Plunker使ajax调用变得更容易。我也更喜欢它的布局。伙计，这是一个非常简单的解决方案。干得好@马克，直到我实施了你的建议之后，我才发现这一点：（问题是-如何进行深入分析：对你所有的观点都是正确的？没有深入分析是不可行的，我们不应该在后端设置它。