Highcharts with null values (null) and a 3D bar chart 0
The following example demonstrates with null values (null) and 3D bar chart zero.
In the previous section we already know Highcharts basic configuration syntax. Let's look at the other configurations.
Configuration
chart.options3d Configuration
Here are the basic configuration of 3D graph, set chart of the type attribute column, options3d option to set a three-dimensional effect.
var chart = { type: 'column', options3d: { enabled: true, //显示图表是否设置为3D, 我们将其设置为 true alpha: 15, //图表视图旋转角度 beta: 15, //图表视图旋转角度 depth: 50, //图表的合计深度,默认为100 viewDistance: 25 //定义图表的浏览长度 } };
Examples
File name: highcharts_3d_column_null.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-3d.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var chart = { type: 'column', margin: 75, options3d: { enabled: true, alpha: 10, beta: 25, depth: 70 } }; var title = { text: '带空值的 3D 图' }; var subtitle = { text: '注意 0 和 null 的区别' }; var xAxis = { categories: Highcharts.getOptions().lang.shortMonths }; var yAxis = { title: { text: null } }; var series= [{ name: 'Sales', data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.xAxis = xAxis; json.yAxis = yAxis; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
The above example output is: