如何在Chart.js图表上绘制Django数据?

5kgi1eie  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(166)

我是如此的倾斜,如此如此如此的倾斜。在我和Django一起建立的网站上,我已经尝试使用chart.js有一段时间了。我想绘制两个字段:日期和分数。日期是诸如1/6/2022之类的日期,score是一个浮点数。我的问题是,当我将python列表传递给脚本时,它会假装它是一个令人厌恶的东西。但当我复制并传递列表并将其放入图表数据时,它就没事了。只有当它认为它是一个毫无意义的变量时,它才不起作用,而我不能“I don“我找不到任何地方在谈论这件事。
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)

日期=['2022 -09- 27','2022-09- 28']分数=['4.3333333333333333','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>

任何帮助都将受到真诚的感谢,这是让我疯了,这是字面上的最后一件事,我需要做的。

8cdiaqws

8cdiaqws1#

当在js中引用时,你需要用"{{}}"括住上下文关键字。在html中,datesscores需要更新为"{{dates}}""{{scores}}"。确保使用适当的标签和过滤器。你可以参考文档以获得更多信息。

相关问题