<!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. ASCII码详解

    ASCII码详解 ASCII码表 ASCII码大致可以分作三部分組成.第一部分是:ASCII非打印控制字符: 第二部分是:ASCII打印字符: 第三部分是:扩展ASCII打印字符. 第一部分:ASCI ...

  2. Show or Hide Menu List via ng-show

    <div ng-app ng-controller='MenuController'> <ul ng-show='menuState_show'> <li>Stun ...

  3. Unicode字符以16进制表示

    int(x [,base ])         将x转换为一个整数 long(x [,base ])        将x转换为一个长整数 float(x )               将x转换到一个 ...

  4. 转换framebuffer实现安卓截图

    编译出了RECOVERY肯定需要截图分享的啦,可是又不能通过DDMS截图~ 那就只好通过提取手机的fb0文件来实现截图. 首先你需要ADB~ 嗯,这个都没有的话你就别看下去了... 还需要ffmpeg ...

  5. openSUSE13.1安装时要注意的问题(未完待续)

    1.最好用官方给的imageWriter来写镜像,不要用UltraISO来写镜像,会导致安装Kaffein包错误(:)可能也会有别的错误),后来我用imageWriter写了之后就没有在安装时报错了

  6. Transact-SQL 语句

    当流程控制语句必须执行一个包含两条或两条以上Transact-SQL语句块时,可以使用BEGIN...END语句进行控制 use testDB; go declare @name varchar() ...

  7. [转]KDE/QT与GNOME/GTK比较

    [转]KDE/QT与GNOME/GTK比较 http://www.cnblogs.com/itech/archive/2009/08/18/1548964.html 虽然在商业方面存在竞争,GNOME ...

  8. sp.ui.rte.js参数错误

    出现这个错误的原因是,在新建页面我用spd隐藏了两行不需要的填写的控件. 去掉这两个隐藏属性就可以了.

  9. 个人软件过程(psp)需求文档

    1.  业务需求 1.1 应用背景 开发软件项目进度计划总是那么不准确,延期经常出现,跟可恨的是甚至无法给出一个相对比较明确的延迟时间.很大 因素在于分配给开发人员的完成时间与开发人员的实际完成时间有 ...

  10. MDI窗体 的再度思考

    早在敲学生管理系统的时候,青山师哥就跟我说过  MDI 窗体 跟 子窗体的事情,当时只是简单的查询.小小的用了一下,没有太在意. 当再次面对着这个东西更深层的时候才想起师哥那句话.“好好研究一下这个东 ...