はじめに
colabでグラフを作成できたけど、flask上に表示までができない、、、という人も多いのではないでしょうか？
今回はそういった人に向けて、chart.jsを使ってPythonで扱ったデータをブラウザ上でグラフ表示する方法を紹介します！
閑静系イメージは以下になります！
JS
まず、staticフォルダの中にjsフォルダを作成し、そこにgraph.jsファイルを作成しましょう！
そしてこちらのコードをそのままコピペしてください！
graph.js
let title = document.getElementById('chart_title').value;
let target = document.getElementById('chart_target').value;
let dstr = String(document.getElementById('chart_data').value);
let darr = dstr.split(',');
let dlabel = String(document.getElementById('chart_labels').value);
let larr = dlabel.split(',');
let ctx = document.getElementById('myChart').getContext('2d');
let myRadarChart = new Chart(ctx, {
type: 'radar',
data: {
labels: larr,
datasets: [{
data:darr,//app.pyのchart_data
backgroundColor: "rgba(255,0,0,0.2)", // 線の下の塗りつぶしの色
borderColor: "red", // 線の色
borderWidth: 2, // 線の幅
pointStyle: "circle", // 点の形状
pointRadius: 6, // 点形状の半径
pointBorderColor: "red", // 点の境界線の色
pointBorderWidth: 2, // 点の境界線の幅
pointBackgroundColor: "yellow", // 点の塗りつぶし色
pointLabelFontSize: 20,
label: target //app.pyのchart_target
}
]
},
options: {
responsive: true,
title: { // タイトル
display: true, // 表示する
fontSize: 20, // タイトルのフォント
text: title //app.pyのchart_title
},
legend: {
position: 'bottom', // 凡例の表示位置
labels: {
fontSize: 20, // 判例のフォントサイズ
},
},
scale: {
// スケールを隠す。
display: true, // メモリを表示する
ticks: { // 目盛り
min: 0, // 目盛りの最小値
max: 10, // 目盛りの最大値
stepSize: 1, // 目盛の間隔
fontSize: 12, // 目盛り数字の大きさ
fontColor: "purple" // 目盛り数字の色
},
pointLabels: {
fontSize: 20 // チャートラベルのフォントサイズ
},
angleLines: { // 軸（放射軸）
display: true,
color: "maroon"
},
gridLines: { // 補助線（目盛の線）
display: true,
color: "lime"
}
},
}
});
Python
Flaskファイルに以下を記入します
app.py
import os
from flask import (
Flask,
request,
render_template)
app = Flask(__name__)
@app.route('/graph')
def chart_do():
c = {
'chart_labels': "項目1, 項目２, 項目３, 項目４,項目５",
'chart_data': "4, 7, 8, 5, 6",
'chart_title': "グラフサンプル",
'chart_target': "タイトル"
}
return render_template('graph.html', c=c)
if __name__ == "__main__":
app.run(debug=True)
これが大事です！↓
chart_data: →ここにグラフに入れたいデータを配列と似たような形で渡します！←
HTML
base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
{% block header %}
{% endblock %}
<title>Graph Sample</title>
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
graph.html
{% extends 'base.html' %}
{% block header %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
{% endblock %}
{% block content %}
<div class="container">
<div class="row my-4">
<canvas id="myChart"></canvas>
</div>
<input type="hidden" id="chart_labels" name="chart_labels" value="{{ c.chart_labels }}">
<input type="hidden" id="chart_title" name="chart_title" value="{{ c.chart_title }}">
<input type="hidden" id="chart_target" name="chart_target" value="{{ c.chart_target }}">
<input type="hidden" id="chart_data" name="chart_data" value="{{ c.chart_data }}">
</div>
<script type="text/javascript" src="static/js/graph.js"></script>
{% endblock %}
最後に
いかがでしたでしょうか？
何か不明点や編集点などありましたらご連絡ください。
参考記事
グッラフの形状を変えたい場合こちらを参照ください！
https://www.chartjs.org/docs/latest/