Highcharts 柱狀圖設定柱體偏移量使柱體緊靠在一起

旭東怪發表於2020-10-30

1 使用詳解

（1） plotOptions.column.grouping

說明：true代表對柱體進行分組並單獨顯示，false代表不分組則重疊在一起，預設為true。

（2）series.pointPlacement

說明：設定柱體偏移量。引數>0柱體向右偏移，反之柱體向左偏移。當兩個柱體的偏移量相同時，柱體會重疊在一起。

2 原始效果圖

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 最終效果圖

 

相關文章