<!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. arduino:int & double 转string 适合12864下使用

    转自:http://www.geek-workshop.com/forum.php?mod=viewthread&tid=3383&highlight=12864 很多人在玩的时候,都 ...

  2. Zookeeper-相关流程

    选主流程: 当Zk进入恢复模式时,需要重新选举出一个新的leader,让所有的Server都恢复到一个正确的状态.Zk的选举算法有两种:一种是基于basic paxos实现的,一种是基于fast pa ...

  3. Nginx URL后面不加斜杠301重定向

    今天开发碰到一个问题,其实之前就有这个问题,但是一直都没去关注,今天测试碰到了就解决一下. 问题情况: 当我请求 http://admindev.jingruiauto.com/store/views ...

  4. PCB之PASTE助焊层和SOLDER阻焊层

    1.PASTE为焊接层,用于SMT贴片元件的焊接,对应的图形为钢网(钢网上的小孔): 2.SOLDER为阻焊层,它代表的是绿油的涂抹区域,且为负片输出(负片输出指的是图形以外的区域为有效区域): PA ...

  5. IntelliJ IDEA下自动生成Hibernate映射文件以及实体类

    来自:https://blog.csdn.net/chenyunqiang/article/details/81026823 1.构建项目并添加项目结构配置以及配置初始参数 1.1.如图将基本的架子搭 ...

  6. C# 大型电商项目性能优化（一）

    经过几个月的忙碌,我厂最近的电商平台项目终于上线,期间遇到的问题以及解决方案,也可以拿来和大家多做交流了. 我厂的项目大多采用C#.net,使用逐渐发展并流行起来的EF(Entity Framewor ...

  7. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. Aop笔记

    参考: https://blog.csdn.net/bombSKLK/article/details/79143145 示例 拦截的 注解的方法 @Around("@annotation(c ...

  9. 分布式监控系统Zabbix--完整安装记录 -添加web页面监控

    通过zabbix做web监控,不仅仅可以监控到站点的响应时间,还可以根据站点返回的状态码或响应时间做报警设置,比如说对某个url进行监控,当访问返回的状态码是非200状态时都报警(创建触发器即可).下 ...

  10. MFS+Keepalived双机高可用热备方案操作记录

    基于MFS的单点及手动备份的缺陷,考虑将其与Keepalived相结合以提高可用性.在Centos下MooseFS(MFS)分布式存储共享环境部署记录这篇文档部署环境的基础上,只需要做如下改动: 1) ...