<!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>Highcharts-3D柱状图举例</title>

         <style type="text/css">

             #container {

                 height: 400px;

                 min-width: 400px;

                 max-width: 1200px;

                 margin: 0 auto;

             }

         </style>

         <script src="js/jquery-3.2.1.min.js"></script>

         <script src="js/highcharts.js"></script>

         <script src="js/highcharts-3d.js"></script>

     </head>

     <body>

         <div id="container"></div>

         <script language="JavaScript">

             Highcharts.chart('container', {

                 chart: {

                     type: 'column',

                     options3d: {

                         enabled: true,

                         alpha: 10, //俯瞰角度

                         beta: 10, //旋转角度

                         depth: 70 //景深

                     }

                 },

                 title: {

                     text: '<b>' + '2016年销售额统计表' + '</b>'

                 },

                 subtitle: {

                     text: '来源：万得利公司'

                 },

                 plotOptions: {

                     column: {

                           depth: 25, //柱状体的厚度

                         dataLabels: {

                             enabled: true,    //柱状体上显示数额

                         }

                     },

                 },

                 xAxis: {

                     categories: Highcharts.getOptions().lang.shortMonths //月份缩写数组

                 },

                 yAxis: {

                     title: {

                         text: '万元(￥)'

                     }

                 },

                 series: [{

                         name: '化妆品销售额',

                         data: [7, 3, 1, 4, 2, 5, 1, 4, 6, 3, 5, 7]

                     },

                     {

                         name: '保健品销售额',

                         data: [null, 1, 2, 8, 9, 5, 1, 6, 4, 5, 3, 6]

                     }

                 ]

             });

         </script>

     </body>

 </html>

运行截图：

Highcharts之3D柱状图的更多相关文章

  1. 3-Highcharts 3D图之3D柱状图分组叠堆3D图

    <!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</ ...

  2. 2-Highcharts 3D图之3D柱状图带可调试倾斜角度

    <!DOCTYPE> <html lang='en'> <head> <title>2-Highcharts 3D图之3D柱状图带可调试倾斜角度< ...

  3. 1-Highcharts 3D图之普通3D柱状图与带空值

    <!DOCTYPE> <html lang='en'> <head> <title>1-Highcharts 3D图之普通3D柱状图与带空值</t ...

  4. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. WPF用SkewTransform画3D柱状图

    WPF用SkewTransform画3D柱状图 SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/l ...

  6. extjs+amcharts生成3D柱状图和数据表格使用总结

    废话不多说,使用extjs+amcharts创建3d柱状图和数据表实例,如下: 1.首先定义一个数据模型 Ext.define("cacheHijack", { extend : ...

  7. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  8. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  9. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. OpenGL ES SL 3.0规范中以前的attribute改成了in varying改成了out

           OpenGL ES和OpenGL的图标 关于“OpenGL ES SL 3.0规范中以前的attribute改成了in varying改成了out”这个问题,做一阐述: 1.关键字的小修 ...

  2. C++ 实现strcpy

    strcpy库函数的原型: // 把src字符串拷贝到dest,并返回dest char *strcpy(char *dest, const char *src) 注意点: 1.形参src用const ...

  3. 【SPOJ GSS】数据结构题选做

    SPOJ GSS1 题意:给一个序列以及一些询问,每个是问\([l,r]\)中最大连续子序列和是多少. 思路:这个问题是以下问题的基础. 我们考虑用线段树来解决这个问题. 首先我们来想想如果要求出最大 ...

  4. Linux　读取 (*.xls)文件读取，使用libxls库

    首先下载libxls,项目地址:http://sourceforge.net/projects/libxls/,备用下载:libxls-1.4.0.zip 解压后使用: ./configure --p ...

  5. Zephyr的Logging

    1 前言 刚接触Zephyr,两眼一抹黑,光是阅读代码对系统没什么概念.还需要通过一些日志了解系统的运行机制,以及各种内核行为. 这就需要借助系统的Logging,大体分为两部分System Logg ...

  6. tmux 复制粘贴

    tmux版本(tmux 2.3): $tmux -V 要想让tmux和系统剪贴板之间互相复制粘贴,在linux中需要先安装 xclip: sudo apt-get install xclip 然后在 ...

  7. BZOJ2125 最短路 圆方树、倍增

    传送门 对仙人掌建立圆方树,然后对边定权 对于圆点和圆点之间的边,是原来仙人掌上的桥,边权保持不变 对于圆点和方点之间的边,将圆方树看做以一个圆点为根的有根树之后,一个方点的父亲一定是一个圆点.对于这 ...

  8. angularjs的$window功能小练习

    我们想在一个文本框输入一些文字,然后点击铵钮,alert()出来. <div ng-app="alertApp" ng-controller="alertContr ...

  9. HDU3062&&HDU1814

    Preface 两道2-SAT模板题. HDU3062 看题目就一眼2-SAT.一对夫妻看成一个变量,之间的矛盾可以看成限制. 考虑不同席的限制,相当于选了\(i\)就不选\(j\),即必选\(j'\ ...

  10. 【php增删改查实例】第十一节 - 部门管理模块（编辑功能）

    9. 编辑部门功能的实现 思路:只允许用户勾选一条数据,点击编辑按钮,会跳出一个和新增数据类似的对话框.然后,用户可以修改部门名称和部门编码.点击保存按钮,提示修改成功. 9.1 前台代码编写 < ...