Highcharts 向下钻取饼图

下图是一个 Highcharts 向下钻取饼图

配置

配置属性 rilldown 用于向下钻取数据，通过点击某项深入到其中的具体数据

drilldown: {
   series: drilldownSeries
}

范例

下面的代码列出了 Highcharts 向下钻取饼图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script> 
<script src="https://cdn.hcharts.cn/highcharts/modules/data.js"></script> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<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%
</pre>
<script>
Highcharts.data({
   csv: document.getElementById('tsv').innerHTML,
   itemDelimiter: ',',
   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 options = {};

      options.chart = chart;
      options.title = title;
      options.subtitle = subtitle;
      options.xAxis = xAxis;
      options.yAxis = yAxis;
      options.series = series;
      options.tooltip = tooltip;
      options.drilldown = drilldown;
      options.credits = credits;

      Highcharts.chart('container',options);
  }
});

</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 时间间隔图表 Highcharts 热点图 →

Highcharts 向下钻取饼图

配置

范例

学习 Hightcharts