Просмотр панели инструментов рядом с использованием python

Question 1

Я новичок в 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'})

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

python css

0

Srini Vasan 22 Апр 2020 в 04:00

Если вы используете width: 100%, то <div> использует всю ширину окна (браузера), а следующий <div> должен будет перейти к следующей строке. Для решения этой проблемы сначала вам нужно знать HTML и CSS, чтобы понять, как браузер отображает данные.

–

furas

22 Апр 2020 в 05:31

Я запускаю ваш код, и он отображает графики рядом, но у меня большой монитор. Если я изменяю размер окна, чтобы сделать его меньше, тогда второй график перемещается ниже первого графика - это естественно. Если я использую 'width': '50%' для каждого DIV, тогда они будут отображаться рядом даже в маленьком окне.

–

furas

22 Апр 2020 в 05:55

Да, это работает сейчас. Большое спасибо за Вашу помощь !!

–

Srini Vasan

22 Апр 2020 в 09:48

Answer

Если я запускаю код на большом мониторе, я вижу графики рядом.

Если я использую меньшее окно, он автоматически помещает второй график ниже.

Но с помощью '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

enter image description here

0

furas 22 Апр 2020 в 06:04

Question 2

Если я запускаю код на большом мониторе, я вижу графики рядом.

Если я использую меньшее окно, он автоматически помещает второй график ниже.

Но с помощью '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

enter image description here

0

furas 22 Апр 2020 в 06:04

Просмотр панели инструментов рядом с использованием python

1 ответ

Похожие вопросы

Новые вопросы

python