Highcharts：图表无法通过缩小屏幕来正确调整大小

我正在使用 HighCharts 4.0.4，并且我有一个带有自定义图例的图表，如下所示：

<div class="wrapper">
    <div class="element">
        <div id="chart"></div>
    </div>
    <div class="legend">
        Legend
    </div>
</div>

The CSS看起来像这样。这wrapper是一个表格，这样我就可以在图例中使用table-cell a vertical-align: middle。我想同时拥有 50% 的宽度wrapper.

.wrapper {
  display: table;
  width: 100%;
}

.element {
  display: table-cell;
  width: 50%;
}

.legend {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}

#chart {
  width: 100%;
}

问题是，我创建了一个 JSFiddlehere http://jsfiddle.net/L9gubqvy/3/，如果输出/结果窗口很小，“运行”代码，我会看到 50%:50%。调整输出窗口大小并使其变大，一切都好，50%:50% 没问题，但是使输出窗口变小，图表无法正确调整大小。

我看到了一些解决方案$(window).resize();。就我而言，我尝试使用outerHeight，但只有当我增大屏幕尺寸时，这些值才会改变。所以我发现这个解决方案有效：

$('#chart').highcharts().setSize(
  $(".wrapper").width() / 2, $('#chart').highcharts().height, doAnimation = true
);

但是否还有一种不需要使用 JavaScript，只需要使用 HTML 和 CSS 的解决方案呢？

这应该只需完成CSS...没有调整大小功能。

尝试添加position:absolute到你的图表 CSS 属性

The new css for #chart看起来像这样：

#chart {
    display: table-cell;
    position:absolute;
    width:50%;
}

我想这就是你想要的效果。

检查我的小提琴 http://jsfiddle.net/dalper01/0xmf9h6d

note:我删除了所有调整大小的内容JavaScript

跟进：

如果您需要在使用动画调整窗口大小时调整 Highcharts 的大小，可以使用此语法来完成。

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

我认为这更符合您使用 Highchart 的需求setSize用动画代替的方法CSS)

Fiddle http://jsfiddle.net/5vmvkahc