Highcharts之3D柱狀圖
阿新 • • 發佈：2017-07-24
containe img charset pre mar tex -type 公司 css
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>
運行截圖：
Highcharts之3D柱狀圖