1

我正在使用 Dash by Plotly 和 python 来创建一个 Web 应用程序。我一直在努力在下拉元素上正确显示多个值。从 pandas 数据框开始，我正在提取第 1 列，然后选择与第 1 列中的值相对应的另一列 2 中的值。多个值将显示在下拉列表中。附件是应用程序正在做什么的 GIF。我希望下拉 2 上的值是单独行上的独立值，即不同的值而不是连接在一起。

我认为问题是我如何返回值

 def update_dropdown2(wdg):
 wdgarray=df[ df['wdg'] == wdg ]['id'],
 return [{'label':i,'value':i} for i in wdgarray]

这是一个gif文件， 显示了每行第二个下拉元素显示的问题

这是代码：

    import pandas as pd
    import numpy as np
    import matplotlib.pyplot as plt
    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    import plotly.graph_objs as go
    from dash.dependencies import Input, Output

#create a dataframe with random data

df = pd.DataFrame(
    {'wdg': [10,10,10,20,20,20,30,30,30,40],
     'id': np.arange(0,100,10),
     'b': np.random.rand(10)*100,
     'c': np.random.rand(10)*100,
     'd': np.random.rand(10)*100,
     'e': np.random.rand(10)*100,
     'f': np.random.rand(10)*100,
     'g': np.random.rand(10)*100,
     'h': np.random.rand(10)*100,
     'k': np.random.rand(10)*100},

    columns=['wdg','id','b','c','d','e','f','g','h','k'])


app = dash.Dash()

#html layout
app.layout = html.Div([
    html.H1(
        children='Perfomance database web app',
        style={
            'textAlign': 'center',
            'color': colors['text']}
    ),

    html.Div([
        dcc.Dropdown(
            id='dropdown1',
            options=[{'label': i, 'value': i} for i in df.wdg.unique()],
            value='10'
        ),
        dcc.Dropdown(
            id='dropdown2',
            #options=[{'label': i, 'value': i} for i in mtrid_indicators],
            #value='1'
        ),
    ],
    style={'width': '49%', 'display': 'inline-block'}
    ),

    html.Div(id='tablecontainer'),

    html.Div(
        dcc.Graph(
            id='graph',

            style={'width':'600','height':'500'}
        ),
        style={'display':'inline-block'}
    ),

    ],
style={'width': '100%', 'display': 'inline-block'}
)

#callback to update dropdown 2
@app.callback(
    Output(component_id='dropdown2',component_property='options'),
    [Input(component_id='dropdown1',component_property='value')]
)

#function to that will update values in dropdown 2
def update_dropdown2(wdg):
    wdgarray=df[ df['wdg'] == wdg ]['id'],
    return [{'label':i,'value':i} for i in wdgarray]

#callback to update graph with values of dropdown 1 selecting pandas row
@app.callback(
    Output('graph', 'figure'), 
    [Input('dropdown1', 'value')]
)

#graph plot and styling
def update_graph(row):
    dff = df.iloc[int(row/10)].values # update with your own logic
    return {
        'data': [
                    go.Scatter(
                        x=np.arange(0,80,10),
                        y=dff,
                        mode='lines+markers',
                        line = dict(width = 5,color = 'rgb(200, 0, 0)'),
                        name='Torque curve',
                        marker = dict(
                        size = 10,
                        color = 'rgba(200, 0, 0, .9)',
                        line = dict(width = 2,color='rgb(0, 0, 0)')
                        )
                    ),
                ],
        'layout': go.Layout(
                    title='Torque Speed curve',

                    xaxis=dict(
        #               type='line',
                        title='Speed - (RPM)',
                        showgrid=True,
                        #zeroline=True,
                        showline=True,
                        gridcolor='#bdbdbd',
                        mirror="ticks",
                        ticks="inside",
                        tickwidth=1,
                        linewidth=2,
                        range=[0,100]
                    ),
                    yaxis=dict(
                        title= 'Torque - (lb-ft)',
                        titlefont=dict( color='rgb(200, 0, 0)' ),
                        tickfont=dict( color='rgb(200, 0, 0)' ),
                        range=[0, 120],
                        showgrid=True,
                        #zeroline=True,
                        showline=True,
                        gridcolor='#bdbdbd',
                        mirror="ticks",
                        ticks="inside",
                        tickwidth=1,
                        linewidth=2
                    ),
                    margin={'l': 60, 'b': 40, 't': 30, 'r': 60},
                    #legend={'x': 0.5, 'y': 1},
                    hovermode='closest',
                    showlegend=False,
                )
        }

