Dash：从数据框字典中绘制图形

Question

我有一本字典，dict_main，包含我试图在 Dash 中绘制的数据帧。我有两个下拉列表，允许用户首先 select 字典中的数据框，然后是这些数据框中的列。这很有效，我现在想将 selected 列放入图表中，但我似乎无法正常工作。这是我第一次使用 Dash，抱歉，如果这很明显。到目前为止我有；

rpm = list(dict_main.keys())
channels = dict_main[rpm[0]]

app.layout = html.Div(
    [
        html.Div([
        dcc.Dropdown(
            id='rpm-dropdown',
            options=[{'label':speed, 'value':speed} for speed in rpm],
            value=list(dict_main.keys())[0],
            multi=True,
            searchable=False
            ),
            ],style={'width': '20%', 'display': 'inline-block'}),
        html.Div([
        dcc.Dropdown(
            id='channel-dropdown',
            multi=True
            ),
            ],style={'width': '20%', 'display': 'inline-block'}
        ),
    ]
)

@app.callback(
    dash.dependencies.Output('channel-dropdown', 'options'),
    [dash.dependencies.Input('rpm-dropdown', 'value')]
)
def update_date_dropdown(speed):
    return [{'label': i, 'value': i} for i in dict_main[speed]]


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

我已经试过了；

html.Div([
    dcc.Graph(
        id='Main-Graph',
        figure=go.Figure(
            data=[
                go.Scatter(
                    x=rpm, y=channels
                )
            ]
        )
    ),
    ], style={'width': '98%', 'display': 'inline-block'}
    )

回调为;

@app.callback(
    dash.dependencies.Output('Main-Graph', 'figure'),
    [dash.dependencies.Input('channel-dropdown', 'value')])
def updateGraph(channels):
    return[{'label': i, 'value': i} for i in dict_main[channels]]

此 returns 图表不会随着下拉列表 selection 的变化而更新。它还出现了一个table，这是我没想到的。任何帮助使该图正常工作的帮助都将不胜感激。谢谢。

更新：

这有效；

rpm = list(dict_main.keys())
channels = dict_main[rpm[0]]

app.layout = html.Div(
    [
        html.Div([
            dcc.Dropdown(
                id='rpm-dropdown',
                options=[{'label': speed, 'value': speed} for speed in rpm],
                value=list(dict_main.keys())[0],
                searchable=False
            ),
        ], style={'width': '44%', 'display': 'inline-block'}),
        html.Div([
            dcc.Dropdown(
                id='channel-dropdown',
                multi=True
            ),
        ], style={'width': '44%', 'display': 'inline-block'}
        ),
        html.Div([
            dcc.Graph(
                id='Main-Graph',
            ),
        ], style={'width': '98%', 'display': 'inline-block'}
        )
    ]
)

@app.callback(
    Output('channel-dropdown', 'options'),
    [Input('rpm-dropdown', 'value')])
def update_date_dropdown(speed):
    return [{'label': i, 'value': i} for i in dict_main[speed]]

@app.callback(
    Output('Main-Graph', 'figure'),
    [Input('channel-dropdown', 'value')],
    [State('rpm-dropdown', 'value')])
def updateGraph(channels, speed):
    if channels:

        return go.Figure(data=[go.Scatter(x=dict_main[speed].index, y=dict_main[speed][i]) for i in channels])
    else:
        return go.Figure(data=[])

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

Answer 1

你可以这样做（Dash v1.6.0）：

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import json

app = dash.Dash(__name__)

df1 = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df2 = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

dict_main = {'df1': df1, 'df2': df2}
data = list(dict_main.keys())
channels = dict_main[data[0]]

app.layout = html.Div([
        dcc.Graph(id='Main-Graph',
            figure=go.Figure(
                data=[go.Scatter(x=data, y=channels)]
        )),
        html.Div([
            dcc.Dropdown(
                id='data-dropdown',
                options=[{'label': label, 'value': label} for label in data],
                value=list(dict_main.keys())[0],
                multi=False,
                searchable=False)],
            style={'width': '33%', 'display': 'inline-block'}),
        html.Div([
            dcc.Dropdown(
                id='x-axis-dropdown',
                multi=False)],
            style={'width': '33%', 'display': 'inline-block'}),
        html.Div([
            dcc.Dropdown(
                id='y-axis-dropdown',
                multi=False)],
            style={'width': '33%', 'display': 'inline-block'}),        
])

@app.callback(
    [dash.dependencies.Output('x-axis-dropdown', 'options'),
     dash.dependencies.Output('y-axis-dropdown', 'options')],
    [dash.dependencies.Input('data-dropdown', 'value')]
)
def update_date_dropdown(selected):
    if selected:
        fields = [{'label': i, 'value': i} for i in dict_main[selected]]
        return [fields, fields]

@app.callback(
    dash.dependencies.Output('Main-Graph', 'figure'),
    [dash.dependencies.Input('data-dropdown', 'value'),
     dash.dependencies.Input('x-axis-dropdown', 'value'),
     dash.dependencies.Input('y-axis-dropdown', 'value')],
    [dash.dependencies.State('Main-Graph', 'figure')])
def updateGraph(df_name, x_field, y_field, data):
    source = data['data']
    df = dict_main[df_name]

    if x_field and y_field and x_field in df.columns and y_field in df.columns:
        new_source = [{'x': df[x_field].tolist(), 'y': df[y_field].tolist()}]
        source = new_source
    return {
        'data': source,
        'layout': data['layout']
    }

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

Dash：从数据框字典中绘制图形

Dash: Graphing from dictionary of dataframes

python

pandas

plotly

plotly-dash