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

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 最终效果图

 

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页