if __name__ == '__main__':
    app.run_server()
4

1 回答 1

1

来自令人惊叹的 plotly 社区中的 pdh 的解决方案是删除逗号，这会将应该是熊猫系列的东西变成一个元组。 链接到 Plotly 社区的解决方案

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output

#create a dataframe with random data

df = pd.DataFrame(
{'wdg': [10,10,10,20,20,20,30,30,30,40],
 'id': np.arange(0,100,10),
 'b': np.random.rand(10)*100,
 'c': np.random.rand(10)*100,
 'd': np.random.rand(10)*100,
 'e': np.random.rand(10)*100,
 'f': np.random.rand(10)*100,
 'g': np.random.rand(10)*100,
 'h': np.random.rand(10)*100,
 'k': np.random.rand(10)*100},

columns=['wdg','id','b','c','d','e','f','g','h','k'])


app = dash.Dash()

#html layout
app.layout = html.Div([
html.H1(
    children='Perfomance database web app',
    style={
        'textAlign': 'center',
        'color': colors['text']}
),

html.Div([
    dcc.Dropdown(
        id='dropdown1',
        options=[{'label': i, 'value': i} for i in df.wdg.unique()],
        value='10'
    ),
    dcc.Dropdown(
        id='dropdown2',
        #options=[{'label': i, 'value': i} for i in mtrid_indicators],
        #value='1'
    ),
],
style={'width': '49%', 'display': 'inline-block'}
),

html.Div(id='tablecontainer'),

html.Div(
    dcc.Graph(
        id='graph',

        style={'width':'600','height':'500'}
    ),
    style={'display':'inline-block'}
),

],
style={'width': '100%', 'display': 'inline-block'}
)

#callback to update dropdown 2
@app.callback(
Output(component_id='dropdown2',component_property='options'),
[Input(component_id='dropdown1',component_property='value')]
)

#function to that will update values in dropdown 2
def update_dropdown2(wdg):
wdgarray=df[ df['wdg'] == wdg ]['id'] # removed problematic comma
return [{'label':i,'value':i} for i in wdgarray]

#callback to update graph with values of dropdown 1 selecting pandas row
@app.callback(
Output('graph', 'figure'), 
[Input('dropdown1', 'value')]
)

#graph plot and styling
def update_graph(row):
dff = df.iloc[int(row/10)].values # update with your own logic
return {
    'data': [
                go.Scatter(
                    x=np.arange(0,80,10),
                    y=dff,
                    mode='lines+markers',
                    line = dict(width = 5,color = 'rgb(200, 0, 0)'),
                    name='Torque curve',
                    marker = dict(
                    size = 10,
                    color = 'rgba(200, 0, 0, .9)',
                    line = dict(width = 2,color='rgb(0, 0, 0)')
                    )
                ),
            ],
    'layout': go.Layout(
                title='Torque Speed curve',

                xaxis=dict(
    #               type='line',
                    title='Speed - (RPM)',
                    showgrid=True,
                    #zeroline=True,
                    showline=True,
                    gridcolor='#bdbdbd',
                    mirror="ticks",
                    ticks="inside",
                    tickwidth=1,
                    linewidth=2,
                    range=[0,100]
                ),
                yaxis=dict(
                    title= 'Torque - (lb-ft)',
                    titlefont=dict( color='rgb(200, 0, 0)' ),
                    tickfont=dict( color='rgb(200, 0, 0)' ),
                    range=[0, 120],
                    showgrid=True,
                    #zeroline=True,
                    showline=True,
                    gridcolor='#bdbdbd',
                    mirror="ticks",
                    ticks="inside",
                    tickwidth=1,
                    linewidth=2
                ),
                margin={'l': 60, 'b': 40, 't': 30, 'r': 60},
                #legend={'x': 0.5, 'y': 1},
                hovermode='closest',
                showlegend=False,
            )
    }

if __name__ == '__main__':
app.run_server()
于 2018-03-02T10:46:56.367 回答