问如何在django的chartjs视图中显示数据？
EN

Stack Overflow用户

提问于 2021-10-21 11:24:15

回答 1查看 87关注 0票数 0

目前我正在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的第三行使用了双花括号来检查从视图获取数据时是否有问题，但这部分工作正常。这是不起作用的图表，我不知道为什么。我对Django非常陌生，对javascript更是新手，所以我现在很迷茫。请温文点。任何帮助都将不胜感激。谢谢!

chart.js

javascript

html

django

回答 1

Stack Overflow用户

发布于 2021-10-21 12:39:30

您应该为循环使用

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
            }
        }
    }
});