chart.js + Flask で円グラフをWEB上に表示する。 2018/8/5
かえるるる(@kaeru_nantoka)です。
今回は, Flask + chart.js で円グラフを20分でWEB上に表示することができたので備忘としてまとめておきます。
*目次
1:コードと解説
2:何ができるようになるの?
3:参考URL
*内容
1:さっそくコードです。今回のディレクトリ構成は以下の通りです。
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を表示することができます。
びっくりですね!
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>
今回は個人の保有資産データを視覚化してみました。
以下の写真のような表示になります。
ポイントは、