如何在 Chart.js 图上显示 plot Django 数据？

Question

我是如此倾斜，如此如此倾斜。 在我用 Django 构建的网站上尝试使用 chart.js 有一段时间了。 我想 plot 两个字段：日期和分数。 Dates 是一个日期，例如 1/6/2022，score 是一个浮点数。 我的问题是，当我将 python 列表传递给脚本时，它假装它很恶心。 但是当我复制并通过列表并将其放入图表的数据中时，这很好。 只有当它认为它是一个完全没有意义的变量并且我找不到任何谈论这个的地方时，它才不起作用。

视图.py

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 = {
        'dates':dates,
        'scores':scores,
    }


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

日期 = ['2022-09-27', '2022-09-28'] 分数 = ['4.333333333333333', '6.0'] （来自控制台）显示正确图表的 html

<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: ['2022-09-27', '2022-09-28'],
            datasets:[{
                borderColor: "rgba(0,0,0,0.1)",
                data: ['4.333333333333333', '6.0']
            }]
        },
        options:{
            responsive: true,
            legend: {
                position: 'top',
             },
        }
    });

</script>

html 不工作

<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}},
            datasets:[{
                borderColor: "rgba(0,0,0,0.1)",
                data: {{scores}}
            }]
        },
        options:{
            responsive: true,
            legend: {
                position: 'top',
             },
        }
    });

</script>

任何帮助将不胜感激，这让我发疯，这实际上是我需要做的最后一件事。

Answer 1

在 html 中引用时，您需要用{{和}}括起上下文键。 在 html 中， dates和scores需要更新为{{dates}}和{{scores}} 。 您可以参考文档以获取更多信息。