1. <!DOCTYPE>
  2. <html lang='en'>
  3. <head>
  4. <title>1-Highcharts 3D图之普通3D柱状图与带空值</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8">
  6. <script src="../jquery-2.1.4/jquery.min.js"></script>
  7. <script src="../Highcharts-4.2.5/js/highcharts.js"></script>
  8. <script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
  9. <!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主题   -->
  10.  
  11. <script>
  12. $(function () {
  13.     $('#container').highcharts({
  14.         chart:{
  15.             type:'column',
  16.             //边距是指图表的外边与图形区域之间的距离，数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
  17.             margin:45,
  18.             //3D图像设置项。3D效果需要引入highcharts-3d.js，下载或者在线路径为code.highcharts.com/highcharts-3d.js.
  19.             options3d:{
  20.                 enabled:true,//画图表是否启用3D函数，默认值为：false
  21.                 alpha:10,//3D图旋转角度，此为α角，内旋角度默认为0
  22.                 beta:25,//3D图旋转角度，此为β角，外旋角度 默认为0
  23.                 //图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
  24.                 //默认是： 100
  25.                 depth:70
  26.             }
  27.  
  28.         },
  29.         /************标题***************/
  30.         //标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
  31.         //主标图
  32.         title: {
  33.             text:'我的3D图'
  34.  
  35.         },
  36.         //副标题
  37.         subtitle: { 
  38.  
  39.         },
  40.  
  41.         //plotOptions用于设置图表中的数据点相关属性。
  42.         plotOptions: {
  43.             column:{
  44.                 depth:25
  45.             }
  46.  
  47.         },
  48.  
  49.         /************坐标轴***************/
  50.         //所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
  51.         //（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
  52.         xAxis: {
  53.             //获取月份的简称
  54.             categories: Highcharts.getOptions().lang.shortMonths
  55.         },
  56.         yAxis: {
  57.             //是否在正常显示的对立面显示轴。
  58.             //正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
  59.             opposite: true
  60.         },
  61.         /*************版权信息**********************/
  62.         credits:{
  63.              enabled:false // 禁用版权信息
  64.         },
  65.  
  66.         /*************数据提示框**********************/
  67.         //tooltip: { valueSuffix: '°C' },
  68.         tooltip: {
  69.  
  70.         },
  71.  
  72.         /************图例***************/
  73.         //省略图例会在下面显示
  74.         //也可以设置 设置在下方
  75.         legend: {
  76.             //layout: 'horizontal',//horizontal,vertical
  77.             //align: 'center',
  78.             //verticalAlign: 'bottom',
  79.             //borderWidth: 0
  80.             //enabled:false//关闭图例
  81.         }, 
  82.  
  83.         /*****************数据列******************/
  84.  
  85.         series: [
  86.             {
  87.                 name: 'Sales',
  88.                 data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
  89.                 //如果有个值为空的话，只需设为null
  90.                 //data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]
  91.  
  92.             }
  93.         ]
  94.  
  95.     });
  96. });
  97. </script>
  98.  
  99. </head>
  100.  
  101. <body>
  102. <div id="container" style="min-width:700px;height:400px"></div>
  103. </body>
  104.  
  105. </html>

1-Highcharts 3D图之普通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. Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)

    Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一,可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了可 ...

  4. 4-Highcharts 3D图之3D普通饼图

    <!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts 3D图之3D普通饼图</title& ...

  5. css盒子模型层级3D图

    作为前端开发工程师,大家都应该知道盒子模型.下面用一张图来表达3D盒子模型的层级关系 大家可以看到background-color 在background-image的下一层.这个希望对大家有帮助

  6. 自制裸眼3D图【推荐】

    Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...

  7. 用ChemDraw画3D图的方法

    在绘制化学图形的时候,很多的用户都会发现很多的图形都是三维的,这个时候就需要找一款能够绘制3D图形的化学绘图软件.ChemOffice 15.1是最新的化学绘图工具套件,总共有三个组件,其中ChemD ...

  8. 物联网3D，物业基础设施3D运维，使用webgl(three.js)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课

    写在前面的废话: 很久没有更新文章了,这段时间一直忙于项目落地,虽然很忙,但是感觉没有总结,没有提炼的日子,总是让人感觉飘飘忽忽的. 所幸放下一些事,抽出一些时间,把近期的项目做一些整理与记录.也算是 ...

  9. 使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

    前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...

随机推荐

  1. CSS3常用功能的写法

    随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法. 以下就是 ...

  2. php验证手机号码

    大家都应该有这个常识,中国的手机号码都是以数字“1”开头,然后利用“0~9”10个数字组成的11位数字组合,那么我们的验证规则肯定要根据这个思路来写. 根据上面的简单思路,我们便可以写下以下的验证代码 ...

  3. Keil（MDK-ARM）使用教程（三）_在线调试

    Ⅰ.概述 该文章总结Keil(MDK-ARM)在线调试相关的内容,详情请往下看. 该文章是基于新建好软件工程来讲述,关于Keil的下载.安装和新建工程我已将在前面做了详细的总结,不懂的可以参看我博客里 ...

  4. jQuery两句话实现HTML转义与反转义

    $('<div>').text('<a>').html() 结果:<a> $('<div>').html('<a>').text() 结果: ...

  5. DIV指令一般用法

    本文最初发表于2015-8-14,是由别的地方迁移过来的 (本文所讲为无符号运算) DIV指令是8086汇编中的除法运算指令,它的结果不是浮点数,而是两个整数:商和余数. 我们来看王爽老师是怎么讲的: ...

  6. [转]判断程序是否运行在 Windows x64 系统下

    以下功能代码判断是否运行在 Windows x64 下.本例使用 Windows API 函数 IsWow64Process,具体请参考MSDN文档:http://msdn.microsoft.com ...

  7. oracle11g rman验证备份有效性

    RMAN> restore validate controlfile; Starting restore at 21-NOV-13using target database control fi ...

  8. nginx 配置 ThinkPHP Rewrite

    server { listen 80; server_name www.funsion.com; root /www/web/funsion; index index.php; location / ...

  9. linux中fork（）函数详解

    一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同, ...

  10. penmount串口触摸屏加载

    static irqreturn_t pm_interrupt(struct serio *serio,  unsigned char data, unsigned int flags){ struc ...