案例: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 title = {
13
      text: 'Combination chart'   
14
   };
15
   var xAxis = {
16
      categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
17
   };
18
   var labels = {
19
      items: [{
20
         html: '水果消费',
21
            style: {
22
               left: '50px',
23
               top: '18px',
24
               color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
25
            }
26
      }]
27
   };
28
   var series= [{
29
        type: 'column',
30
            name: 'Jane',
31
            data: [3, 2, 1, 3, 4]
32
        }, {
33
            type: 'column',
34
            name: 'John',
35
            data: [2, 3, 5, 7, 6]
36
        }, {
37
            type: 'column',
38
            name: 'Joe',
39
            data: [4, 3, 3, 9, 0]
40
        }, {
41
            type: 'spline',
42
            name: 'Average',
43
            data: [3, 2.67, 3, 6.33, 3.33],
44
            marker: {
45
                lineWidth: 2,
46
                lineColor: Highcharts.getOptions().colors[3],
47
                fillColor: 'white'
48
            }