<!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. matlab slice

    前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...

  2. Python基础（5）——函数

    函数 定义 #函数定义 def calc(x,y): res = x**y return res #返回函数执行结果 calc() #调用函数 关键参数 正常情况下,给函数传参数要按顺序,不想按顺序就 ...

  3. IDEA 创建和使用tomcat

    一.创建一个普通web项目,步骤略,如下图. 二.配置项目相关信息. 1.通过如下方式在Artifacts下添加我们的项目. 2.选中我们的项目. 3.修改项目的默认输出位置,可根据需要修改. 4.如 ...

  4. 源码分享篇：使用Python进行QQ批量登录

    直接上源码 1 #coding=utf-8 2 __author__ = 'Eagle' 3 import os 4 import time 5 import win32gui 6 import wi ...

  5. ASP.NET Core MVC中URL和数据模型的匹配

    Http GET方法 首先我们来看看GET方法的Http请求,URL参数和ASP.NET Core MVC中Controller的Action方法参数匹配情况. 我定义一个UserController ...

  6. WPF loading遮罩层 LoadingMask

    原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...

  7. Luogu P2473 [SCOI2008]奖励关

    比较恶心的概率(期望)+状压DP,想正推2H的我瑟瑟发抖 由于数据范围不大,因此我们可以直接状压每个宝物取或不取的情况,设\(f_{i,j}\)表示前\(i\)轮且宝物是否取过的状态为\(j\)时的方 ...

  8. 基于HTML5 Canvas的工控SCADA模拟飞机飞行

    昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想如果能用 HT 开飞机那就是真的有趣了, ...

  9. CSS 外边距

    CSS 外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”. 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. ##### ...

  10. Apache之Rewrite和RewriteRule规则梳理以及http强转https的配置总结

    一. 简单实例介绍一般来说,apache配置好http和https后,如果想要做http强转到https,需要设置url重定向规则,大致需要下面几个步骤即可完成配置: 1)在httpd.conf文件里 ...