chart.js2.9.4でlabelsをテンプレート指定すると表示されない

djangoでchart.jsを使ってグラフを表示する際に、labelsにテンプレート変数を使用すると表示されないという問題があった。二日間悩んだが、解決した。

動かない例

{'labels_list': ['2021-01-27 17:50:29', '2021-01-27 17:50:43', '2021-01-27 17:50:44', '2021-01-27 17:50:48', '2021-01-27 17:51:37', '2021-01-27 22:26:39', '2021-01-27 22:26:42', '2021-01-27 22:41:18', '2021-01-27 22:41:57'], 'temp_list': [23.4, 23.4, 23.4, 23.4, 23.4, 23.4, 23.4, 64.36, 23.4]}

このようなテンプレート変数が与えられたとする。普通であれば以下のようにする。

<script>
var ctx = document.getElementById("temp").getContext("2d");
    var temp = new Chart(ctx, {
        type: "line",
        data: {
          labels: {{ labels_list }},
          datasets: [{
            label: "温度(度)",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            data: {{ temp_list }}
          }],
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'hour'
              }
            }]
          }
        }
    });
</script>

これだと表示されない。dataにだけテンプレート変数を使用すると上手くいく。labelsにテンプレート変数を利用したときのみ上手くいかない。

正しい例

<script>
    var labels = {{ labels_list | safe }};
    var values = {{ temp_list }};
    var ctx = document.getElementById("temp").getContext("2d");
    var temp = new Chart(ctx, {
        type: "line",
        data: {
          labels: labels,
          datasets: [{
            label: "温度(度)",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            data: values
          }],
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'hour'
              }
            }]
          }
        }
    });
</script>

なぜかjavascriptで一度変数として受け取ってやる必要がある。また、そのまま指定するのではなく、' | safe 'を入れてやる必要がある。