Highcharts 向下钻取饼图

 

配置

drilldown 配置

drilldown 用于向下钻取数据，通过点击某项深入到其中的具体数据。

drilldown: {
   series: drilldownSeries }

实例

文件名：highcharts_pie_drilldown.htm

<html>
<head>
<meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/drilldown.js"></script> <script src="http://code.highcharts.com/modules/data.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { Highcharts.data({ csv: document.getElementById('tsv').innerHTML, itemDelimiter: '\t', parsed: function (columns) { var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];          // Parse percentage strings columns[1] = $.map(columns[1], function (value) { if (value.indexOf('%') === value.length - 1) { value = parseFloat(value); } return value; }); $.each(columns[0], function (i, name) { var brand, version; if (i > 0) { // Remove special edition notes name = name