Highcharts图表之3D柱状图（可以传空值）-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Highcharts 实例 | web建站教程(ipkd.cn)</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/highcharts.js"></script>
    <script src="/js/highcharts-3d.js"></script>
</head>
<body>
    <div id="myChart" width='100%' height='450'></div>
    <script type="text/javascript">
       $(document).ready(function() {  
           var chart = {      
              type: 'column',
              margin: 75,
              options3d: {
                 enabled: true,
                 alpha: 10,
                 beta: 25,
                 depth: 70
              }
           };
           var title = {
              text: 'Highcharts图表之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;   
           $('#myChart').highcharts(json);
        });
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：