Django Chart.js ajax javascript "Ошибка разбора строковых данных"

Question

Я создаю веб-страницу диаграммы через Django и Chart.js (в views.py в Django)

class ChartView(TemplateView):
    template_name = 'graph.html'

    def get_context_data(self, **kwargs):
        context = super(ChartView, self).get_context_data(**kwargs)
        context['labels'] = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
        context['datas'] = [12, 19, 3, 5, 2, 3]
        return context

в html-файле (файл шаблона)

<script>
$( document ).ready(function() {
var data = {
    labels: {{ labels }},
    datasets: [
        {
            label: "Site Registrations in the Last 30 Days",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: {{ datas }}
        }
    ]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);
});
</script>

Рендеринг HTML-страницы имеет ошибку.(Источник страницы выглядит следующим образом)

<script>
$( document ).ready(function() {
var data = {
    labels: [u&#39;Red&#39;, u&#39;Blue&#39;, u&#39;Yellow&#39;, u&#39;Green&#39;, u&#39;Purple&#39;, u&#39;Orange&#39;],
    datasets: [
        {
            label: "Site Registrations in the Last 30 Days",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [12, 19, 3, 5, 2, 3]
        }
    ]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data);
});
</script>

Очевидно, что вы можете видеть, что данные: {{данные}} получают правильное значение.Однако метки: {{метки}} получают неправильные значения.Я не понимаю, как разобрать строку в Ajax / javascript?Пожалуйста, дайте мне знать, как сделать это правильно.Спасибо.

Answer 1

Вместо того, чтобы пытаться выводить весь список меток непосредственно в виде массива Javascript, может быть лучше построить массив Javascript из списка:

var data = {
    labels: [{% for label in labels %}"{{ label }}", {% endfor %}],
...

Answer 2

спасибо за ваше предложение.Я только что перевел из

   python 2.7 to python 3.7

Работает отлично.

Answer 3

Вы должны использовать safe шаблон фильтра.

safe помечает строку как не требующую дальнейшего экранирования HTML перед выводом.

Пример:

{{ labels|safe }}