Как показать данные из представлений на chartjs в django?

В данный момент я делаю приложение на 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>

У меня вообще не выводится диаграмма. Я использовал двойные скобки в 3-й строке html, чтобы проверить, нет ли проблем с переносом данных из представлений, но эта часть работает. Не работает только диаграмма, и я не знаю почему. Я очень новичок в Django и еще новее в javascript, так что сейчас я совсем запутался. Пожалуйста, будьте мягче. Любая помощь будет оценена по достоинству. Спасибо!

Вам следует использовать for loop:

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
            }
        }
    }
});
Вернуться на верх