<!DOCTYPE>
<html lang='en'>
<head>
<title>1-Highcharts 3D图之普通3D柱状图与带空值</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<!--<script src="../Highcharts-4.2.5/js/themes/gray.js"></script>主题   -->

<script>
$(function () {
    $('#container').highcharts({
        chart:{
            type:'column',
            //边距是指图表的外边与图形区域之间的距离，数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
            margin:45,
            //3D图像设置项。3D效果需要引入highcharts-3d.js，下载或者在线路径为code.highcharts.com/highcharts-3d.js.
            options3d:{
                enabled:true,//画图表是否启用3D函数，默认值为：false
                alpha:10,//3D图旋转角度，此为α角，内旋角度默认为0
                beta:25,//3D图旋转角度，此为β角，外旋角度 默认为0
                //图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
                //默认是： 100
                depth:70
            }

        },
        /************标题***************/
        //标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。
        //主标图
        title: {
            text:'我的3D图'

        },
        //副标题
        subtitle: { 

        },

        //plotOptions用于设置图表中的数据点相关属性。
        plotOptions: {
            column:{
                depth:25
            }

        },

        /************坐标轴***************/
        //所有的图表除了饼图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧
        //（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调
        xAxis: {
            //获取月份的简称
            categories: Highcharts.getOptions().lang.shortMonths
        },
        yAxis: {
            //是否在正常显示的对立面显示轴。
            //正常是垂直坐标轴显示在左边，水平坐标轴显示在底部，因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部，这通常用于有两个或多个坐标轴。
            opposite: true
        },
        /*************版权信息**********************/
        credits:{
             enabled:false // 禁用版权信息
        },

        /*************数据提示框**********************/
        //tooltip: { valueSuffix: '°C' },
        tooltip: {

        },

        /************图例***************/
        //省略图例会在下面显示
        //也可以设置 设置在下方
        legend: {
            //layout: 'horizontal',//horizontal,vertical
            //align: 'center',
            //verticalAlign: 'bottom',
            //borderWidth: 0
            //enabled:false//关闭图例
        }, 

        /*****************数据列******************/

        series: [
            {
                name: 'Sales',
                data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
                //如果有个值为空的话，只需设为null
                //data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]

            }
        ]

    });
});
</script>

</head>

<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>

</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. delphi 基础之三 文件流操作

    文件流操作 Delphi操作流文件:什么是流?流,简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具.在流中,定义了一些处理数据的基本操作,如读取数据,写入数据等,程序员是对流进行所有操作的, ...

  2. angularjs2 学习笔记（三） 服务

    在anglar2中服务是什么? 如果在项目中有一段代码是很多组件都要使用的,那么最好的方式就是把它做成服务. 服务是一种在组件中共享功能的机制,当我们使用标签将多个组件组合在一起时我们需要操作一些数据 ...

  3. Swing基础

    Swing基础 JFrame JPanel 绘图:paint 监听事件: ActionListener  KeyListener Listener和Adapter 计时器:Timer     Time ...

  4. 第一篇代码 嗨翻C语言 21点扑克

    /* *  计算牌面点数的程序. *  使用“拉斯难加斯公开许可证”. *  学院21点扑克游戏小组. */#include <stdio.h>#include <stdlib.h& ...

  5. Java入门到精通——开篇

    本系列博客大体框架构思了一段时间了,本系列博客包含了对现有知识的总结也有对未来知识的展望.        本系列博客包括七大部分如下: 第一部分  Java基础应用 讲述JAVA的基础从以下几方面讲述 ...

  6. 菜鸟学习Struts——bean标签库

    一.Struts标签库. Struts实际上包含了4个标签库:bean,logic,html,tiles bean:用来在属性范围中定义或取得属性的,同时可以读取资源文件信息 logic:替代JSTL ...

  7. hdu 3836 Equivalent Sets

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=3836 Equivalent Sets Description To prove two sets A ...

  8. Block 块

    代码块本质上是和其他变量类似.不同的是,代码块存储的数据是一个函数体.使用代码块是,你可以像调用其他标准函数一样,传入参数数,并得到返回值. 脱字符(^)是块的语法标记.按照我们熟悉的参数语法规约所定 ...

  9. com.Goods.ForEach

    com.Goods.ForEach(g => { g.TransactionPrice = getUnitPriceByProductId(g.ProductID); g.ExpressMone ...

  10. 自己编写基于MVC的轻量级PHP框架

    做WEB开发已有三年,每次都写重复的东西, 因此,想自己写一下框架,以后开发方便.本人之前asp.NET一年开发,jsp半年,可是后来因为工作的原故换成PHP.其实很不喜欢PHP的语法.还有PHP的函 ...