Plotly-Dash 中元素的定位

Question

我制作了一个基本的仪表板，如下所示，在这个 post 的底部附上了最小的工作示例。我想（但不知道如何）将滑块和（当前硬编码为 500 像素）大约 80% 的图形宽度居中，以响应浏览器 window 大小。我怎样才能做到这一点？谢谢！

[元信息：我很感激关于在哪里寻找/如何搜索此类主题的建议；我似乎在谷歌搜索错误的东西并且很难将 Dash 文档的各个部分放在一起] []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)

Answer 1

我找到了解决方案。基本上使用 dcc 滑块（不是 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%'}
)

Plotly-Dash 中元素的定位

Positioning of elements in Plotly-Dash

html

positioning

slider

plotly-dash