标签：
<!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>
标签：
原文地址：http://www.cnblogs.com/jianyeLee/p/5645310.html
