案例: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="https://code.highcharts.com/highcharts.js"></script>
7
<script src="https://code.highcharts.com/highcharts-more.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
   var chart = {
14
      type: 'bubble',
15
      zoomType: 'xy'
16
   };
17
   var title = {
18
      text: 'Highcharts Bubbles'   
19
   };   
20
   var series= [{
21
            data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
22
        }, {
23
            data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
24
        }, {
25
            data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
26
      }
27
   ];     
28
      
29
   var json = {};   
30
   json.chart = chart; 
31
   json.title = title;     
32
   json.series = series;   
33
   $('#container').highcharts(json);
34
  
35
});
36
</script>
37
</body>
38
</html>