我正在尝试生成一个Highcharts柱形图，该图表最初显示了我们公司所有部门每年每个月的IT成本（欧元）。
每个部门都需要点击，这可以深入到该部门的所有部门;一年中的每个月都会再次出现。
我在以下JSFiddle中添加了我的最新试用版，其中第一级可以使用，但第二级没有：
http://jsfiddle.net/r8h1etua/5/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Costs ( € )'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} k</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Infra',
data: [
{ y: 49.9, drilldown: 'Div1' },
{ y: 71.59, drilldown: 'Div1' },
{ y: 106.4, drilldown: 'Div1' },
{ y: 129.2, drilldown: 'Div1' },
{ y: 144.0, drilldown: 'Div1' },
{ y: 176.0, drilldown: 'Div1' },
{ y: 135.69, drilldown: 'Div1' },
{ y: 148.5, drilldown: 'Div1' },
{ y: 216.4, drilldown: 'Div1' },
{ y: 194.1, drilldown: 'Div1' },
{ y: 95.6, drilldown: 'Div1' },
{ y: 54.4, drilldown: 'Div1' }
]
}, {
name: 'Industry North',
data: [
{ y: 83.6, drilldown: 'Div2' },
{ y: 78.8, drilldown: 'Div2' },
{ y: 98.5, drilldown: 'Div2' },
{ y: 93.4, drilldown: 'Div2' },
{ y: 106.0, drilldown: 'Div2' },
{ y: 84.5, drilldown: 'Div2' },
{ y: 105.0, drilldown: 'Div2' },
{ y: 104.3, drilldown: 'Div2' },
{ y: 91.2, drilldown: 'Div2' },
{ y: 83.5, drilldown: 'Div2' },
{ y: 106.6, drilldown: 'Div2' },
{ y: 92.3, drilldown: 'Div2' }
]
}, {
name: 'Industry South',
data: [
{ y: 48.9, drilldown: 'Div3' },
{ y: 38.8, drilldown: 'Div3' },
{ y: 39.3, drilldown: 'Div3' },
{ y: 41.4, drilldown: 'Div3' },
{ y: 47.0, drilldown: 'Div3' },
{ y: 48.3, drilldown: 'Div3' },
{ y: 59.0, drilldown: 'Div3' },
{ y: 59.6, drilldown: 'Div3' },
{ y: 65.2, drilldown: 'Div3' },
{ y: 65.2, drilldown: 'Div3' },
{ y: 59.3, drilldown: 'Div3' },
{ y: 51.2, drilldown: 'Div3' }
]
}],
drilldown: {
series: [{
name: 'Infra',
id: 'Div1',
series: [{
name: '1',
data: [
{ y: 49.9, name: '1' },
{ y: 71.59, name: '1' },
{ y: 106.4, name: '1' },
{ y: 129.2, name: '1' },
{ y: 144.0, name: '1' },
{ y: 176.0, name: '1' },
{ y: 135.69, name: '1' },
{ y: 148.5, name: '1' },
{ y: 216.4, name: '1' },
{ y: 194.1, name: '1' },
{ y: 95.6, name: '1' },
{ y: 54.4, name: '1' }
]
}, {
name: '2',
data: [
{ y: 83.6, name: '2' },
{ y: 78.8, name: '2' },
{ y: 98.5, name: '2' },
{ y: 93.4, name: '2' },
{ y: 106.0, name: '2' },
{ y: 84.5, name: '2' },
{ y: 105.0, name: '2' },
{ y: 104.3, name: '2' },
{ y: 91.2, name: '2' },
{ y: 83.5, name: '2' },
{ y: 106.6, name: '2' },
{ y: 92.3, name: '2' }
]
}, {
name: '3',
data: [
{ y: 48.9, name: '3' },
{ y: 38.8, name: '3' },
{ y: 39.3, name: '3' },
{ y: 41.4, name: '3' },
{ y: 47.0, name: '3' },
{ y: 48.3, name: '3' },
{ y: 59.0, name: '3' },
{ y: 59.6, name: '3' },
{ y: 65.2, name: '3' },
{ y: 65.2, name: '3' },
{ y: 59.3, name: '3' },
{ y: 51.2, name: '3' }
]
}]
}, {
name: 'Industry North',
id: 'Div2',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Industry South',
id: 'Div3',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}]
}
});
});
提前致谢。
正如你在jsfiddle中看到的那样，第二和第三部门确实得到了一个向下钻取结果，但这只显示了一个系列。我需要展示多个系列，一个用于所选部门的每个部门。
答案 0 :(得分：5)
此处已经解释了从单个点向下钻取多个系列：Single series drilldown to multiple series Highcharts
这里的主要挑战是深入分类，每个点都有多个系列。为此，我们检查图表的向下钻取事件中事件函数的第一个参数是否将属性点定义为数组（向下钻取到类别中）而不是将其设置为false（向下钻取到某个点时） 。
$('#container').highcharts({
chart: {
events: {
drilldown: function(e) {
...
if (e.points === false) {
... //single point drilldown
} else {
... //or category drilldown and e.points is array of clicked category's points
}
...
接下来，像以前一样加载所有点的所有系列，最后加载chart.addSingleSeriesAsDrilldown(point, series);和chart.applyDrilldown();。