1-Highcharts 3D图之普通3D柱状图与带空值

<!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-Highcharts 3D图之普通3D柱状图与带空值

上一篇:Hibernate HQL和原生SQL查询的一点区别


下一篇:关于GC和析构函数的一个趣题