如题第一层的highcharts图表为柱状图(也可为其他),点击后下钻,下钻出来的图形需为堆叠柱状图(一维的柱状图图表,自己已实现,需要多维的堆叠柱状图)。
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events:{
drilldown: function (e) {
if (!e.seriesOptions) {
var data = {
series: [{
stacking: 'normal',
type: 'column',
name: 'MSIE versions 2000',
data: [10, 7, 33, 2]
},{
stacking: 'normal',
type: 'column',
name: 'MSIE versions 2010',
data: [1, 5, 10, 15]
}]
};
chart.showLoading("加载中 ...");
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, data.series[0]);
//只能设置一条,直接设置data.series就不行了。
//chart.addSeriesAsDrilldown(e.point, data.series);
}, 1000);
}
}
}
},
title: {
text: '测试统计'
},
xAxis: {
type:'category'
},
yAxis: {
title: {
text: '数量'
}
},
credits:{//版权连接
enabled:false
},
series: [{name: '浏览器',data: [{
y: 55,
drilldown: true
}]},{name: '浏览器12',data: [{
y: 35,
drilldown: false
}]}
]
});
});
});
http://www.tuicool.com/articles/AfUj6bF
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
title: {
text: null
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: '新',
color: '#FF3300',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
},{
name: '循',
color: '#009900',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}
,{
name: '备',
color: '#FFFF33',
type: 'column',
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}],
xAxis: {
categories: [{
name: "2011年",
categories: ["一", "二", "三"]
}, {
name: "2012年",
categories: ["一", "二", "三"]
}, {
name: "2013年",
categories: ["一", "二", "三"]
}]
}
});
});