將行 plot 添加到現有 plotly 快遞圖表

Question

import dash
from dash import Dash, html, dcc, Output, Input, callback
import plotly.graph_objects as go
import plotly.express as px

df1 = pd.read_csv(filepath+filename, index_col="Date")
df1.index = pd.to_datetime(df1.index)

df1["Measure1_SMA"] = df1["Measure1"].rolling(20).mean()
df1["Measure2_SMA"] = df1["Measure2"].rolling(20).mean()

app = Dash(__name__)

my_dropdown = dcc.Dropdown(options = ['Measure1', 'Measure2'], 
                           value = df1.columns[:2], 
                           multi = False, 
                           style = {'width':'50%'})

my_graph = dcc.Graph(figure={})

app.layout = html.Div([
    html.H1('Metrics (Values)', style = {'textAlign':'center'}),
    html.Label("Metrics: "),
    my_dropdown,
    my_graph
])

@callback(
    Output(component_id=my_graph, component_property='figure'),
    Input(component_id=my_dropdown, component_property='value')
)

def update_graph(dropdown_value):
    plot_figure = px.bar(data_frame=df1, y=dropdown_value, x=df1.index)
    #plot_figure.add_line()
    print(dropdown_value)
    return plot_figure

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

我想在 plotly 儀表板上創建一個 plot 並帶有在 Measure1 和 Measure2 之間切換的選項。 選擇 dropdown_value 將在 y 軸上創建 Measure1 的條形圖，在 x 軸上創建 Date。 我還想在同一 plot 上 plot 折線圖，這將是從下拉列表中選擇的值的前 20 天的滾動平均值。 我嘗試添加一個add_line()方法，但不知道如何使用它。

Answer 1

使用從下拉選擇中獲得的值創建一個數據框，從中提取值列和 SMA 列。 在創建的數據框中繪制條形圖並以散點圖 plot 線模式添加 SMA。 繪制兩個圖，我想我需要制作一個帶有兩個軸的圖。 由於我無法將圖表添加到px.line ，我重用了px.line中的數據來創建第一個我使用px.line中的數據作為第一個圖表。 樣本數據是股票價格數據。

import dash
from dash import Dash, html, dcc, Output, Input, callback
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
import yfinance as yf

df1 = yf.download("AAPL", start="2021-01-01", end="2021-03-01")
df1["Close_SMA"] = df1["Close"].rolling(20).mean()
df1["High_SMA"] = df1["High"].rolling(20).mean()
df1 = df1[['High','Close','Close_SMA','High_SMA']]

app = Dash(__name__)

my_dropdown = dcc.Dropdown(options = ['Close', 'High'], 
                           value = 'Close', 
                           multi = False, 
                           style = {'width':'50%'})

my_graph = dcc.Graph(figure={})

app.layout = html.Div([
    html.H1('Metrics (Values)', style = {'textAlign':'center'}),
    html.Label("Metrics: "),
    my_dropdown,
    my_graph
])

@callback(
    Output(component_id=my_graph, component_property='figure'),
    Input(component_id=my_dropdown, component_property='value')
)

def update_graph(dropdown_value):
    sma = '{}_SMA'.format(dropdown_value)
    dff = df1[[dropdown_value,sma]]
    dff = dff.dropna()
    plot_figure = make_subplots(specs=[[{"secondary_y": True}]])
    fig = px.bar(data_frame=dff, y=dropdown_value, x=dff.index)
    plot_figure.add_trace(fig.data[0], secondary_y=False)
    plot_figure.add_trace(go.Scatter(x=dff.index, y=dff[sma], name=sma, mode='lines'), secondary_y=True)
    plot_figure.update_layout(yaxis_title='Close')
    return plot_figure

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