Highcharts 向下钻取饼图
以下实例演示了向下钻取饼图。
我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。
配置
drilldown 配置
drilldown 用于向下钻取数据，通过点击某项深入到其中的具体数据。
drilldown: { series: drilldownSeries }
实例
文件名：highcharts_pie_drilldown.htm
<html> <head> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/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.split(' -')[0]; // Split into brand and version version = name.match(/([0-9]+[\.0-9x]*)/); if (version) { version = version[0]; } brand = name.replace(version, ''); // Create the main data if (!brands[brand]) { brands[brand] = columns[1][i]; } else { brands[brand] += columns[1][i]; } // Create the version data if (version !== null) { if (!versions[brand]) { versions[brand] = []; } versions[brand].push(['v' + version, columns[1][i]]); } } }); $.each(brands, function (name, y) { brandsData.push({ name: name, y: y, drilldown: versions[name] ? name : null }); }); $.each(versions, function (key, value) { drilldownSeries.push({ name: key, id: key, data: value }); }); var chart = { type: 'pie' }; var title = { text: 'Browser market shares. November, 2013' }; var subtitle = { text: 'Click the slices to view versions. Source: netmarketshare.com.' }; var xAxis = { type: 'category' }; var yAxis ={ title: { text: 'Total percent market share' } }; var tooltip = { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' }; var credits = { enabled: false }; var series= [{ name: 'Brands', colorByPoint: true, data: brandsData }]; var drilldown= { series: drilldownSeries } var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.credits = credits; json.series = series; json.drilldown = drilldown; $('#container').highcharts(json); } }); }); </script> <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. --> <pre id="tsv" style="display:none"> Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%