案例:HighCharts案例     状态:可编辑再运行    进入竖版
 运行结果 
x
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
 
1
<html>
2
<head>
3
   <title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
4
   <script src="/js/jquery-2.1.4.min.js"></script>
5
   <script src="/js/hc/highcharts5.0.6.js"></script>  
6
   <script src="https://code.highcharts.com/modules/drilldown.js"></script>  
7
   <script src="https://code.highcharts.com/modules/data.js"></script> 
8
</head>
9
<body>
10
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
11
<script language="JavaScript">
12
$(document).ready(function() { 
13
 
14
   Highcharts.data({
15
      csv: document.getElementById('tsv').innerHTML,
16
      itemDelimiter: '\t',
17
      parsed: function (columns) {
18
         var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];
19
         
20
         // Parse percentage strings
21
         columns[1] = $.map(columns[1], function (value) {
22
            if (value.indexOf('%') === value.length - 1) {
23
               value = parseFloat(value);
24
            }
25
            return value;
26
         });
27
28
         $.each(columns[0], function (i, name) {
29
            var brand, version;
30
31
            if (i > 0) {
32
33
               // Remove special edition notes
34
               name = name.split(' -')[0];
35
36
               // Split into brand and version
37
               version = name.match(/([0-9]+[\.0-9x]*)/);
38
               if (version) {
39
                  version = version[0];
40
               }
41
               brand = name.replace(version, '');
42
43
               // Create the main data
44
               if (!brands[brand]) {
45
                  brands[brand] = columns[1][i];
46
               } else {
47
                  brands[brand] += columns[1][i];
48
               }