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

最新推荐文章于 2022-08-20 17:50:49 发布

旭东怪

最新推荐文章于 2022-08-20 17:50:49 发布

阅读量1.4k

点赞数

分类专栏：图表库

本文链接：https://blog.csdn.net/qq_38974638/article/details/109394255

版权

图表库专栏收录该内容

65 篇文章 36 订阅

订阅专栏

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

旭东怪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Highcharts 柱状图设置柱体偏移量使柱体紧靠在一起

1 使用详解（1）plotOptions.column.grouping说明：true代表对柱体进行分组并单独显示，false代表不分组则重叠在一起，默认为true。（2）series.pointPlacement说明：设置柱体偏移量。参数>0柱体向右偏移，反之柱体向左偏移。当两个柱体的偏移量相同时，柱体会重叠在一起。2 原始效果图3 实现代码<body> <div id="container" style="width: 550px; hei..
复制链接

扫一扫