如何在 django 中显示来自 chartjs 视图的数据？答案

【问题标题】：How to show data from views on chartjs in django?如何在 django 中显示来自 chartjs 视图的数据？
【发布时间】：2021-12-08 13:23:30
【问题描述】：

我目前正在 Django 上制作应用程序，但我不知道如何正确地将数据从视图获取到图表。这是我的视图代码：

def data(request):
nysestuff = nyse.objects.all()
riskappstuff = riskapp.objects.all()
feargreedstuff = feargreed.objects.all()
putcallstuff = putcall.objects.all()
feargreednm = [float(feargreedstuff[i].Fear_Greed/100) for i in range(len(feargreedstuff))]
outputdata = [(float(nysestuff[i].NYSE_Up_Vol) + feargreednm[i] + float(putcallstuff[i].Put_Call) + float(riskappstuff[i].Risk_App))/4 for i in range(len(feargreedstuff))]
yesno = [outputdata[i] > 50 for i in range(len(outputdata))]
labels = [str(nysestuff[i].Daily_NYSE) for i in range(len(nysestuff))]
context= {
    'outputdata': outputdata,
    'labels': labels,
    'yesno': yesno
}
return render(request, 'newapp/index.html', context=context)

我想将输出数据和标签放入图表中。这是我的 html 代码：

<!DOCTYPE html>
<h1>Trial page</h1>
<body>{{labels}}</body>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Chart js-->
    <title>Sample Graph</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
  </head>
  <canvas id="myChart" width="200" height="100"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {{labels}},
        datasets: [{
            label: '# of Votes',
            data: {{outputdata}},
            // backgroundColor: [
            //     'rgba(255, 99, 132, 0.2)',
            //     'rgba(54, 162, 235, 0.2)',
            //     'rgba(255, 206, 86, 0.2)',
            //     'rgba(75, 192, 192, 0.2)',
            //     'rgba(153, 102, 255, 0.2)',
            //     'rgba(255, 159, 64, 0.2)'
            // ],
            // borderColor: [
            //     'rgba(255, 99, 132, 1)',
            //     'rgba(54, 162, 235, 1)',
            //     'rgba(255, 206, 86, 1)',
            //     'rgba(75, 192, 192, 1)',
            //     'rgba(153, 102, 255, 1)',
            //     'rgba(255, 159, 64, 1)'
            // ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

</html>

我根本没有得到图表输出。我在 html 的第 3 行中使用了双括号来检查从视图中获取数据是否存在问题，但该部分有效。这是图表不起作用，我不知道为什么。我对 Django 非常陌生，甚至对 javascript 也很陌生，所以我现在很迷茫。请温柔一点。任何帮助，将不胜感激。谢谢！

【问题讨论】：

头身顺序不对！ html>head>body

标签： javascript html django chart.js

【解决方案1】：

你应该使用for循环：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
                {% for label in labels %} # Here!
                    "{{ label }}",
                {% endfor %}
                ],
        datasets: [{
            label: '# of Votes',
            data: [
                   {% for item1 in invoice_counter_complete_value5 %} # Here!
                      "{{ item1 }}",
                   {% endfor %}
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

【讨论】：

这仍然不起作用:(