Highcharts 实现重叠柱状图

￡神魔★判官ぃ 2023-10-05 12:17 54阅读 0赞

#### 1 使用详解 ####

**plotOptions.column.grouping**

说明：true代表对柱体进行分组并单独显示，false代表不分组则重叠在一起，默认为true。

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 实现代码 ####

<body>
        <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script language="JavaScript">
            $(function(){
    			$('#container').highcharts({
                    chart: {
                        renderTo: 'container',
          				type: 'column'
                    },
                    credits : {
                        enabled:false//不显示highCharts版权信息
                    },
                    xAxis: {
                        categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
                    },	 
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
    						grouping:false//柱体重叠
                        }
                    }, 
                    series: [{
                            name: 'series1',
                            data: [10,10,10,10,10]
                        },{
                            name:'series2',
                            data:[3,5,7,2,1]
                        }]
                 });
    		});	
        </script>
    </body>

#### 4 最终效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201023203224702.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201023203250518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70