1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <title>Highcharts-3D柱状图举例</title>
7 <style type="text/css">
8 #container {
9 height: 400px;
10 min-width: 400px;
11 max-width: 1200px;
12 margin: 0 auto;
13 }
14 </style>
15 <script src="js/jquery-3.2.1.min.js"></script>
16 <script src="js/highcharts.js"></script>
17 <script src="js/highcharts-3d.js"></script>
18 </head>
19
20 <body>
21 <div id="container"></div>
22 <script language="JavaScript">
23 Highcharts.chart(‘container‘, {
24 chart: {
25 type: ‘column‘,
26 options3d: {
27 enabled: true,
28 alpha: 10, //俯瞰角度
29 beta: 10, //旋转角度
30 depth: 70 //景深
31 }
32 },
33 title: {
34 text: ‘<b>‘ + ‘2016年销售额统计表‘ + ‘</b>‘
35 },
36 subtitle: {
37 text: ‘来源：万得利公司‘
38 },
39 plotOptions: {
40 column: {
41 depth: 25, //柱状体的厚度
42 dataLabels: {
43 enabled: true, //柱状体上显示数额
44 }
45
46 },
47 },
48 xAxis: {
49 categories: Highcharts.getOptions().lang.shortMonths //月份缩写数组
50 },
51 yAxis: {
52 title: {
53 text: ‘万元(￥)‘
54 }
55 },
56 series: [{
57 name: ‘化妆品销售额‘,
58 data: [7, 3, 1, 4, 2, 5, 1, 4, 6, 3, 5, 7]
59 },
60 {
61 name: ‘保健品销售额‘,
62 data: [null, 1, 2, 8, 9, 5, 1, 6, 4, 5, 3, 6]
63 }
64 ]
65 });
66 </script>
67
68 </body>
69
70 </html>
运行截图：
时间： 2024-10-22 05:07:15