Изменение размера Highchart

Question

Каков рекомендуемый способ изменения размера Highchart, встроенного в HTML-страницу?

Я установил <div>, который содержит диаграмму (chart.options.renderTo) (и сам блок Highcharts) на style.resize="both", но, похоже, это не так (подозреваю, потому что URL Highchart находится вв правом нижнем углу графика).В частности, я ищу рекомендуемый кий пользовательского интерфейса.

Предложения?

Answer 1

Вам нужно установить тот же padding на контейнере диаграммы, чтобы увидеть resize.Если размеры контейнера диаграммы изменились, вам нужно вызвать метод chart.reflow:

CSS:

#container {
    width: 400px;
    height: 400px;
    background: #e2eaad;
    margin: 0 auto;
    resize: both;
    padding: 10px;
}

JS:

var chart = Highcharts.chart('container', {
    series: [{
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }]
});

document.getElementById('container').addEventListener("click", function() {
    chart.reflow();
});

Демонстрационная версия: http://jsfiddle.net/BlackLabel/pnq8w6tr/

API: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow