<!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. undefined == false 么

    今天碰到个问题,我需要去判断 undefined == false 会返回什么,想当然的以为会返回true,但是结果却返回的是false,这我就有点晕了,不是说undefined.null.0.NaN ...

  2. flask 路由和视图

    路由设置的俩种方式 @app.route('/xxx') def index(): return 'index' ------------------------------------------ ...

  3. Python、Lua和Ruby三大语言脚本哪家强？

    这三种语言中的哪一种更合适你的项目?很大程度取决于你想达到什么样的目标.作为一书的结尾,在这一节里,我会描述一下它们各自的优点和不足.   Python的优点和不足 Python的优点如下: 1. P ...

  4. Spring 面试问题 TOP 50

    Spring 面试问题 TOP 50 Spring Framework 现在几乎已成为 Java Web 开发的标配框架.那么,作为 Java 程序员,你对 Spring 的主要技术点又掌握了多少呢? ...

  5. React-组件 & Props

    React元素可以只是DOM标签 const element = <div />; React元素也可以是用户自定义的组件: const element = <Welcome nam ...

  6. [Oracle]如何查看 10046 trace 中的 tim= ... 的具体时刻

    可以在  Linux 下,用下列方式: 如10046 trace 文件中如果有如下的内容:... tim = 1503032923 可以用 date 命令加 option 来看它的时刻: date - ...

  7. Codeforces 996E Leaving the Bar (随机化)

    题目连接:Leaving the Bar 题意:给你n个向量,你可以加这个向量或减这个向量,使得这些向量之和的长度小于1.5e6. 题解: 按照正常的贪心方法,最后的结果有可能大于1.5e6 .这里我 ...

  8. 利用Git工具将本地创建的项目上传到Github上

    前言 作为一个对前沿技术很看好的小青年,怎么能不会用Github呢?一年前我创建了Github,也知道git,但是尝试过用,但是就没弄明白,很多粉丝都问我Github的账号,想关注一波,无奈里面啥都没 ...

  9. 完整部署CentOS7.2+OpenStack+kvm 云平台环境（2）--云硬盘等后续配置

    继上一篇博客介绍了完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建,本篇继续讲述后续部分的内容 1 虚拟机相关1.1 虚拟机位置介绍 openstack上创建的 ...

  10. python基础学习笔记（六）

    学到这里已经很不耐烦了,前面的数据结构什么的看起来都挺好,但还是没法用它们做什么实际的事. 基本语句的更多用法 使用逗号输出 >>> print 'age:',25 age: 25 ...