Highcharts宽度流出父div

Question

我正在尝试创建一个仪表板，我希望在其中使用highcharts 制作图表，并在row 中使用一个操作框，然后在column 中的操作框中使用两个按钮。我希望操作框包装内容和图表以占用剩余空间。但我没有得到预期的结果。 chart 比 parent div 占用更多宽度，即 container。这是我的 HTML 代码。

<md-content flex layout-padding>
    <md-card layout="row" layout-wrap>
        <div flex layout-padding>
            <highchart id="summary-chart" config="dashboard.chartConfig"></highchart>
        </div>
        <div layout-align="start center" layout="column" layout-padding>
            <div layout-align="start center" layout-fill>
                <img src="../../../assets/images/computer.png">
                <label layout-fill>Computer</label>
            </div>
        </div>
    </md-card>
</md-content>

这是我所期望的：

这是我得到的结果：

注意：图标被图表隐藏

Answer 1

为了让您的图表在保持响应式布局的同时不超出其边界，我建议您采取以下措施。

首先，为包含您的 Highcharts 可视化的 flex div 元素赋予其自己的 ID（在本例中为 chartContainer）：

<md-content flex layout-padding>
    <md-card layout="row" layout-wrap>
        <div flex layout-padding id="chartContainer">
            <highchart id="summary-chart" config="dashboard.chartConfig"></highchart>
        </div>
        <div layout-align="start center" layout="column" layout-padding>
            <div layout-align="start center" layout-fill>
                <img src="../../../assets/images/computer.png">
                <label layout-fill>Computer</label>
            </div>
        </div>
    </md-card>
</md-content>

接下来，每当调整chartContainer div 的大小时，设置highchart 元素的大小以匹配该div 的宽度和高度：

$(".chartContainer").resize(function () {
    $('#summary-chart').highcharts().setSize(
        $(".chartContainer").width(), // new width of the containing div
        $(".chartContainer").height(), // new height of the containing div
        false // don't animate the chart itself changing
    );
});

请注意，我假设 highcharts 元素可以像标准 div 元素一样使用 setSize() 传递值。

让我知道这是否对你有帮助。

Answer 2

将此代码添加到您的 css 文件中

 .highcharts-container {
    width:100% !important;
    height:100% !important;
 }