修复列之间的空间并在Highcharts上对齐标签 [英] Fix space between columns and align labels on Highcharts

问题描述

我正在创建一个柱形图，但是我发现柱形之间的空间太大，我想减小它们之间的空间. xAxis上的标签也未对齐.

I am creating a column chart but I see too much space between the columns and I want to reduce the space between them. The labels on the xAxis are also not aligning.

这是我的小提琴: https://jsfiddle.net/q3atxr4c/1/.

我添加了pointPadding，borderWidth和groupPadding.这些都不起作用.

I added pointPadding, borderWidth and groupPadding. None of these are working.

我是否可以减少列之间的空间?

Is there a way for me to reduce space between the columns?

所有值也都显示在我的网页上(导航正常工作)，但是不在小提琴上，所以这就是为什么我的div很大.

Also all the values show up on my webpage (with navigation working) but are not on the fiddle so thats why I have a large div.

我希望能够调整列的距离并在xAxis上为它们对齐标签.请帮忙！

I want to be able to adjust the distance the columns and align the labels on the xAxis for them. Please help!

推荐答案

只要设置了pointWidth，pointPadding和groupPadding选项将不起作用.至于xAxis的标签，它们正确对齐，因为它们在特定类别的所有点的中心.您看不到它们，因为它们有0个值.您可以删除0的点或将grouping属性设置为false.

The pointPadding and groupPadding options won't work as long as the pointWidth is set, which takes precedence. As for the xAxis' labels, they are aligned correctly because they are in the center of all points of a specific category. You can't see them as they have 0 values. You can either remove 0's points or set grouping property to false.

API参考:
https://api.highcharts.com/highcharts/series.column.pointWidth https://api.highcharts.com/highcharts/series.column.grouping

API Reference:
https://api.highcharts.com/highcharts/series.column.pointWidth https://api.highcharts.com/highcharts/series.column.grouping

示例:
https://jsfiddle.net/BlackLabel/zsnju2xm/-使用pointPadding和groupPadding所有点均可见
https://jsfiddle.net/BlackLabel/kzrunfv0/-使用grouping

Examples:
https://jsfiddle.net/BlackLabel/zsnju2xm/ - using pointPadding and groupPadding with all points visible
https://jsfiddle.net/BlackLabel/kzrunfv0/ - using grouping

这篇关于修复列之间的空间并在Highcharts上对齐标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！