如何在 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}} 。 您可以參考文檔以獲取更多信息。