如何更改根据用户输入在绘图面板中加载的数据

Question

我有这个仪表板-

import datetime
import dash
from dash import dcc, html
import plotly
from dash.dependencies import Input, Output
from pyorbital.orbital import Orbital
satellite = Orbital('TERRA')
app = dash.Dash(__name__)
app.layout = html.Div(
html.Div([
html.H4('TERRA Satellite Live Feed'),
html.Div(id='live-update-text'),
dcc.Graph(id='live-update-graph'),
dcc.Interval(
id='interval-component',
interval=1*1000, # in milliseconds
n_intervals=0
)
])
)
@app.callback(Output('live-update-text', 'children'),
Input('interval-component', 'n_intervals'))
def update_metrics(n):
lon, lat, alt = satellite.get_lonlatalt(datetime.datetime.now())
style = {'padding': '5px', 'fontSize': '16px'}
return [
html.Span('Longitude: {0:.2f}'.format(lon), style=style),
html.Span('Latitude: {0:.2f}'.format(lat), style=style),
html.Span('Altitude: {0:0.2f}'.format(alt), style=style)
]
# Multiple components can update everytime interval gets fired.
@app.callback(Output('live-update-graph', 'figure'),
Input('interval-component', 'n_intervals'))
def update_graph_live(n):
satellite = Orbital('TERRA')
data = {
'time': [],
'Latitude': [],
'Longitude': [],
'Altitude': []
}
# Collect some data
for i in range(180):
time = datetime.datetime.now() - datetime.timedelta(seconds=i*20)
lon, lat, alt = satellite.get_lonlatalt(
time
)
data['Longitude'].append(lon)
data['Latitude'].append(lat)
data['Altitude'].append(alt)
data['time'].append(time)
# Create the graph with subplots
fig = plotly.tools.make_subplots(rows=2, cols=1, vertical_spacing=0.2)
fig['layout']['margin'] = {
'l': 30, 'r': 10, 'b': 30, 't': 10
}
fig['layout']['legend'] = {'x': 0, 'y': 1, 'xanchor': 'left'}
fig.append_trace({
'x': data['time'],
'y': data['Altitude'],
'name': 'Altitude',
'mode': 'lines+markers',
'type': 'scatter'
}, 1, 1)
fig.append_trace({
'x': data['Longitude'],
'y': data['Latitude'],
'text': data['time'],
'name': 'Longitude vs Latitude',
'mode': 'lines+markers',
'type': 'scatter'
}, 2, 1)
fig.update_layout(
xaxis=dict(
rangeselector=dict(
buttons=list([
dict(count=1,
label="1d",
step="day",
stepmode="backward")
])
)
type="date"
))

# Add dropdown
fig.update_layout(
updatemenus=[
dict(
type = "buttons",
direction = "left",
buttons=list([
dict(
args=["type", "surface"],
label="Terra",
method="restyle"
),
dict(
args=["type", "heatmap"],
label="Earth",
method="restyle"
)
]),
pad={"r": 10, "t": 10},
showactive=True,
x=0.11,
xanchor="left",
y=1.1,
yanchor="top"
),
]
)
return fig

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

我想添加一个按钮来更改加载的数据集。现在，加载的数据集被称为"TERRA"，我希望用户能够点击一个按钮，然后仪表板加载一个不同的数据集。理想情况下，将有一个名为terra的按钮加载terra数据，另一个称为earth的按钮加载earth数据。

在第一种情况下，仪表板运行Orbital('ERRA'(，在第二种情况下仪表板运行Orbital('地球'(。我能够将按钮添加到仪表板上，并且很难将变量从按钮传递到Orbital((函数。

Answer 1

您想用数据集选项定义一个按钮或下拉列表，然后将其id传递给update_graph_live的额外输入，在那里它将根据下拉列表切换数据集。

我建议使用RadioItems，因为您只想使用一个选项。

下拉示例显示如何将它们用作函数的输入

接近最小示例基于我的标志查看器的实现

import dash
import pandas as pd
import plotly.express as px
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
server = app.server
datasets_public = [
{'label': '21K Nether (2019)', 'value': '21k_nether.csv'},
{'label': '21K End (2019)', 'value': '21k_end.csv'},
{'label': '20K Overworld (2017)', 'value': '20k_overworld.csv'},
]
app.layout = html.Div(id="parentdiv", children=[
html.Div(children=[
html.Div(dcc.RadioItems(id='dflist', options=datasets_public, value='20k_overworld.csv')),
html.Div([dcc.Graph(id='scatter-plot')])])])

@app.callback(
Output("scatter-plot", "figure"),
Input("dflist", "value"))
def update_bar_chart(dflist):
df = pd.read_csv("data/" + dflist)
df = df.fillna("")
fig = px.scatter(df, x="x", y="z", hover_data=['x', 'y', 'z', 'line'])
return fig

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