如何解决Django数据无法在Chart.js图表中正常渲染的问题？

方法一：使用Django的json_script过滤器（推荐） #

这种方法安全且能自动处理转义问题，无需修改视图代码，仅调整模板即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>  

{# 用json_script将Python列表转成安全的JSON格式脚本标签 #}
{{ dates|json_script:"dates-data" }}
{{ scores|json_script:"scores-data" }}

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script type="text/javascript">
    // 从生成的脚本标签中解析JSON数据
    const dates = JSON.parse(document.getElementById('dates-data').textContent);
    const scores = JSON.parse(document.getElementById('scores-data').textContent);

    var myChart = new Chart("myChart",{
        type:"line",
        data: {
            labels: dates,
            datasets:[{
                borderColor: "rgba(0,0,0,0.1)",
                data: scores
            }]
        },
        options:{
            responsive: true,
            legend: {
                position: 'top',
             },
        }
    });
</script>

方法二：在视图中将列表转成JSON字符串传递 #

先修改views.py，把列表转成JSON格式字符串：

import json

def progress(response):
    lessons = StudentLessons.objects.get(name=response.user.email)

    scores = []
    dates = []
    for lesson in lessons.lesson_set.all():
        dates.append(str(lesson.date))
        scores.append(str((lesson.accuracy+lesson.speed+lesson.understanding)/3))

    context = {
        # 用json.dumps将Python列表转为JSON字符串
        'dates': json.dumps(dates),
        'scores': json.dumps(scores),
    }

    return render(response, "main/progress.html", context)

再修改模板中的JS部分，用safe过滤器关闭自动转义：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>  

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script type="text/javascript">
    var myChart = new Chart("myChart",{
        type:"line",
        data: {
            labels: {{ dates|safe }},
            datasets:[{
                borderColor: "rgba(0,0,0,0.1)",
                data: {{ scores|safe }}
            }]
        },
        options:{
            responsive: true,
            legend: {
                position: 'top',
             },
        }
    });
</script>

问题原因 #

你原来的代码直接在JS中使用{{ dates }}和{{ scores }}，Django会把Python列表渲染成Python语法的字符串（比如['2022-09-27', '2022-09-28']）。虽然视觉上和JS数组相似，但Django的自动转义可能会把单引号转成'，导致JS解析报错；另外当列表中包含特殊字符时，这种写法会引发更多语法问题。而JSON是JavaScript的子集，用JSON格式传递数据能确保JS正确解析。

内容的提问来源于stack exchange，提问作者Max Smith