Панель приборов бок о бок, используя 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'})

Пожалуйста, посоветуйте, как поступить.

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