知識の枝

"All is well"

Djangoでグラフ・チャートを表示する

約184日前 2021年5月26日22:00
デジタル
Django Python HTML

改訂履歴


2021/5/26 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回はDjangoで使えるグラフ・チャート作成ライブラリを紹介します。


2. ゴール


マネジメントアプリの日程をガントチャートで表示する。


3. はじめに


この記事を参考にさせて頂きました!ありがとうございました!
Plotlyで作るグラフをDjangoで使う

上記の記事タイトルにあるよう「Plotly」というPythonライブラリを使用します。

Plotlyは作成したグラフデータをhtml用のdivタグで囲んだ形で出力できる為、Djangoと相性が良いです。



Djangoに導入する方法を解説します。


4. PlotlyとDjango


4.1 - インポート


Djangoの中で使う為、まずはインポートしましょう。
views.pyの中に書きます。

from plotly.offline import plot
from plotly.tools import FigureFactory as ff


pipインストールも済ませておきましょう。
pip install plotly


インポートする必要はありませんが、python環境にnumpyが入っている必要があります。
未導入でしたら同様に「pip install NumPy」しておきましょう。


4.2 - views.py


具体的な処理を記述していきます。

表示させるモデルの例は下記の「Large」モデルとします。
models.py
class Large(models.Model):
"""大項目"""

"""フィールド定義"""
target_project = models.ForeignKey(Project, verbose_name='対象のプロジェクト', on_delete=models.CASCADE)
title = models.CharField(verbose_name='大項目', max_length=50)
start = models.DateField(verbose_name='いつから')
finish = models.DateField(verbose_name='いつまで')
note = models.TextField(verbose_name='備考', blank=True, null=True)
url_1 = models.CharField(verbose_name='URL', max_length=255, blank=True, null=True)
url_2 = models.CharField(verbose_name='URL', max_length=255, blank=True, null=True)
url_3 = models.CharField(verbose_name='URL', max_length=255, blank=True, null=True)
uuid = models.UUIDField(default=uuid.uuid4, editable=False)

def __str__(self):
return str(self.title)


このモデルをグラフ化します。

views.py
"""前処理"""
"""チャート作成"""
larges = Large.objects.all() #グラフに表示するモデルデータ
df = []
for ms in larges: #ms:マイルストーン
df.append(
dict(Task=ms.title,
Start="{0:%Y-%m-%d %H:%M:%S}".format(ms.start),
Finish="{0:%Y-%m-%d %H:%M:%S}".format(ms.finish),)
)
"""モデルが空の場合エラーが発生する為、except処理を行う"""
try:
fig = ff.create_gantt(df, title="日程", bar_width=0.3, showgrid_x=True, showgrid_y=True, height=500)
plot_fig = plot(fig, output_type='div', include_plotlyjs=False)
except:
plot_fig = "<div>No chart</div>"
"""チャート作成終了"""


データのキモとなるのは、真ん中あたりの
「Task」、「Start」、「Fiish」の3つです。

Taskにはグラフに表示するバーの名前
Startには項目の開始日
Finishには項目の完了日
を指定します。


下記はグラフを作成するコードです。
fig = ff.create_gantt(df, title="日程", bar_width=0.3, showgrid_x=True, showgrid_y=True, height=500)
このとき、グラフに渡すデータが空だとエラーが出ますのでtry, exceptを使用しています。

htmlに渡す形式(div)で生成します。
plot_fig = plot(fig, output_type='div', include_plotlyjs=False)


except文は「データが空だったときの処理」を書きます。
plot_fig = "<div>No chart</div>"
html上に「No Chart」と表示されるようにしています。

あとは変数「plot_fig」をhtmlテンプレートに渡せば完了です。
views.py
context = {
'chart': plot_fig,
}

return render(request, template, context)



html
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
{% autoescape off %}
{{chart}}
{% endautoescape %}
そのまま「{{ chart }}」をhtmlに渡すと<div>タグがエスケープされてしまうので、テンプレートタグで回避します。

また、<body>タグ内のどこかに<script>文を入れておいて下さい。
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


これで無事表示されると思います!


5. さいごに


グラフ・チャートを使っておしゃれな画面を作成しましょう。