【发布时间】：2016-04-01 22:00:29
【问题描述】：
我正在尝试生成一个 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 中看到的那样，第二和第三部门确实得到了下钻结果，但这仅显示了一个系列。我需要展示多个系列，一个用于所选部门内的每个部门。
【问题讨论】：
-
所以您想从一个点向下钻取到多个系列？看到这个：stackoverflow.com/questions/35939222/…
-
这几乎就是我想要的。唯一不同的是，确实有多个系列，但只有1个类别。你有类似的东西，例如每月的数字吗？
-
所以，如果您点击一个点，您需要点击的系列（部门）的多个系列（部门），并且在点击类别时，您需要像所有系列一样向下钻取？
-
如果是，那么这里有一个例子 - jsfiddle.net/pk544oad
-
完美！正是我的意思:)
标签： javascript highcharts