最近做的一个需求是这样的,大类图表柱状图列出来,点击柱状图列出对应子类柱状图,后点击子类的柱状图后跳转到一个新页面列出两个饼状图
我是这么实现的:(部分代码demo,饼状图页面为detailChart.html,随便找了个例子顶替)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- <script src="js/jquery-3.1.1.min.js"></script> -->
<script src="js/highcharts.js"></script>
<script src="js/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'bar',//纵型柱状图,column为横向柱状图
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
id:'Animalsid',
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
id:'Fruitsid',
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
id:'Carsid',
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
},
events:{
click:function(e){//点击事件
if(e.point.drilldown!=true){//如果不等于true表明是钻取到了最低层的图表
window.location.href='detailChart.html';
}
}
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
</script>
结果图: