删除 plotly 图表周围的奇怪空白 (Javascript)

Question

我正在使用 plotly 库 (Javascript) 绘制饼图，我正在使用 flexbox 进行布局。图表右侧有一个巨大的白色space，如下图所示：

在上图中，您可以在饼图的右侧看到白色space。我已经使用 flexbox 属性 : flex-grow 来利用所有可用的 space 。为什么 flex-grow 在这里不起作用？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <title>plotly test</title>
        <link rel="stylesheet" href="style.css">
</head>
<body>
        <div id="maincontainer" class="mc">
                <div id="heading">Test plotly</div>
                <div id="row1" class="mc-item">
                        <div id="chart1" class="r1"></div>
                        <div id="chart2" class="r1"></div>
                        <div id="chart3" class="r1"></div>
                </div>
        </div>
        <script src="https://cdn.plot.ly/plotly-2.0.0.min.js"></script>
        <script src="chart.js"></script>
</body>
</html>

style.css

body {
        margin: 0px;
        padding: 0px;
}

#maincontainer{
        display: flex;
        flex-direction: column;
        height: 60vh;
}

#heading {
        font-size: 35px;
        font-weight: 600;
        text-align: center;
}

.mc-item { /* row1 */        
        flex-grow: 1;
        display: flex;
        border: 1px solid blue;
}

.r1 {
        border: 1px solid red;
        flex-grow: 1;
}

chart.js

document.addEventListener('DOMContentLoaded', function(){
        width = document.querySelector('#chart1').offsetWidth
        height = document.querySelector('#chart1').offsetHeight

        make_pie(height, width, 'chart1')
})

let make_pie = (height, width, chart_id)=>{
        var data = [{
                values: [19, 26, 55],
                labels: ['Residential', 'Non-Residential', 'Utility'],
                type: 'pie'
              }];
              
              var layout = {
                height: height,
                width: width,
                showlegend: false,
                paper_bgcolor: "#000",

              };
              
              Plotly.newPlot(chart_id, data, layout, {displayModeBar: false});
}

Answer 1

发生这种情况是因为您在第一个 .r1 项目中设置了图形的宽度。弹性框项目并不意味着具有固定宽度，即使它是根据弹性框布局计算的。

如果在 DOMContentLoaded 处理程序中调用 make_pie() 之前稍等片刻，您可以看到布局符合预期，直到绘制图形。

要解决此问题，您可以向弹性项目（尤其是那些包含固定宽度元素的项目）添加相对宽度属性，例如

.r1 {
    border: 1px solid red;
    flex-grow: 1;
    width: 100%;
}

删除 plotly 图表周围的奇怪空白 (Javascript)

remove the weird whitespace around the plotly chart (Javascript)

javascript

flexbox

plotly

plotly.js