<!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. DTD 知识归纳总结

    一:在xml文件中引用一个dtd规则. <!DOCTYPE 根元素 [元素声明]> 二: xml文档中中包含的内容模块 元素:元素是 XML 以及 HTML 文档的主要构建模块. 属性:属 ...

  2. ajaxFileUpload增加附加参数

    直接说方法: $.ajaxFileUpload({ data:{"a":123,"b":456};//附加参数,json格式 }); 然后在ajaxFileUp ...

  3. vc++ 内存连续读写操作

    //初始化内存 int *data=(int*)malloc(sizeof(int)*4); ZeroMemory(data, sizeof(int)*4); int *m=(int*)malloc( ...

  4. DevExpress 使用 XtraTabbedMdiManager 控件以 Tab样式加载 Mdi窗体并合并 RibbonControl 解决方案

    最近刚接触到 DevExpress 13.1 这个皮肤组件, 觉得相当好用 于是开始准备搭建 个小应用的主体框架. 找了好久的就是没找到对应的文章来讲解这一块.. 翻了他们主网站上人家问的,以及API ...

  5. 数据结构学习笔记05图 (邻接矩阵 邻接表-->BFS DFS、最短路径)

    数据结构之图 图(Graph) 包含 一组顶点:通常用V (Vertex) 表示顶点集合 一组边:通常用E (Edge) 表示边的集合 边是顶点对:(v, w) ∈E ,其中v, w ∈ V 有向边& ...

  6. 实战Django：官方实例Part5

    俗话说,人非圣贤,孰能无过.在堆代码的过程中,即便是老攻城狮,也会写下一些错误的内容.俗话又说,过而能改,善莫大焉.要改,首先要知道哪里存在错误,这便是我们要对投票应用进行测试的原因.   21.撰写 ...

  7. python分片

    刚刚学习,很新 >>> numbers = [1,2,3,4,5,6,7,8,9,10] >>> numbers[0:10:2] [1,3,5,7,9] >& ...

  8. ORACLE 单实例完全卸载数据库

    1.用oracle用户登录如果要再次安装, 最好先做一些备份工作.包括用户的登录脚本,数据库自动启动关闭的脚本,和Listener自动启动的脚本.要是有可能连创建数据库的脚本也保存下来 2.使用SQL ...

  9. CSS3中新出现的技术

    CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...

  10. Java日期处理类的lenient属性

    这个特性很坑爹:@Test public void test() throws ParseException { SimpleDateFormat df = new SimpleDateFormat( ...