如何在堆叠条形图的轴标签之间创建更多的间隙



我已经在这个JSFiddle中重现了我的问题:http://jsfiddle.net/FYs3q/

我放在柱状图左侧的类别是动态的,并放在类别列表中:

xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Orangesa', 'Pearsa',
'Grapesa', 'Bananasa', 'Orangess', 'Pearss', 'Grapess', 'Bananass', 'Orangesd', 'Pearsd',
'Grapesd', 'Bananasd', 'Orangesf', 'Pearsf', 'Grapesf', 'Bananasf', 'Orangesg', 'Pearsg',
'Grapesg', 'Bananasg', 'Orangesr', 'Pearsr', 'Grapesr', 'Bananasr', 'Orangese', 'Pearse',
'Grapese', 'Bananase', 'Orangesw', 'Pearsw', 'Grapesw', 'Bananasw', 'Orangesq', 'Pearsq',
'Grapesq', 'Bananasq', 'Orangesy', 'Pearsy', 'Grapesy', 'Bananasy', 'Orangesu', 'Pearsu',
'Grapesu', 'Bananasu', 'Orangesi', 'Pearsi', 'Grapesi', 'Bananasi']
} 

当它们达到一定的数量时,它们就会开始相互挤压,最终它们会迷路。理想情况下,条形图的高度会越来越大,而不是这些标签相互挤压。

如果我使图表足够大来处理所有类别,问题就会消失,但感觉应该有一种方法来设置这些标签上的填充量,大小将动态计算出来,但我已经通过了整个API,并没有一个适合我的设置。

没有一个内置的方法来根据元素的数量动态地增加图表的大小。

在大多数情况下,我处理这个服务器端。我建立了一个"基础高度"来考虑顶部和底部的边距。然后定义一个乘数,设置为每个元素所需的高度。

然后我计算我的数据数组,乘以乘数,并添加基数,并将其作为包含图表的div的高度。

你当然可以很容易地在javascript中处理这个问题,在建立数据之后,在调用图表之前修改包含元素的高度。

Working example:

  • http://jsfiddle.net/jlbriggs/9AWsX/

最新更新