Расположение элементов в Plotly-Dash - PullRequest
Новая
       21

Расположение элементов в Plotly-Dash

0 голосов
/ 01 марта 2020

Я сделал основную панель инструментов c, которая выглядит как показано ниже, рабочий минимальный пример приведен внизу этого поста. Я хочу (но понятия не имею, как) отцентрировать ползунок и с (в настоящее время жестко запрограммирован на 500 пикселей) около 80% ширины рисунка, в зависимости от размера окна браузера. Как я могу это сделать? Спасибо!

[metainfo: Буду признателен за несколько советов о том, где искать / как искать такую ​​тему; Я, кажется, гуглю не те вещи и мне трудно собрать воедино кусочки документации Da sh [enter image description here] 1 

import dash
import dash_table
import dash_daq as daq
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np

# pydata stack
import pandas as pd
from sqlalchemy import create_engine

def makeplot(slider):
    gobar=[go.Bar(
                x=[1,2,3],
                y=[1,slider,5],
                name='I am {}'.format(slider)) ]
    content= {
            'data':gobar,
            'layout':dict(title='Mygraph')
            }
    return content

## layout
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

## app
app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    daq.Slider(
        id='myslider',
        min=1,
        max=5,
        value=3,
        marks={str(i): 'Label_'+str(i) for i in np.arange(1,6)},
        step=None,
        size=500),
])

## callbacks
@app.callback(
    Output('graph-with-slider', 'figure'),
    [Input('myslider', 'value')])
def update_figure(myval):
    content=makeplot(myval)
    return content

# run server
if __name__ == '__main__':
    app.run_server(debug=True)

1 Ответ

0 голосов
/ 02 марта 2020

Я нашел решение. по сути, используя ползунок d cc (не daq), и добавление отступов помещает ползунок в центр: 

html.Div([
        dcc.Slider(
            id='year-slider',
            min=0,
            max=len(t.freqs)-1,
            value=1,
            marks={str(i): key for i,key in enumerate(t.freqs.keys())},
            # marks = {displaystring : internal value}
            step=None,
            # size=500                
        ),
    ],
    style={'width': '50%','padding-left':'25%', 'padding-right':'25%'}
)
...