先生と生徒の会話形式で理解しよう

生徒

「先生、Flaskで作ったデータをグラフにして表示したいんですが、どうすればいいですか？」

先生

「いい質問ですね。FlaskとJavaScriptのChart.jsというライブラリを組み合わせることで、データをグラフとして簡単に表示できますよ。」

生徒

「Chart.jsって何ですか？Pythonでグラフを描くんじゃないんですか？」

先生

「Chart.js（チャートジェイエス）は、JavaScriptで作られたグラフ描画ライブラリです。Webブラウザの中で動くので、Flaskからデータを送ってあげれば、ブラウザ上にきれいな棒グラフや円グラフを表示できるんです。」

生徒

「なるほど！Flaskでデータを渡して、Chart.jsで描くってことですね！」

先生

「そうです！それでは、FlaskとChart.jsを使ったグラフ描画の基本を一緒に学んでいきましょう。」

1. FlaskとChart.jsの連携とは？

Flask（フラスク）はPythonでWebアプリケーションを作るための軽量なフレームワークです。一方、Chart.js（チャートジェイエス）はJavaScriptでグラフを描くためのライブラリです。この2つを組み合わせることで、サーバーでデータを作って、ブラウザでグラフを表示するという仕組みを簡単に実現できます。

たとえば、Flaskで売上データやアクセス数を計算し、それをChart.jsに送ることで、動的にグラフを更新できます。これにより、管理画面やダッシュボードのようなアプリを簡単に作れるようになります。

2. Flask側の準備（JSONデータを返す）

まずは、Flaskでデータを用意し、Chart.jsが読み取れるようにJSON形式で返します。JSON（ジェイソン）とは、データをやり取りするためのフォーマットで、人にもコンピュータにも分かりやすい形式です。


from flask import Flask, jsonify, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("chart.html")

@app.route("/api/data")
def get_data():
    data = {
        "labels": ["1月", "2月", "3月", "4月", "5月", "6月"],
        "values": [10, 20, 30, 25, 15, 35]
    }
    return jsonify(data)

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

@app.route("/api/data")で定義した関数が、Chart.jsに渡すデータを返します。jsonify()を使うことで、Pythonの辞書型を自動的にJSON形式に変換してくれます。

3. Chart.jsを使ってグラフを描画するHTML

