首页 | 简单教程,简单编程

代码编辑器：

<!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 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>

代码编辑器：

运行结果：