对于highcharts图表组件来说，实现drill down 下钻图很简单，因为highcharts组件对其做了很好的封装操作。只需要在series内的data上面不断地嵌套drilldown，和实现根据是否钻取重绘highcharts图表即可。 1、定义一系列的参数以及初始化 <pre class='brush: csharp'>//定义一系列的参数以及初始化 var colors = Highcharts.getOptions().colors, categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], name = '主流浏览器', data = [{ y: 55.11, color: colors[0], //一级钻取 drilldown: { name: 'MSIE versions', categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], data: [{ y: 10.85, color: colors[0], //二级钻取 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年五月份各大主流浏览器的市场份额对比图' }, subtitle: { text: '点击每一根柱子查看详情 再次点击返回上层' }, xAxis: { categories: categories }, yAxis: { title: { text: '市场总份额' } }, credits: { text: 'highcharts的博客', href: 'http://www.stepday.com/myblog/?highcharts', position: { align: 'right', //水平居右 verticalAlign: 'bottom' //垂直底部 }, style: { cursor: 'pointer', //鼠标样式为手型 color: '#FF0000', //字体颜色 fontSize: '10px' //字体大小 } }, plotOptions: { column: { cursor: 'pointer', point: { events: { click: function () { //根据是否进入钻取的状态重绘不同的图表 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 + '% 市场份额</b><br/>'; if (point.drilldown) { s += '点击查看 ' + point.category + ' 详情'; } else { s += '点击返回上层'; } return s; } }, series: [{ name: name, data: data, color: 'white' }], exporting: { enabled: false } }); });</pre> 3、重绘图表的js方法 <pre class='brush: csharp'>//根据相关图表参数重绘highcharts图表 function setChart(name, categories, data, color) { //动态修改Categories chart.xAxis[0].setCategories(categories, false); //移除之前序列 如果有多个可以用for逐个移除 chart.series[0].remove(false); //添加新的序列 chart.addSeries({ name: name, data: data, color: color || 'white' }, false); //重绘图表 chart.redraw(); }</pre> **注意事项：** 1、在data内构建drilldown时需要格外地注意结构，N多层都是可以的。 2、在处理plotOptions内的click事件时需要根据下钻情况调用重绘js方法。 3、就是重绘图表的js方法编写。 关于下钻图的种种这里都写得很清楚了的，希望可以解决你问题，如果有疑问请随时留言一起讨论。