かえるのプログラミングブログ

プログラミングでつまずいたところとその解決策などを書いていきます。

chart.js + Flask で円グラフをWEB上に表示する。　2018/8/5

かえるるる（＠kaeru_nantoka）です。

今回は, Flask + chart.js で円グラフを20分でWEB上に表示することができたので備忘としてまとめておきます。


＊目次

１：コードと解説

２：何ができるようになるの？

３：参考URL



＊内容

１：さっそくコードです。今回のディレクトリ構成は以下の通りです。

FlaskProject/server.py
/templates/index.html

＊

#server.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.debug = True
    app.run(host='0.0.0.0', port=7777)

はい、たったこれだけ（8行）で localhost:7777 に index.htmlを表示することができます。
びっくりですね！

同じPythonフレームワークのDjangoでいうと、

3行目・・・urls.py
4~5行目・・・views.py
6~8行目・・・setting.py

の役目をそれぞれ担当しており、それらが1ページにまとまっているという構成になっています。
ちなみに、render_template()はtemplatesフォルダに置いてあるhtmlファイルを表示してくれます。

＊ /templates/index.html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Chart.js + flask</title>
    <meta charset="UTF-8">
  </head>
  <body>

    <h1>Chart.js + flask</h1>

    <div style="width: 50%">
      <canvas id="pie-chart" height="300" width="450"></canvas>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

  　<script>

      //http://vdeep.net/chart-js 参照

                var pieData = [
          {
            value: 37,
            color:"#9acce3",
            highlight: "#aadbf2",
            label: "現預金"
          },
          {
            value: 25,
            color: "#70b062",
            highlight: "#7fc170",
            label: "国内債券"
          },
          {
            value: 17,
            color: "#dbdf19",
            highlight: "#ecef23",
            label: "国内株式"
          },
          {
            value: 10,
            color: "#a979ad",
            highlight: "#bb8ebf",
            label: "外国債券"
          },
          {
            value: 8,
            color: "#cd5638",
            highlight: "#e2694a",
            label: "外国株式"
          },
          {
            value: 3,
            color: "#cd56ab",
            highlight: "#e269df",
            label: "REIT"
          }


          ];

          window.onload = function(){
          var ctx = document.getElementById("pie-chart").getContext("2d");
          window.myPie = new Chart(ctx).Pie(pieData);
          };
    </script>
  </body>
</html>

今回は個人の保有資産データを視覚化してみました。
以下の写真のような表示になります。


f:id:kaeru_nantoka_py:20180805013750p:plain

ポイントは、