python - 与其他组件内联的破折号下拉列表的位置

Question

我正在使用 plotly Dash 并且我在页面上的破折号组件的位置方面遇到了问题。这是“更改年份”下拉菜单，如下图所示。我希望它在我用箭头显示的地方，而它在我的第一个 radioitem 组件下方。


我的代码如下:

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets= external_stylesheets  )

# determining the layout of the page
app.layout = html.Div( [
    html.Div( [
        html.Label( ['Change continent:'],
                    style={'font-weight': 'bold', 'display': 'inline-block', 'justifyContent': 'center', 'width': '65%',
                           'height': '100%'},
                    ),

        dcc.RadioItems(
            id='radio_ITEMS',
            options=[
            {'label': 'AMERICA', 'value': 'graph1'},
            {'label': 'EUROPE', 'value': 'graph2'},
            {'label': 'ASIA', 'value': 'graph3'}],
            value='graph1',


        ),
    ], className='six columns' ),

    html.Div( [
            html.Label( ['Change the variable:'],
                        style={'font-weight': 'bold', 'display': 'inline-block', 'justifyContent': 'center', 'width': '65%',
                               'height': '100%'},
                        ),

            dcc.RadioItems(
                id='radio_items2',
                options=[{'label': x, 'value': x} for x in cols1],
                value='Happiness Score',

            ),
        ], className='six columns' ),
    html.Div( [
        html.Label( ['Change the  year:'], style={'font-weight': 'bold', 'display': 'inline-block'}),
        dcc.Dropdown(id="drop",
                     options=[
                         {"label": "1970", "value": 2015},
                         {"label": "1980", "value": 2016},
                         {"label": "1990", "value": 2017},
                         {"label": "2000", "value": 2018},
                         {"label": "2010", "value": 2019}],
                     multi=False,
                     value=2015,
                     style={"width": "35%"},
                     )]),

    html.Div(
        dcc.Graph( id='the_graph',
                   style={'height': 600, 'width': 1000, }
                   ),
    ),
] ,className= 'fifteen columns')

@app.callback(
    Output( 'the_graph', 'figure' ),
    [Input( 'radio_ITEMS', 'value' ),
     Input( component_id='radio_items2', component_property='value' ),
     Input('drop', 'value')]

Answer 1

根据经验，使用 css 调整应用程序的样式, 不是内联 style .

您遇到的问题是 div 的宽度总和大于 100%，因此使它们跨越多行。您可以使用下面提供的代码进行修复。

从您的代码中删除样式 + 使用广泛的类(如有必要，请使用特定的 id):

# determining the layout of the page
app.layout = html.Div( [
    html.Div(
        classname="my-cols",
        children = [
            html.Label('Change continent:'),
            dcc.RadioItems(
                id='radio_ITEMS',
                options=[
                    {'label': 'AMERICA', 'value': 'graph1'},
                    {'label': 'EUROPE', 'value': 'graph2'},
                    {'label': 'ASIA', 'value': 'graph3'}
                    ],
                value='graph1',
                ),
            ]
        ),
    html.Div(
        classname="my-cols",
        children = [
            html.Label('Change variable:'),
            dcc.RadioItems(
                id='radio_items2', # id naming should be consistent...
                options=[{'label': x, 'value': x} for x in cols1],
                value='Happiness Score',
                ),
            ]
        ),
    html.Div(
        classname="my-cols",
        children = [
            html.Label('Change year:'),
            dcc.RadioItems(
                id='radio_items2', # id naming should be consistent...
                options=[
                         {"label": "1970", "value": 2015},
                         {"label": "1980", "value": 2016},
                         {"label": "1990", "value": 2017},
                         {"label": "2000", "value": 2018},
                         {"label": "2010", "value": 2019}
                     ],
                multi=False,
                value='Happiness Score',
                ),
            ]
        ),
    html.Div(
        dcc.Graph(
            id='the_graph',
            ),
        )
) # close the app!

在您的元素根目录中创建一个 css 文件 - 或在根目录中创建一个名为 styles 的文件夹并在该文件夹中添加一个文件。名字随意...

.my-cols{
  width: calc(100%/3);
  float: left;
}

/* The following formats the content whose id = the_graph*/
@the_graph{
  height: 600;
  width: 1000
}

/* Style all labels*/
label{
  font-weight: bold;
  display: inline-block;
  /* I don't think you need these style configs... (justify, w, h)...*/
  justifyContent: center;
  width: 65%;
  height: 100%;
}

这应该可以解决您的问题。