Dash 動的更新チャート
現代のデータ可視化アプリケーションにおいて、動的更新チャートは非常に重要な機能であり、ユーザーはページ全体を更新することなく、データの変化をリアルタイムで確認できます。
Dash では、動的更新チャートの中核メカニズムはコールバック関数（Callback）、コールバック関数は、ユーザーがページと対話するとき（ボタンのクリックやドロップダウンメニューの選択など）に、チャートの内容を動的に更新することを可能にします。
コールバック関数の基本構造
典型的なコールバック関数は、次の部分で構成されます：
- 入力（Input）: コールバックをトリガーするコンポーネントとそのプロパティを定義します。
- 出力（Output）: 更新が必要なコンポーネントとそのプロパティを定義します。
- コールバック関数本体: 入力値に基づいて出力値を計算し、返します。
Dash コールバック関数の詳細は次を参照してください：https://www.example.com/dash/dash-callback.html。
簡単な動的更新チャート
コールバック関数を使用すると、チャートのデータとレイアウトを動的に更新できます。
以下は完全な Dash アプリケーションの例です。ユーザーはドロップダウンメニューでデータセットを選択でき、対応する折れ線グラフを動的に表示できます：
実例
import plotly.express as px
import pandas as pd
# Dashアプリケーションを作成
app = Dash(__name__)
# サンプルデータセットを定義
datasets = {
'データセット1': pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [10, 15, 13, 17, 21]
}),
'データセット2': pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [5, 10, 8, 12, 15]
}),
'データセット3': pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [20, 18, 22, 19, 25]
})
}
# レイアウトを定義
app.layout = html.Div([
html.H1(動的折れ線グラフの例), # タイトル
dcc.Dropdown(
id='dataset-dropdown', # ドロップダウンメニューのID
options=[{'label': name, 'value': name} for name in datasets.keys()], # ドロップダウンメニューのオプション
value='データセット1' # デフォルトで選択されているデータセット
),
dcc.Graph(id='line-chart') # 折れ線グラフを表示するためのGraphコンポーネント
])
# コールバック関数を定義
@app.callback(
Output('line-chart', 'figure'), # idが'line-chart'のGraphコンポーネントのfigureプロパティに出力
Input('dataset-dropdown', 'value') # 入力はidが'dataset-dropdown'のドロップダウンメニューのvalueプロパティから
)
def update_line_chart(selected_dataset):
# 選択されたデータセットを取得
df = datasets[selected_dataset]
# Plotly Expressを使用して折れ線グラフを作成
fig = px.line(df, x='x', y='y', title=f'{selected_dataset} 折れ線グラフ')
return fig
# アプリケーションを実行
if __name__ == '__main__':
app.run_server(debug=True) # アプリケーションを起動、debug=Trueはデバッグモードを有効にすることを示します
表示は以下のようになります：
コード解析
1、レイアウト部分：
-
使用
html.H1「平方を計算」というタイトルを作成します。 -
使用
dcc.Input数字入力ボックスを作成し、idためにnumber-input、型はnumber。 -
使用
html.Div結果を表示するための領域を作成します。idためにoutput。
2、コールバック関数：
-
使用
@app.callbackデコレータを使用してコールバック関数を定義します。 -
入力は
number-input入力ボックスのvalueプロパティです。 -
出力は
outputDiv のchildrenプロパティです。 -
コールバック関数内で：
-
入力が空であるかを確認します。
-
入力を浮動小数点数に変換し、平方を計算します。
-
フォーマットされた結果を返します。
-
4、アプリケーションの実行：
-
使用
app.run_server(debug=True)アプリケーションを起動し、debug=Trueデバッグモードを有効にすることを示します。