Djangoモデルの日付データをChart.jsのx軸に設定する

はじめに

Djangoで作成したアプリに含まれる日付データをChart.jsのx軸に設定し、

時系列のグラフを描画するにはどうすれば良いのでしょう？具体的に紹介します。

from django.views.generic import TemplateView
from .models import Item                   # 日付型のデータを定義したモデルのクラス名

class ResultView(TemplateView):
    template_name = 'app/result.html'      # グラフ描画するhtml画面
    context_object_name = 'object'
    
    def get_context_data(self, **kwargs):  # html画面に投げる日付データの設定
        context = super().get_context_data(**kwargs)

        # 日付順にデータを並び替えて、日付のカラムをリストで取得
        date_list = list(Item.objects.all().order_by('date').values_list('date', flat=True))

        # 日付データを「YYYY-mm-dd」の文字列に変換
        date_str = [i.strftime("%Y-%m-%d") for i in date_list]

        # 加工した日付データを格納しなおし、html画面に投げる
        context['date'] = date_str
        return context

6, URL遷移の設定 (urls.py)

urls.pyでトップページからグラフ画面に飛べるように設定します。

from django.urls import path
from .views import ResultView

urlpatterns = [
    path('result/', ResultView.as_view(), name='result'),
]

7, 画面にグラフ描画 (result.html)

result.htmlで、日付データをChart.jsのx軸に設定します。

※ 簡便化のためy軸のデータ描画等は省略しています。

<!doctype html>
<html>
    <head>
        <title>Chart.js_xaxis_date_plot</title>
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js'>
        </script>
    </head>
    <body>
    <canvas id='line-chart' height='140px'></canvas>
        <script type='text/javascript'>
            var ctx = document.getElementById('line-chart');
            var myLineChart = new Chart(ctx, {
                type: 'line',
                options: {
                    scales: {
                        xAxes: [{
                            type: 'time',
                                distribution: 'series', <!-- 'linear' もある-->
                                    time: {
                                        parser: 'YYYY-MM-DD', <!-- views.pyで加工した日付文字列 -->
                                        format: 'YYYY-MM-DD', <!-- views.pyで加工した日付文字列 -->
                                        unit: 'day',
                                        displayFormats: {
                                            day: 'M/D'  <!-- 多様な描画方法あり -->
                                        }
                                    },
                                    ticks: {
                                        source: 'labels'
                                    }
                                }]
                            }
                        }
                    });
        </script>
    </body>
</html>

※ distributionやdisplayFormats等の可視化方法は、下記を参照し自分好みにしてください。

www.chartjs.org

おわりに

Djangoモデルの日付データをChart.jsのx軸に設定する方法を紹介しました。

日付データの受け渡しにひと手間掛かりますが、役立てて頂ければ幸いです。

Cream-Kuchenのブログ

Djangoモデルの日付データをChart.jsのx軸に設定する

はじめに

目次

1, 目標: 日付データを描画したグラフ例

2, フォルダ構成

3, 日付型のデータ定義 (models.py)

4, テーブルの日付データ例

5, 日付データの受け渡し (views.py)

6, URL遷移の設定 (urls.py)

7, 画面にグラフ描画 (result.html)

おわりに