如何在 django 中显示来自 chartjs 视图的数据?

Posted

技术标签:

【中文标题】如何在 django 中显示来自 chartjs 视图的数据?【英文标题】:How to show data from views on chartjs in django? 【发布时间】: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"  ></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 【参考方案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
            
        
    
);

【讨论】:

这仍然不起作用:(

以上是关于如何在 django 中显示来自 chartjs 视图的数据?的主要内容,如果未能解决你的问题,请参考以下文章

Django 和 ChartJS

图表每一侧的chartJS标签

Django chartjs多个图表堆叠

如何在 ChartJs 中隐藏 y 轴线?

如何仅在最后一个栏显示 chartjs 数据标签?

如何使用 JSON 和 ChartJS 制作一个显示某个年龄段人数的饼图?