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

Question

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

Как я могу это сделать? Я попытался использовать обработчик событий Redraw.

Answer 1

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

Highcharts Docs:

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

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

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

Answer 2

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

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

См. Пример скрипки здесь.

Ссылка на API HighCharts: setSize ().

Answer 3

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

Answer 4

В качестве альтернативы, вы можете напрямую использовать окно JavaScript.

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

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

Где форма - это форма HTML на моей веб -странице, а GFX - графика Hightchart.

Answer 5

Еще один хороший вариант - передать ссылку на renderto html. Если это строка, используется элемент от этого идентификатора. В противном случае вы можете сделать:

chart: {
    renderTo: document.getElementById('container')
},

или с jQuery:

chart: {
    renderTo: $('#container')[0]
},

Дополнительную информацию можно найти здесь:https://api.highcharts.com/highstock/chart.renderto

Answer 6

При использовании процента, высота, которую он относится к ширине, и динамически изменится вместе с ним:

chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
},

JSFIDDLE HIGHTARTS с процентной высотой