python - 使用python并排查看仪表板

Question

我是 python 新手，正在尝试创建仪表板，我希望图表并排查看，而不是一个在另一个下方。

app = dash.Dash()
app.layout = html.Div(children=[
html.H1('Premium Dash Board'),
html.Div(children='Premium Queue'),
html.Div([
        dcc.Graph(id='example',
                  figure={
                      'data':[
                          {'x': ASIN, 'y': Quan, 'type': 'bar', 'name': 'Quantity'},
                          {'x': ASIN, 'y':List_price, 'type': 'bar', 'name': 'Price'}
                      ],
                      'layout': {
                          'title': 'ASIN vs Inventory & Price'
                      }
                  }),
        ],style={'display': 'inline-block'}),
html.Div([
        dcc.Graph(id='example1',
                  figure={
                      'data': [
                          {'x': ASIN, 'y': Quan, 'type': 'line', 'name': 'Quantity'},
                          {'x': ASIN, 'y': List_price, 'type': 'line', 'name': 'Price'}
                      ],
                      'layout': {
                          'title': 'ASIN vs Inventory & Price'
                      }
                  })

        ], style={'display': 'inline-block'})
],style={'width': '100%', 'display': 'inline-block'})

请告知如何进行。

标签： pythoncss

Answer 1

如果我在大显示器上运行代码，那么我会并排看到图。

如果我使用较小的窗口，那么它会自动将第二个图放在下面。

但是使用'width': '50%'我可以得到两个图side by side

import dash
import dash_html_components as html
import dash_core_components as dcc

import random
random.seed(0)

ASIN = list(range(100))
Quan = [random.randint(0, 100) for x in range(100)]
List_price = [random.randint(0, 100) for x in range(100)]

app = dash.Dash()
app.layout = html.Div(children=[
html.H1('Premium Dash Board'),
html.Div(children='Premium Queue'),
html.Div([
        dcc.Graph(id='example',
                  figure={
                      'data':[
                          {'x': ASIN, 'y': Quan, 'type': 'bar', 'name': 'Quantity'},
                          {'x': ASIN, 'y': List_price, 'type': 'bar', 'name': 'Price'}
                      ],
                      'layout': {
                          'title': 'ASIN vs Inventory & Price'
                      }
                  }),
        ],style={'width': '50%','display': 'inline-block'}),
html.Div([
        dcc.Graph(id='example1',
                  figure={
                      'data': [
                          {'x': ASIN, 'y': Quan, 'type': 'bar', 'name': 'Quantity'},
                          {'x': ASIN, 'y': List_price, 'type': 'bar', 'name': 'Price'}
                      ],
                      'layout': {
                          'title': 'ASIN vs Inventory & Price'
                      }
                  })
        ],style={'width': '50%','display': 'inline-block'}),
])

app.run_server()

要创建此图像，我使用DevTools并Firefox使用具有不同屏幕尺寸的设备测试页面 - Ctrl+Shift+M