<!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. RF

    大家在日常工作中常常解除RF模块,RF的意思就是:radio frequency的意思,就是无线电波频率的意思. RF射频范围:300KHz-300GHz; 其中小于1000HZ以内的当然是低频: 大 ...

  2. ubuntu 下使用 jsoncpp库

    做项目的时候需要用c++解析json文件, 之前使用的是libjson 库, 但当g++ 开启 -std=c++11 选项时, 该库的很多功能不能用, 而且还有一些其他的问题, 不推荐使用. 后来采用 ...

  3. [05] Bean的作用域和生命周期

    1.Bean的作用域和初始化时间 之前我们稍微提到过,Spring中管理的Bean,默认都是单例模式,这意味着你多次获取某个对象,得到的都是相同的对象.单例作用域的显性写法是scope属性,如下,这和 ...

  4. TCP/IP与OSI模型

  5. openssl生成签名与验证签名

    继上一篇RSA对传输信息进行加密解密,再写个生成签名和验证签名. 一般,安全考虑,比如接入支付平台时,请求方和接收方要互相验证是否是你,就用签名来看. 签名方式一般两种,对称加密和非对称加密.对称加密 ...

  6. CF1028G Guess the Numbers 构造、记忆化搜索

    传送门 考虑如果我们当前可以询问\(x\)个数,还剩下\(q\)次询问机会,我们要怎么构造询问方式? 肯定会这么考虑: 找到一个尽可能大的\(P\)满足\([x,P]\)能在每一次能询问\(x\)个数 ...

  7. 【php增删改查实例】第十九节 - session的使用: 让服务器知道你是谁？

    因为HTTP请求是一种无状态的请求,所谓无状态,就是服务器不会记录下你本次请求的信息.http它是基于请求 - 相应模式的一种数据传输协议.就是说,你发送一个请求,我服务器给你一个响应,这件事情就算完 ...

  8. cp 命令有坑

    cp 是个很常用的命令, 基本语法为  cp -v  a   b  把文件a 复制为文件b(-v为显示做了什么,这是非常安全的做法,建议新手添加此参数) 参数说明: -a:此选项通常在复制目录时使用, ...

  9. 学习ML.NET(2): 使用模型进行预测

    训练模型 在上一篇文章中,我们已经通过LearningPipeline训练好了一个“鸢尾花瓣预测”模型, var model = pipeline.Train<IrisData, IrisPre ...

  10. 记一次拿webshell踩过的坑(如何用PHP编写一个不包含数字和字母的后门)

    0x01 前言 最近在做代码审计的工作中遇到了一个难题,题目描述如下: <?php include 'flag.php'; if(isset($_GET['code'])){ $code = $ ...