← Highcharts 时间序列图表( 可缩放 ) Highcharts 半圈圆环图 →

Highcharts 向下钻取柱形图

下图是一个 Highcharts 向下钻取柱形图

配置

配置属性 drilldown 用于向下钻取数据，深入到其中的具体数据

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/modules/drilldown.js"></script> 
<script src="https://cdn.hcharts.cn/highcharts/modules/data.js"></script>
<script src="https://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%
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 = [];
      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: 'column'
};
var title = {
   text: '2013 年 11 月份 浏览器市场占有率'   
};    
var subtitle = {
   text: '点击条形图查看具体月份 Source: twle.cn.'
};
var xAxis = {
   type: 'category'      
};
var yAxis ={
   title: {
     text: '市场占有率百分比'
   }
};  
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.tooltip = tooltip;
options.credits = credits;
options.series = series;
options.drilldown = drilldown;
var chart = Highcharts.chart('container',options);

}});


</script>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 时间序列图表( 可缩放 ) Highcharts 半圈圆环图 →

Highcharts 向下钻取柱形图

配置

范例

学习 Hightcharts