Highcharts栏:xAxis的高度

时间:2013-07-26 07:55:04

标签: highcharts height

在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
        }
    },

2 个答案:

答案 0 :(得分:0)

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

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

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

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

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

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

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

Fiddle

答案 1 :(得分:0)

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

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

 groupPadding:0,
 pointPadding:0,

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

http://jsfiddle.net/eEHFH/