Highcharts之3D柱状图
Posted 星瑞的随笔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Highcharts之3D柱状图相关的知识，希望对你有一定的参考价值。
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柱状图的主要内容，如果未能解决你的问题，请参考以下文章