次に、フロントエンド（ブラウザ側）のHTMLファイルを作成します。ここでは、Flaskのtemplatesフォルダに「chart.html」という名前で保存しましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>FlaskとChart.jsの連携</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Flask × Chart.jsでグラフ表示</h1>
    <canvas id="myChart" width="400" height="200"></canvas>

    <script>
        // FlaskのAPIからデータを取得
        fetch("/api/data")
            .then(response => response.json())
            .then(data => {
                const ctx = document.getElementById("myChart").getContext("2d");
                new Chart(ctx, {
                    type: "bar",  // 棒グラフ
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: "月別データ",
                            data: data.values,
                            borderWidth: 1,
                            backgroundColor: "rgba(75, 192, 192, 0.5)",
                            borderColor: "rgba(75, 192, 192, 1)"
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            });
    </script>
</body>
</html>

このコードでは、JavaScriptのfetch()関数を使って、Flaskが返す/api/dataにアクセスし、受け取ったJSONデータをChart.jsに渡しています。

canvasタグは、Chart.jsがグラフを描画するためのキャンバス（絵を描くためのスペース）です。

4. Chart.jsの仕組みを理解しよう

Chart.jsでは、次の3つの要素が基本になります。

labels： グラフの横軸に表示するラベル（例：月名や日付など）
data： 実際の数値データ（例：売上、アクセス数など）
type： グラフの種類（例：bar、line、pieなど）

この3つを設定することで、棒グラフや折れ線グラフ、円グラフなどを簡単に作ることができます。

5. 折れ線グラフや円グラフも簡単に作れる

Chart.jsの魅力は、ほんの少しの設定変更でグラフの種類を変えられることです。たとえば、棒グラフから折れ線グラフに変えたい場合は、typeを"line"に変更するだけです。


new Chart(ctx, {
    type: "line", // 折れ線グラフに変更
    data: {
        labels: data.labels,
        datasets: [{
            label: "月別推移",
            data: data.values,
            borderColor: "rgba(255, 99, 132, 1)",
            backgroundColor: "rgba(255, 99, 132, 0.2)"
        }]
    }
});

また、typeを"pie"にすれば円グラフ、"doughnut"にすればドーナツグラフになります。これだけでWeb上に美しいグラフを描くことができます。

6. FlaskとChart.js連携の流れを整理しよう

初心者の方が混乱しやすいので、全体の流れを整理しておきましょう。

FlaskがPythonでデータを作成（辞書やリストで）
jsonify()でJSON形式にしてブラウザへ返す
JavaScript（Chart.js）がfetch()でそのデータを取得
Chart.jsがグラフを描画して、HTMLに表示する

このように、「サーバーでデータを作る」「ブラウザでグラフにする」という役割分担を覚えると、Webアプリ開発の理解がぐっと深まります。

7. 応用：Flaskでリアルタイムデータを送るには？

基本的な連携ができたら、さらに発展して、リアルタイムでグラフを更新することもできます。たとえば、温度センサーのデータや株価の変動を数秒ごとに更新して表示するような仕組みも、FlaskとChart.jsで実現できます。

この場合は、JavaScriptのsetInterval()を使って一定時間ごとにFlaskのAPIを呼び出し、新しいデータでグラフを再描画するようにします。

こうしたリアルタイムなグラフ表示は、ダッシュボードアプリやIoTデータの可視化などでよく使われる技術です。

まとめ

FlaskとChart.jsを組み合わせたデータ可視化の仕組みを振り返ると、Python側で整えた情報をWebブラウザに自然な形で届け、それをグラフとして描画する流れが思っている以上にシンプルであることが見えてきます。特に、月別データのような身近な情報をJSONとして返し、JavaScriptで扱いやすい形で受け取り、Chart.jsで棒グラフ・折れ線グラフ・円グラフなど多様な表現に変換できる柔軟さは、学習を進めるうえでも強い味方になります。こうした可視化の工程を理解することは、ダッシュボードの構築や統計データの整理にもつながり、日々の学習や実務でも役に立つ考え方につながります。また、fetch関数によるデータ取得の仕組みや、canvasタグの役割、Chart.jsの「labels」「datasets」「type」といった設定項目の組み立て方を覚えることで、データがどのように画面上で表現されるのかが少しずつイメージできるようになります。さらに、リアルタイム更新という応用範囲もあり、定期的に変化する数値を滑らかに描画する楽しさも体験できます。こうしたステップを踏むことで、Webアプリケーションの流れやデータ処理の本質に触れやすくなり、より深く理解へとつながっていきます。

サンプルプログラム（振り返り用）

以下は、まとめとしてもう一度確認しておきたい基本的な構造です。


@app.route("/api/chart")
def chart_data():
    info = {
        "labels": ["一月", "二月", "三月", "四月", "五月", "六月"],
        "values": [12, 18, 25, 30, 22, 40]
    }
    return jsonify(info)


<canvas id="reviewChart" width="400" height="200"></canvas>
<script>
fetch("/api/chart")
    .then(res => res.json())
    .then(info => {
        const ctx = document.getElementById("reviewChart").getContext("2d");
        new Chart(ctx, {
            type: "bar",
            data: {
                labels: info.labels,
                datasets: [{
                    label: "振り返りデータ",
                    data: info.values,
                    backgroundColor: "rgba(54, 162, 235, 0.5)",
                    borderColor: "rgba(54, 162, 235, 1)"
                }]
            }
        });
    });
</script>

このように、Flaskで返した辞書データを自然な形でChart.jsに渡すことで、滑らかで分かりやすい表示が可能になります。初心者がつまずきやすいポイントとしては「データの受け渡し」と「描画の開始位置」がありますが、一度流れを理解すると応用しやすく、さまざまなグラフへ発展できます。折れ線や円形のスタイルへの変更も簡単で、実際の現場でもよく使われる重要な技術です。また、ブラウザ側ではcanvasを中心にグラフが描かれ、Flaskが返すJSONとの相性がよいことも大きな特徴です。しっかりとJSONの構造を意識しながらデータを作ることで、画面上の表示とPython側の処理が気持ちよく連動し、整えられたWebアプリケーションの形が理解しやすくなります。

先生と生徒の振り返り会話

生徒

「今回の内容を通して、Flaskで作ったデータをそのままグラフに変換できる流れがだいぶわかってきました。JSONってとても便利なんですね。」

先生

「そうですね。データをやりとりする基本でもありますし、Web開発では欠かせない仕組みです。Chart.jsと組み合わせると、データが視覚的に理解しやすくなるので学習にも効果的ですよ。」

生徒

「グラフの種類を変えるだけで印象もずいぶん違うので、使い分けが大事だと感じました。リアルタイム更新も面白そうです！」

先生

「その意識はとても大切です。用途に合わせて表現方法を選ぶことで、見る側により伝わりやすくなります。次は動的な変化を扱うところに挑戦してみましょう。」

生徒

「はい！今日学んだ流れを確認しながら、もっとグラフの使いこなしを練習してみます。」