Zenn
📊

PythonとGoogle Chart Toolsで作るシンプルな円グラフアプリ

2024/11/27に公開
Python
Google
グラフ
gct
tech

こんにちは！今回は、PythonとGoogle Chart Toolsを使ってシンプルな円グラフアプリを作成する方法をご紹介します。Flaskを使用してウェブアプリケーションを構築し、Google Chart Toolsでデータを可視化します。

目次

  • Flaskのインストール
  • Flaskアプリケーションの作成
  • Google Chart Toolsを使った円グラフの表示
    • HTMLコードの説明
  • アプリケーションの実行

1. Flaskのインストール

まず、Flaskをインストールします。ターミナルで以下のコマンドを実行してください。

pip install Flask

2. Flaskアプリケーションの作成

次に、シンプルなFlaskアプリケーションを作成します。プロジェクトディレクトリを作成し、以下のように app.py ファイルを作成します。

# app.py
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('chart.html')

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

3. Google Chart Toolsを使った円グラフの表示

次に、テンプレートファイルを作成し、Google Chart Toolsを使って円グラフを表示します。テンプレートディレクトリ（templates）を作成し、その中に chart.html ファイルを作成します。

<!-- templates/chart.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Google Chart Example</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     8],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    8],
          ['Exercise', 2]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

HTMLコードの説明

DOCTYPE宣言とHTMLの基本構造

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>: この宣言は、HTML5を使用していることをブラウザに知らせます。
<html lang="en">: このタグはHTML文書のルートで、文書の言語を英語(en)に設定します。

ヘッド部分

<head>
    <meta charset="UTF-8">
    <title>Google Chart Example</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

<meta charset="UTF-8">: 文書の文字エンコーディングをUTF-8に設定します。
<title>Google Chart Example</title>: ブラウザタブに表示されるタイトルを設定します。
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>: Google Chartsのライブラリを読み込みます。
<script type="text/javascript">: JavaScriptコードの開始を示します。

Google Chartの設定

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

google.charts.load('current', {'packages':['corechart']});: Google Chartsのコアチャートパッケージを読み込みます。
google.charts.setOnLoadCallback(drawChart);: Google Chartsの読み込みが完了したら、drawChart関数を実行するよう設定します。

drawChart関数

function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     8],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    8],
      ['Exercise', 2]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
  • var data = google.visualization.arrayToDataTable([...]);: 配列をGoogle Chartsのデータテーブルに変換します。配列の各行が円グラフのセグメントを表します。
 ['Task', 'Hours per Day']: 列ヘッダー。
 ['Work', 8]: "Work"に費やす時間が8時間であることを示します。
  • var options = { title: 'My Daily Activities' };: グラフのオプションを設定します。ここでは、グラフのタイトルを設定しています。
  • var chart = new google.visualization.PieChart(document.getElementById('piechart'));: piechartというIDを持つHTML要素に円グラフを描画するためのChartオブジェクトを作成します。
  • chart.draw(data, options);: データとオプションを使用して円グラフを描画します。

ボディ部分

</head>
<body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

<div id="piechart" style="width: 900px; height: 500px;"></div>: グラフが描画される場所を示すためのHTML要素。幅900px、高さ500pxに設定されています。

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

すべてのファイルが準備できたら、Flaskアプリケーションを実行します。ターミナルで以下のコマンドを実行してください。

python app.py

これで、ブラウザで http://127.0.0.1:5000/ にアクセスすると、Google Chart Toolsを使った円グラフが表示されるはずです。

表示結果

スクリーンショット 2024-07-24 14.40.56.png

まとめ

以上が、PythonとGoogle Chart Toolsを使ったシンプルな円グラフアプリケーションの作成方法です。Google Chart Toolsは非常に強力で、さまざまな種類のグラフを簡単に作成できます。ぜひ試してみてください！

もしこの記事が参考になりましたら、いいねやコメントをいただけると嬉しいです。それでは、楽しいコーディングライフを！

Discussion