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

Question

我使用的是 HighCharts 4.0.4，我有一个带有自定义图例的图表:

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

CSS 看起来像这样。 wrapper 是一个表格，因此我可以在图例中使用 table-cell vertical-align: middle。我想要 wrapper 宽度的 50%。

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

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

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

#chart {
  width: 100%;
}

问题是，我创建了一个 JSFiddle here ，如果输出/结果窗口很小，“运行”代码，我看到 50%:50%。调整输出窗口大小并使其变大，一切正常，50%:50% 没问题，但缩小输出窗口，图表无法正确调整大小。

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

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

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

Answer 1

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

尝试将 position:absolute 添加到您的图表 css 属性

#chart 的新 css 看起来像这样:

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

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

Check my Fiddle

注意:我删除了所有调整大小的 Javascript

---

跟进:

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

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

我认为这更符合您使用动画而不是 CSS 的 Highchart setSize 方法的需要)

Fiddle