Использование полной высоты в диаграмме пузырьков высоких диаграмм

Question

У меня проблема, когда я не могу использовать всю высоту участка участка. Я делаю диаграмму, которая будет иллюстрировать число людей, распространяемых по заданным категориям (от A до H). Размер пузырьков - это количество людей. См. http://jsfiddle.net/rnilsen/fXzke/8/. Размер пузырьков варьируется от 5 до 600, но, глядя на него, вы вряд ли сможете увидеть разницу в размерах.

Содержание div только 75px height. Однако, если я изменю его, например, 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] 
     ], 
    }] 
}); 

});

Answer 1

Возможно установить минимальный размер пузырька. По умолчанию установлено, что максимальный размер составляет 20% от высоты диаграммы. Вы можете изменить это в plotOptions, например .:

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

Примечание. Вы также можете установить максимальное число пикселей.