flaskとplotlyでグラフを綺麗に表示したいです。どのようにコードを書けばいいでしょうか。
| 登録日 | ：2024/02/05 19:37 |
|---|---|
| カテゴリ | ：python django |
FlaskとPlotlyを組み合わせてグラフを表示するには、以下の手順に従うことができます。ここでは、Plotly Expressを使用します。
まず、必要なライブラリをインストールします：
pip install flask plotly
次に、Flaskアプリケーションを作成し、ルートにグラフを表示するためのテンプレートを作成します。
# app.py
from flask import Flask, render_template
import plotly.express as px
import plotly.io as pio
app = Flask(__name__)
@app.route('/')
def index():
# グラフを作成
fig = px.scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13], labels={'x': 'X軸', 'y': 'Y軸'})
# グラフをHTMLに変換
graph_html = pio.to_html(fig, full_html=False)
# テンプレートをレンダリング
return render_template('index.html', graph_html=graph_html)
if __name__ == '__main__':
app.run(debug=True)
そして、テンプレートフォルダ内に index.html を作成します。
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask + Plotly</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h1>Flask + Plotly</h1>
<!-- グラフを表示する要素 -->
<div id="graph-container">{{ graph_html|safe }}</div>
</body>
</html>
このコードでは、Flaskアプリケーションで / へのアクセスでグラフを表示するように設定されています。グラフはPlotly Expressを使用して作成され、PlotlyのJavaScriptライブラリがCDN経由で読み込まれています。
上記のコードを実行すると、http://127.0.0.1:5000/ でアプリケーションが実行され、ブラウザでグラフが表示されるはずです。