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元素可以使用setSize()传递值，与标准div元素一样。

请告诉我这是否对您有所帮助。

Answer 2

在css文件中添加此代码

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