Изменение размера высоты с помощью Highcharts

У меня есть Highchart, который значительно изменяет размер ширины при изменении размера окна. Но не высота. Я попробовал этот набор размеров диаграммы, но он не работает proberly. Есть ли другой способ автоматического изменения высоты при изменении размера окна?

Это мой код css для вывода. У меня есть вкладка пользовательского интерфейса JQuery, другая вкладка отображает данные datatable

#output-container
{
float: right;
display: inline;
position: absolute;
right: 10px; 
left: 400px;
top:120px;
overflow-y: auto;
}

Это мой css для chartdiv:

#chartContainer{
margin: auto;
}

И это функция js Chart:

function qchart(){

    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chartContainer',
            type: 'column',
            spacingBottom: 3,
            //height: (screen.availHeight)-500,
            marginRight: 30,
            marginBottom: 30,
            reflow: true
        },
        //etc..
    };
    //...
}

Ответы

Ответ 1

Ответ Рикардо правильный: иногда вы можете оказаться в ситуации, когда контейнер просто не изменяет размер по мере необходимости, так как окно браузера меняет размер, тем самым не позволяя высочайшим параметрам изменять размер.

Это всегда работает:
1. Настройте прослушиватель событий с временным временем и конвейером. Пример с 500ms на jsFiddle
2. используйте chart.setSize(width, height, doAnimation = true); в своей фактической функции изменения размера, чтобы динамически устанавливать высоту и ширину
3. Задайте reflow: false в параметрах highcharts и, конечно же, задайте height и width явно при создании. Поскольку мы будем выполнять собственную обработку событий изменения размера, нет необходимости перехватывать Highcharts в другом.

Ответ 2

В соответствии со ссылкой на API:

By default the height is calculated from the offset height of the containing element. Defaults to null.

Таким образом, вы можете управлять им height в соответствии с родительским div с использованием события redraw, которое вызывается при изменении его размера.

Ссылки

Ответ 3

Вы должны явно указать высоту контейнера

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

fooobar.com/questions/199834/...

документация по высоким стандартам

Ответ 4

У меня была аналогичная проблема с высотой, за исключением того, что моя диаграмма находилась внутри модального всплывающего окна bootstrap, и я уже контролирую размер с помощью css. Однако по какой-то причине, когда окно было изменено горизонтально, высота контейнера диаграммы будет расширяться бесконечно. Если бы вы перетащили окно туда и обратно, оно будет расширяться вертикально бесконечно. Мне также не нравятся жестко-кодированные решения для высоты и ширины.

Итак, если вы делаете это в модальном, объедините это решение с событием изменения размера окна.

// from link
$('#ChartModal').on('show.bs.modal', function() {
    $('.chart-container').css('visibility', 'hidden');
});

$('#ChartModal').on('shown.bs.modal.', function() {
    $('.chart-container').css('visibility', 'initial');
    $('#chartbox').highcharts().reflow()
    //added
    ratio = $('.chart-container').width() / $('.chart-container').height();
});

В тех случаях, когда "отношение" становится отношением высоты/ширины, вы измените размер, когда мода загрузочного модального размера изменится. Это измерение принимается только при открытии модального режима. Я сохраняю соотношение как глобальное, но это, вероятно, не самая лучшая практика.

$(window).on('resize', function() {
    //chart-container is only visible when the modal is visible.
    if ( $('.chart-container').is(':visible') ) {
        $('#chartbox').highcharts().setSize( 
            $('.chart-container').width(),
            ($('.chart-container').width() / ratio),
            doAnimation = true );
    }       
});

Таким образом, вы можете перетащить экран в сторону (изменив его размер), и ваша диаграмма сохранит соотношение сторон.

Широкоэкранный

против меньшего

(все еще возится с единицами vw, поэтому все в спине слишком мало, чтобы читать LOL!)