對(duì)于highcharts圖表組件來說，實(shí)現(xiàn)drill down 下鉆圖很簡單，因?yàn)閔ighcharts組件對(duì)其做了很好的封裝操作。只需要在series內(nèi)的data上面不斷地嵌套drilldown，和實(shí)現(xiàn)根據(jù)是否鉆取重繪highcharts圖表即可。 1、定義一系列的參數(shù)以及初始化 <pre class='brush: csharp'>//定義一系列的參數(shù)以及初始化 var colors = Highcharts.getOptions().colors, categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], name = '主流瀏覽器', data = [{ y: 55.11, color: colors[0], //一級(jí)鉆取 drilldown: { name: 'MSIE versions', categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], data: [{ y: 10.85, color: colors[0], //二級(jí)鉆取 drilldown: { name: 'MSIE 6.0', categories: ['MSIE 6.001', 'MSIE 7.001', 'MSIE 8.001', 'MSIE 9.001'], data:[2,3,6,7], color: colors[0] } }, 7.35, 33.06, 2.81], color: colors[0] } }, { y: 21.63, color: colors[1], drilldown: { name: 'Firefox versions', categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], data: [0.20, 0.83, 1.58, 13.12, 5.43], color: colors[1] } }, { y: 11.94, color: colors[2], drilldown: { name: 'Chrome versions', categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], color: colors[2] } }, { y: 7.15, color: colors[3], drilldown: { name: 'Safari versions', categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 'Safari 3.1', 'Safari 4.1'], data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], color: colors[3] } }, { y: 2.14, color: colors[4], drilldown: { name: 'Opera versions', categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], data: [0.12, 0.37, 1.65], color: colors[4] } }];</pre> 2、初始化圖表 <pre class='brush: csharp'> //初始化圖表 chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column' }, title: { text: '2012年五月份各大主流瀏覽器的市場(chǎng)份額對(duì)比圖' }, subtitle: { text: '點(diǎn)擊每一根柱子查看詳情 再次點(diǎn)擊返回上層' }, xAxis: { categories: categories }, yAxis: { title: { text: '市場(chǎng)總份額' } }, credits: { text: 'highcharts的博客', href: 'http://www.stepday.com/myblog/?highcharts', position: { align: 'right', //水平居右 verticalAlign: 'bottom' //垂直底部 }, style: { cursor: 'pointer', //鼠標(biāo)樣式為手型 color: '#FF0000', //字體顏色 fontSize: '10px' //字體大小 } }, plotOptions: { column: { cursor: 'pointer', point: { events: { click: function () { //根據(jù)是否進(jìn)入鉆取的狀態(tài)重繪不同的圖表 var drilldown = this.drilldown; if (drilldown) { // drill down setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); } else { // restore setChart(name, categories, data); } } } }, dataLabels: { enabled: true, color: colors[0], style: { fontWeight: 'bold' }, formatter: function () { return this.y + '%'; } } } }, tooltip: { formatter: function () { var point = this.point, s = this.x + ':<b>' + this.y + '% 市場(chǎng)份額</b><br/>'; if (point.drilldown) { s += '點(diǎn)擊查看 ' + point.category + ' 詳情'; } else { s += '點(diǎn)擊返回上層'; } return s; } }, series: [{ name: name, data: data, color: 'white' }], exporting: { enabled: false } }); });</pre> 3、重繪圖表的js方法 <pre class='brush: csharp'>//根據(jù)相關(guān)圖表參數(shù)重繪highcharts圖表 function setChart(name, categories, data, color) { //動(dòng)態(tài)修改Categories chart.xAxis[0].setCategories(categories, false); //移除之前序列 如果有多個(gè)可以用for逐個(gè)移除 chart.series[0].remove(false); //添加新的序列 chart.addSeries({ name: name, data: data, color: color || 'white' }, false); //重繪圖表 chart.redraw(); }</pre> **注意事項(xiàng)：** 1、在data內(nèi)構(gòu)建drilldown時(shí)需要格外地注意結(jié)構(gòu)，N多層都是可以的。 2、在處理plotOptions內(nèi)的click事件時(shí)需要根據(jù)下鉆情況調(diào)用重繪js方法。 3、就是重繪圖表的js方法編寫。 關(guān)于下鉆圖的種種這里都寫得很清楚了的，希望可以解決你問題，如果有疑問請(qǐng)隨時(shí)留言一起討論。