Графики Highcharts не изменяются правильно при изменении размера окна

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

Можно найти рабочий пример автоматической диаграммы изменения размера @http://jsfiddle.net/2gtpA/

Нерабочий пример, который я сделал для воспроизведения проблемы, можно увидеть @http://jsfiddle.net/4rrZw/2/

ПРИМЕЧАНИЕ: вам нужно несколько раз изменить размер кадра, чтобы воспроизвести проблему (меньше > больше > меньше).

Я думаю, все это лежит в том, как вы объявляете контейнеры... вставка кода HTML в качестве кода JS для графических карт, по-видимому, не имеет здесь значения... (то же самое в обоих примерах)

<table style="width:100%;">
  <tr>
    <td style="width:50%;">
        <div id="container" style="height: 50%"></div>
    </td>
    <td style="width:50%;"></td>
  </tr>
</table>

Ответы

Ответ 1

Я развернул вашу скрипту к рабочему решению @http://jsfiddle.net/AxyNp/ Самый важный фрагмент кода отсюда:

$(window).resize(function() {
    height = chart.height
    width = $("#chartRow").width() / 2
    chart.setSize(width, height, doAnimation = true);
});

Решение встречается на этом в сообщении SO.

Похоже, что лучше всего изменить размер контейнера (и ячейки) диаграммы, чтобы полагаться на свой собственный триггер изменения размера. Обратите внимание, что я установил reflow в "false" в параметрах диаграммы, чтобы удалить существующий триггер.

Ответ 2

Вы можете избежать использования javascript для выполнения изменения размера и полагаться на css вместо этого. Это может быть достигнуто путем рендеринга HighChart в div, который имеет:

position: absolute;
width: 100%;

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

position: relative;
width: 100%;
height: 400px;

Предоставляя HighChart в абсолютный элемент позиции, диаграмма будет реагировать на уменьшение ширины в родительском.

Ответ 3

/**
 * Adjust size for hidden charts
 * @param chart highcharts
 */
function adjustGraph(chart) {
    try {
        if (typeof (chart === 'undefined' || chart === null) && this instanceof jQuery) { // if no obj chart and the context is set
            this.find('.chart-container:visible').each(function () { // for only visible charts container in the curent context
                $container = $(this); // context container
                $container.find('div[id^="chart-"]').each(function () { // for only chart
                    $chart = $(this).highcharts(); // cast from JQuery to highcharts obj
                    $chart.setSize($container.width(), $chart.chartHeight, doAnimation = true); // adjust chart size with animation transition
                });
            });
        } else {
            chart.setSize($('.chart-container:visible').width(), chart.chartHeight, doAnimation = true); // if chart is set, adjust
        }
    } catch (err) {
        // do nothing
    }
}

Использование

$(window).resize(function () {
    if (this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function () {
        // resizeEnd call function with pass context body
        adjustGraph.call($('body'));
    }, 500);
});

Для вкладки начальной загрузки

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    isChart = $(this).attr('data-chart');
    var target = $(this).attr('href');
    if (isChart) {
        // call functio inside context target
        adjustGraph.call($(target));
    }
});


<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active">
         <a href="#anagrafica" data-toggle="tab"><h5>Anagrafica</h5></a>
    </li>
    <li><a href="#consumi" data-toggle="tab" data-chart="1"><h5>Consumi</h5></a></li>
</ul>

На диаграмме

    new Highcharts.Chart({
            chart: {
                renderTo: 'chart-bar',
                defaultSeriesType: 'column',
                zoomType: 'xy',
                backgroundColor: null,
                events: {
                    load: function (event) {
                        adjustGraph(this);
                    }
                }
            },

Код HTML

<div class="tab-pane" id="charts">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner chart-container">
                    <div class="active item">
                        <h3>Chart 1/h3>
                        <div id="bar-pod-annuale">
                           <div id="chart-bar" style="width:100%;margin: 0 auto"></div>
                        </div>
                    </div>
                    <div class="item">
                        <h3>Char 2</h3>
                        /** chart **/
                    </div>
                    <div class="item">
                        <h3>Char 3</h3>
                        /** chart **/
                    </div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

См. пример в jsfiddle

http://jsfiddle.net/davide_vallicella/LuxFd/2/