Highcharts 柱状图设置柱体偏移量使柱体紧靠在一起

系统管理员 2023-10-05 12:53 61阅读 0赞

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

（1） plotOptions.column.grouping

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

（2）series.pointPlacement

说明：设置柱体偏移量。参数>0柱体向右偏移，反之柱体向左偏移。当两个柱体的偏移量相同时，柱体会重叠在一起。

#### 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],
    						pointPlacement: -0.1
                        },{
                            name:'series2',
                            data:[3,5,7,2,1],
    						pointPlacement: 0.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/20201030221922930.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/20201030222114285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70