Как отобразить данные Django на графике Chart.js?

Я так наклонена, так наклонена. Я уже некоторое время пытаюсь работать с chart.js на своем сайте, который я создал на Django. Я хочу построить график по двум полям: Даты и Оценки. Dates - это дата, например, 1/6/2022, score - плавающая величина. Моя проблема в том, что когда я передаю список из python в скрипт, он делает вид, что это что-то отвратительное. Но когда я копирую и вставляю список и помещаю его в данные графика, все нормально. Это не работает только тогда, когда он думает, что это переменная, что просто не имеет никакого смысла, и я не могу найти нигде, что говорит об этом.

views.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)

dates = ['2022-09-27', '2022-09-28'] scores = ['4.33333333333333333', '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>

Любая помощь будет искренне признательна, это сводит меня с ума, и это буквально последнее, что мне нужно сделать.

Вам необходимо заключить контекстные ключи в {{ и }} при ссылке в html. В html dates и scores нужно обновить как {{dates}} и {{scores}}. Вы можете обратиться к docs за дополнительной информацией.

Вернуться на верх