Plotly Dash 如何在标签页内实现三个等宽图表横向并排展示

问题原因 #

你当前仅给图表设置了inline-block行内块布局，没有限制每个图表的宽度，再加上Dash组件默认自带的内外边距会占用额外宽度，导致一行放不下三个图表，第三个被挤到第二行。

解决方案 #

推荐使用Flex弹性布局实现，直接给包裹三个图表的父Div添加布局属性即可，无需修改每个图表的配置，适配性更好：

first = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    html.Div(
                        children=[
                            dcc.Graph(figure=sentiment_bar),
                            dcc.Graph(figure=sentiment_bar),
                            dcc.Graph(figure=sentiment_bar),
                        ],
                        # 父容器添加flex布局，自动平分宽度，gap设置图表间的间距
                        style={"display": "flex", "gap": "8px", "width": "100%"}
                    ),
                ),
                dcc.Tab(
                    label=" PrivacyConcerns ",
                    children=[dcc.Graph(figure=fig2)],
                ),
            ]
        )
    ]
)

如果需要沿用inline-block的写法，给每个图表指定32%左右的宽度即可（预留一点宽度给边距，避免33%宽度加边距后总宽度超出100%）：

dcc.Graph(
    figure=sentiment_bar,
    style={
        "display": "inline-block",
        "width": "32%",
        "margin-right": "2%"
    }
)
# 最后一个图表额外设置margin-right为0即可

内容的提问来源于stack exchange，提问作者Domi