案例：HighCharts案例     状态：可编辑再运行    进入竖版
 运行结果　
AخA
 
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/highcharts-more.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
   var chart = {
14
      type: 'arearange',
15
      zoomType: 'x'
16
   };
17
   var title = {
18
      text: 'Temperature variation by day'
19
   };
20
   var xAxis = {
21
      type: 'datetime'
22
   };
23
   var yAxis = {
24
      title: {
25
         text: null
26
      }
27
   };
28
   var tooltip = {
29
       shared: true,
30
     crosshairs: true,
31
       valueSuffix: '\xB0C'
32
   };
33
   var legend = {
34
       enabled: false
35
   }
36
37
   var json = {};
38
   json.chart = chart;
39
   json.title = title;
40
   json.xAxis = xAxis;
41
   json.yAxis = yAxis;
42
   json.legend = legend;
43
44
   $.getJSON('//www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {
45
      var series= [{
46
         name: 'Temperatures',
47
         data: data
48
         }