Question

在xAxis上包含许多条目的条形图。但它们彼此太接近了。示例：http://jsfiddle.net/XUsCq/

    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania', 'Oceania'],
        title: {
            text: null
        }
    },

Answer 1

数据过于密集。改变你的容器div：

<div id="container" style="min-width: 400px; margin: 0 auto; height: 800px"></div>

您可以将dataLabels的样式更改为：

plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true,
                        style: {
                             fontSize: "8px"
                         }
                    }
                }
            }

但如果你有很多数据，那就不会解决问题。

最佳选择是根据您显示的元素数量调整容器大小。

这是一个激励你的小提琴链接：

Fiddle

Answer 2

您的基本问题是您有太多数据无法容纳可用空间。

有一些highcharts选项可以提供帮助：plotOptions中的groupPadding和pointPadding

 groupPadding:0,
 pointPadding:0,

但是，你可以做的最好的事情是通过在包含div上设置更大的高度来使图表更高一些：

http://jsfiddle.net/eEHFH/

Highcharts栏：xAxis的高度

2 个答案: