案例:HighCharts案例     状态:可编辑再运行    进入竖版
 运行结果 
AخA
 
1
<html>
2
<head>
3
<meta charset="UTF-8" />
4
<title>Highcharts 教程 | W3xue教程(w3xue.com)</title>
5
<script src="/js/jquery-2.1.4.min.js"></script>
6
<script src="/js/hc/highcharts5.0.6.js"></script>
7
</head>
8
<body>
9
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
10
<script language="JavaScript">
11
$(document).ready(function() {  
12
   var colors = Highcharts.getOptions().colors;
13
   var categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'];
14
   var data = [{
15
            y: 55.11,
16
            color: colors[0],
17
            drilldown: {
18
                name: 'MSIE versions',
19
                categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
20
                data: [10.85, 7.35, 33.06, 2.81],
21
                color: colors[0]
22
            }
23
        }, {
24
            y: 21.63,
25
            color: colors[1],
26
            drilldown: {
27
                name: 'Firefox versions',
28
                categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
29
                data: [0.20, 0.83, 1.58, 13.12, 5.43],
30
                color: colors[1]
31
            }
32
        }, {
33
            y: 11.94,
34
            color: colors[2],
35
            drilldown: {
36
                name: 'Chrome versions',
37
                categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
38
                    'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
39
                data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
40
                color: colors[2]
41
            }
42
        }, {
43
            y: 7.15,
44
            color: colors[3],
45
            drilldown: {
46
                name: 'Safari versions',
47
                categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
48
                    'Safari 3.1', 'Safari 4.1'],