时间戳

首页 > 解决方案 > Plotly Dash 并排图

python - Plotly Dash 并排图

问题描述

我正在尝试创建一个 Dash 仪表板，其中有两个并排的绘图图，一个在它们下面。这是代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import dash_bootstrap_components as dbc
import numpy as np
import pandas as pd
np.random.seed(2)

df1 = pd.DataFrame(columns=['A', 'B', 'C'], data=np.random.rand(5,3))
df2 = pd.DataFrame(columns=['A', 'B', 'C'], data=np.random.rand(5,3))
df3 = pd.DataFrame(columns=['A', 'B', 'C'], data=np.random.rand(5,3))

def create_fig(df):
    data = go.Table(
        header=dict(
            values=[str(i) for i in df.columns],
            align='center'
        ),
        cells=dict(
            values=df,
            align = "left",
            height=45
            )
    )

    layout = dict(
        showlegend=False,
        width=200
    )
    return dict(data=[data], layout=layout)

app = dash.Dash(external_stylesheets=['https://codepen.io/amyoshino/pen/jzXypZ.css'])

app.layout = html.Div([
    html.Div(
        className="row",
        children=[
            html.Div(
                className="six columns",
                children=[
                    html.Div(
                        children=dcc.Graph(id='left-top', figure=create_fig(df1))
                    )
                ]
            ),
            html.Div(
                className="six columns",
                children=html.Div(
                    children=dcc.Graph(id='right-top', figure=create_fig(df2)),
                )
            )
        ]
    ),
    html.Div(
        className="row",
        children=[
            html.Div(
                className="twelve columns",
                children=[
                    html.Div(
                        children=dcc.Graph(id='bottom-bar-graph', figure=create_fig(df3))
                    )
                ]
            )
        ]
    )
])

if __name__ == '__main__':
    app.run_server()

我尝试了一些不同的建议解决方案，但还没有成功。我也尝试过更改图形布局中的宽度和高度。 尝试解决方案 1 尝试解决方案 2

标签： pythonplotlyplotly-dash

解决方案

Flexbox可以解决这个问题。div你给的className='row'应该有display: flex;CSS中的样式，或者style=dict(display='flex')如果你是内联的。

推荐阅读