Highcharts - как иметь диаграмму с динамической высотой?

Я хочу иметь диаграмму, которая изменяет размер с помощью окна браузера, но проблема в том, что высота фиксирована на 400 пикселей. Этот пример JSFiddle имеет ту же проблему.

Как я могу это сделать? Я попытался использовать обработчик события chart.events.redraw для изменения размера диаграммы (используя .setSize), но я думаю, что он запускает бесконечный цикл (обработчик события срабатывания, который вызывает setSize, который запускает другой обработчик событий и т.д.).

Ответы

Ответ 1

Просто не устанавливайте свойство height в HighCharts, и он будет обрабатывать его динамически для вас, пока вы устанавливаете высоту на диаграмме, содержащей элемент. Это может быть фиксированное число или даже процент, если позиция является абсолютной.

Высококачественные документы:

По умолчанию высота вычисляется по высоте смещения содержащий элемент

Пример: http://jsfiddle.net/wkkAd/149/

#container {
    height:100%;
    width:100%;
    position:absolute;
}

Ответ 2

Что делать, если вы подключили событие изменения размера окна:

$(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    );   
});

Смотрите пример скрипта здесь.

Справочник по API Highcharts: setSize().

Ответ 3

Удалить высоту будет исправлять вашу проблему, потому что highchart реагирует на дизайн, если вы отрегулируете свой экран, он также изменит размер.

Ответ 4

Кроме того, вы можете напрямую использовать javascript window.onresize

В качестве примера, мой код (с использованием scriptaculos):

window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

Где форма html-формы на моей веб-странице и gfx графическая карта высокой четкости.