我正在尝试生成一个 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 中看到的那样，第二和第三部门确实获得了向下钻取结果，但只显示了一个系列赛。我需要展示多个系列，一个用于所选部门内的每个部门。
最佳答案
这里已经解释了从一个点向下钻取到多个系列: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();。
关于javascript - Highcharts 多系列向下钻取到多个系列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36354584/