如何将 selectedData 输入中的值添加到列表中？

Question

我构建了一个 Plotly Dash Web 应用程序来显示传感器数据。我想要一张可以选择车站的地图，因此我可以看到时间序列图。

这是我现在的回调：

@app.callback(
    Output('time_series1', 'figure'),
    Input('map_sensors', 'selectedData'))

def display_selected_data(selectedData):
    if selectedData is None: # Plot whole Dataframe if nothing is selected.
        fig = px.line(data_frame=df, x='date.utc', y='value', color='location')
    
        return fig
    
    else:
        selectedData['points'][0]['customdata'][0] # This line shows me the name of the location and I want to add this to a list
        return 

我可以在所选数据中显示位置。现在我的问题是，如何将其添加到列表中？

我的目标是像dff2 = df[df.location.isin(selected_locations)] 这样过滤数据框，以便我只绘制选定的位置。

我现在的完整应用：

from jupyter_dash import JupyterDash
import plotly.graph_objs as go
from dash import Dash, dcc, html, Input, Output, State
import pandas as pd
import plotly.express as px
import json

loc = pd.read_csv('location_sensors.csv')
df = pd.read_csv('measurement.csv')
style = {'width': '50%', 'height': '500px', 'float': 'left'}

# Build small example app.
app = dash.Dash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

fig_map = px.scatter_mapbox(loc, lat="lat", lon="lon", hover_name="location", 
                           hover_data={'location':True, 'lat':False, 'lon':False}, zoom=3, height=600,
                           color='location', mapbox_style="open-street-map")
fig_map.update_layout(clickmode='event+select')

app.layout =   html.Div([
        dcc.Graph(id='map_sensors', figure=fig_map , className='six columns'),
      
    html.Div([dcc.Graph(
                    id='time_series1',
                    style={'height': 400}
                ),
])
])

@app.callback(
    Output('time_series1', 'figure'),
    Input('map_sensors', 'selectedData'))

def display_selected_data(selectedData):
    if selectedData is None:
        fig = px.line(data_frame=df, x='date.utc', y='value', color='location')
    
        return fig
    
    else:
        # Here I want to filter the dataframe to the selected locations.
        return 
    
if __name__ == '__main__':
    app.run_server()

位置 csv 数据：

lat,lon,location
51.20966,4.43182,BETR801
48.83722,2.3939,FR04014
51.49467,-0.13193,London Westminster

时间序列数据： https://github.com/pandas-dev/pandas/blob/master/doc/data/air_quality_long.csv

Answer 1

对于您的@app.callback 装饰器，我认为您希望您的输入是clickData 而不是selectionData。如果您查看文档here 中的第一个示例，一旦您单击地图上的某个位置并且它是灰色的，当您稍后再次单击它时，clickData 将输入带有标记信息的字典，而 selectionData 将输入null（这意味着如果你使用selectionData而不是clickData，当你再次点击一个点后，破折号将无法识别）

然后，您可以拥有一个动态列表，该列表会根据用户选择和取消选择的位置而变化。也是一个非常小的点，但我将您的 DataFrame 变量名称从 loc 更改为 locs，因为 .loc 是 pandas DataFrame 方法。

from jupyter_dash import JupyterDash
import plotly.graph_objs as go
import dash
from dash import Dash, dcc, html, Input, Output, State
import pandas as pd
import plotly.express as px
import json

locs = pd.read_csv('location_sensors.csv')
df = pd.read_csv('https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/air_quality_long.csv')

style = {'width': '50%', 'height': '500px', 'float': 'left'}

# Build small example app.
app = dash.Dash(__name__)

styles = {
    'pre': {
        'border': 'thin lightgrey solid',
        'overflowX': 'scroll'
    }
}

fig_map = px.scatter_mapbox(locs, lat="lat", lon="lon", hover_name="location", 
                           hover_data={'location':True, 'lat':False, 'lon':False}, zoom=3, height=600,
                           color='location', mapbox_style="open-street-map")

fig_map.update_layout(clickmode='event+select')

app.layout = html.Div([
    dcc.Graph(id='map_sensors', figure=fig_map , className='six columns'),
    html.Div([dcc.Graph(
        id='time_series1',
        style={'height': 400}
        ),
    ])
])

## define a list that will hold the columns of the dataframe
## this will be used to modify the px.line chart
selected_locations = list(locs['location'])

@app.callback(
    Output('time_series1', 'figure'),
    Input('map_sensors', 'clickData'))
def display_selected_data(clickData):
    ## when the app initializes
    if clickData is None:
        fig = px.line(data_frame=df, x='date.utc', y='value', color='location')

    ## when the user clicks on one of the loc points
    else:
        selection = clickData['points'][0]['customdata'][0]
        if selection in selected_locations:
            selected_locations.remove(selection)
        else:
            selected_locations.append(selection)
        fig = px.line(data_frame=df[df.location.isin(selected_locations)], x='date.utc', y='value', color='location')
    return fig
    
if __name__ == '__main__':
    app.run_server(debug=True)