案例：HighCharts案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
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
<script src="https://cdn.bootcss.com/highcharts/5.0.10/highcharts-3d.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: 'column',
15
      marginTop: 80,
16
      marginRight: 40,
17
      options3d: {
18
         enabled: true,
19
         alpha: 15,
20
         beta: 15,
21
         viewDistance: 25,
22
         depth: 40
23
      }
24
   };
25
   var title = {
26
      text: '水果总消费量，按类别分组'
27
   };
28
   var xAxis = {
29
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
30
   };
31
   var yAxis = {
32
      allowDecimals: false,
33
      min: 0,
34
      title: {
35
         text: '水果数量'
36
      }
37
   };
38
​
39
   var tooltip = {
40
      headerFormat: '<b>{point.key}</b><br>',
41
      pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
42
   };
43
​
44
   var plotOptions = {
45
      column: {
46
         stacking: 'normal',
47
         depth: 40
48
      }