最近做的一个需求是这样的，大类图表柱状图列出来，点击柱状图列出对应子类柱状图，后点击子类的柱状图后跳转到一个新页面列出两个饼状图
我是这么实现的：（部分代码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 labelchart.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>
