PythonのFlaskを使用してChart.jsでグラフを表示する方法

投稿日: 2024年1月6日

Flaskを使用して、JavaScript（具体的にはChart.jsというライブラリ）を使ってHTMLテンプレートでグラフを作成する方法を説明します。以下は手順です。

1.必要なライブラリのインストール:

コンソール、またはコマンドプロントでFlaskをインストールします。

pip install flask

2.Flaskアプリケーションの設定:

app.pyという名前のファイルを作成し、以下のコードを追加します。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # ダミーデータ
    data = {
        "labels": ["9:00", "10:00", "11:00", "12:00", "13:00"],  # 時間
        "datasets": [
            {
                "label": "Temperature (°C)",
                "data": [20, 22, 24, 23, 21],  # 温度
            }
        ]
    }
    return render_template('index.html', data=data)

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

3.HTMLテンプレートの作成:

templatesという名前のディレクトリを作成し、その中にindex.htmlという名前のファイルを作成し、以下の内容を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Chart</title>
    <!-- Chart.jsのCDNを追加 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="temperatureChart" width="400" height="200"></canvas>

    <script>
        var ctx = document.getElementById('temperatureChart').getContext('2d');
        var temperatureChart = new Chart(ctx, {
            type: 'line',
            data: {{ data | tojson | safe }},
            options: {
                scales: {
                    x: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '時間'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '温度 (°C)'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

4.アプリケーションの実行:

app.pyを実行して、ブラウザでhttp://127.0.0.1:5000/にアクセスすると、時間と温度のグラフが表示されます。

以上の手順で、FlaskとChart.jsを使用して、時間と温度のグラフを作成することができます。

記事