Highcharts图表不能正确地调整窗口大小。

I have 2 side-by-side charts on my page, and would like to have them resized when window is resized: their container is set to 50% width, which, according to examples, should be enough.

我的页面上有两个并排的图表，并且希望在窗口大小调整时调整它们的大小:它们的容器设置为50%的宽度，根据示例，这应该足够了。

A working example of automatically resizing chart can be found @ http://jsfiddle.net/2gtpA/

可以在http://jsfiddle.net/2gtpA/上找到自动调整大小图表的工作示例。

A non-working example I did to reproduce the issue can be seen @ http://jsfiddle.net/4rrZw/2/

我做了一个非工作的例子来重现这个问题，可以看到@ http://jsfiddle.net/4rrZw/2/。

NOTE: you have to resize the frame several times to reproduce the issue (smaller>bigger>smaller should do)

注意:您必须多次调整帧的大小来重现这个问题(小>大>更小应该做)

I think it all lies in the way you declare containers... pasting the HTML code as the JS code for highcharts doesn't seem to be relevant here... (same in both examples)

我认为这一切都在于你申报集装箱的方式……将HTML代码粘贴到highcharts的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>

3 个解决方案

#1

I forked your fiddle to a working solution @ http://jsfiddle.net/AxyNp/ The most important code snippet from there is this:

我把你的小提琴交给了一个工作解决方案@ http://jsfiddle.net/AxyNp/最重要的代码片段是这样的:

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

The solution bears on this SO post's answer.

答案就在这里，所以post的答案。

It seems like the best you can do to resize the chart's container (and cell) properly is to rely on your own resize trigger. Note that I set the reflow to "false" in the chart's options to remove the existing trigger.

似乎最好的办法是调整图表的容器(和单元格)的大小，以依赖于您自己的调整触发器。注意，我在图表的选项中设置了回流到“false”，以删除现有触发器。

#2

You can avoid using javascript to perform the resize and rely on css instead. This can be accomplished by rendering the HighChart into a div that has:

您可以避免使用javascript来执行大小调整和依赖css。这可以通过将HighChart绘制成一个div来实现:

position: absolute;
width: 100%;

To make sure that the height of the container is appropriate, you'll have to wrap this absolutely positioned element in another element that has explicitly set height:

为了确保容器的高度是合适的，您必须在另一个显式设置高度的元素中包装这个绝对定位的元素:

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

By rendering the HighChart into a position absolute element, the chart will be responsive to width reductions in the parent.

通过将海图绘制成一个位置绝对元素，该图表将对父节点的宽度减少做出响应。

#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
    }
}

Usage

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

For bootstrap tab

$('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>

On chart

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

Html code

<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> 

See example on jsfiddle

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

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