2013-03-27 54 views
0

我有一个问题,我无法利用剧情区域的整个高度。我正在制作一张图表来说明在特定类别(A到H)上传播的人数。气泡的大小代表了人数。见http://jsfiddle.net/rnilsen/fXzke/8/。气泡的大小差别很大,从5到600,但看着它时,几乎看不出尺寸的差异。在高图气泡图中利用全高

内容div只有75px高度。但是,如果我将其更改为例如300px,你会立即看到一个区别。我希望气泡看起来与我将其更改为300像素时相同,但使用较低的图表以适合一个小空间。

我该如何实现这一点,基本上使用所有可用的高度?

这里是我用图表:

$(function() { 
window.chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     zoomType: 'x', 
     marginBottom: 25, 
     marginTop: 0, 
     plotBorderColor: 'red', 
     plotBorderWidth: 1, 
     spacingTop: 0, 
     spacingBottom: 0, 
    }, 

    credits : { 
     enabled : false 
    }, 

    exporting: { 
     enabled: false 
    }, 

    title: null, 

    xAxis: { 
     lineWidth: 0, 
     lineColor: 'transparent', 
     labels: { 
      enabled: true 
     }, 
     categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'], 
    }, 

    yAxis: { 
     lineColor: 'transparent', 
     labels: { 
      enabled: false 
     }, 
     title: { text: null }, 
    }, 

    plotOptions: { 
     lineWidth: 0 
    }, 

    legend: { 
     enabled: false 
    }, 

    series: [ 
    { 
     type: 'bubble', 
     lineWidth: 0, 

     data: [ 
      [0, 0, 5], 
      [1, 0, 10], 
      [2, 0, 200], 
      [3, 0, 600], 
      [4, 0, 20], 
      [null,null,null], 
      [6, 0, 500], 
      [7, 0, 400] 
     ], 
    }] 
}); 

});

回答

2

可以选择设置最小/最大气泡大小。默认值是最大尺寸是图表高度的20%。您可以在plotOptions例如: - 改变这种

plotOptions: { 
     lineWidth: 0, 
     bubble: { 
       minSize:2, 
       maxSize:"50%" 
     } 
    }, 

请注意,您还可以设置为最大像素数。

+0

优秀的,你真的让我的一天! – Rob 2013-03-27 15:36:06