Highcharts 堆疊組柱形圖

Highcharts 柱形圖Highcharts 柱形圖

以下實例演示了堆疊組柱形圖。

我們在前面的章節(jié)已經(jīng)了解了 Highcharts 基本配置語法。接下來讓我們來看下其他的配置。在 drilldown 中添加 series 屬性：

配置

drilldown：向下鉆取

drilldown 用于向下鉆取數(shù)據(jù)，深入到其中的具體數(shù)據(jù)。 

drilldown: {
   series: drilldownSeries
}

實例

文件名：highcharts_column_drilldown.htm

<html>
<head>
<title>Highcharts 教程 | W3Cschool教程(w3cschool.cn)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" rel="external nofollow" ></script>
   <script src="http://code.highcharts.com/highcharts.js" rel="external nofollow" ></script>  
   <script src="http://code.highcharts.com/modules/drilldown.js" rel="external nofollow" ></script>  
   <script src="http://code.highcharts.com/modules/data.js" rel="external nofollow" ></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: 'column'
         };
         var title = {
            text: '2013 年 11 月份 瀏覽器市場占有率'   
         };    
         var subtitle = {
            text: '點擊條形圖查看具體月份 Source: w3cschool.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 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>
<!-- 去掉 pre 前面的空格 -->
< 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><!-- 去掉 pre 前面的空格 -->
</body>
</html>

嘗試一下 ?

以上實例輸出結果為：

Highcharts 柱形圖Highcharts 柱形圖