Plotly Dash：如何在选项卡内显示三个相邻的图表答案

【问题标题】：Plotly Dash: How to display three graphs next to each other inside a tabPlotly Dash：如何在选项卡内显示三个相邻的图表
【发布时间】：2023-03-25 18:25:01
【问题描述】：

我想显示三个并排的图表，每个都占据屏幕的三分之一。现在两个在一起，另一个在他们下面。它们都在第一个选项卡中。

first = html.Div(
    [
        dcc.Tabs(
            [
                dcc.Tab(
                    html.Div(
                        children=[
                            dcc.Graph(
                                figure=sentiment_bar,
                                style={
                                    "display": "inline-block",
                                },
                                
                            ),
                            dcc.Graph(
                                figure=sentiment_bar,
                                style={
                                    "display": "inline-block",
                                },
                                
                            ),
                            dcc.Graph(
                                figure=sentiment_bar,
                                style={
                                    "display": "inline-block",
                                },
                                
                            ),
                        ],
                    ),
                ),
                dcc.Tab(
                    label=" PrivacyConcerns ",
                    children=[dcc.Graph(figure=fig2)],
                ),
            ]
        )
    ]
)

【问题讨论】：

标签： python plotly plotly-dash dashboard

【解决方案1】：

您需要将'width': '33%' 添加到style 字典中，请参见下面的示例。

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go

app = dash.Dash(__name__)

app.layout = html.Div([

    dcc.Tabs([

        # First tab
        dcc.Tab(label='Tab 1', children=[

            # First graph
            dcc.Graph(
                figure=go.Figure(go.Bar(x=[1, 2, 3, 4], y=[10, 20, 30, 40])),
                style={
                    'display': 'inline-block',
                    'vertical-align': 'top',
                    'width': '33%',
                },
            ),

            # Second graph
            dcc.Graph(
                figure=go.Figure(go.Scatter(x=[1, 2, 3, 4], y=[10, 20, 30, 40])),
                style={
                    'display': 'inline-block',
                    'vertical-align': 'top',
                    'width': '33%',
                },
            ),

            # Third graph
            dcc.Graph(
                figure=go.Figure(go.Pie(values=[1, 2, 3, 4], labels=['a', 'b', 'c', 'd'])),
                style={
                    'display': 'inline-block',
                    'vertical-align': 'top',
                    'width': '33%',
                },
            ),
                
        ]),

        # Second tab
        dcc.Tab(label='Tab 2'),

        # Third tab
        dcc.Tab(label='Tab 3'),
    
    ])

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)

【讨论】：