图表.js与Django项目集成

Question

新手图表.js还有Django。好像我让它工作了，但没有我想要的那么好。我想把Django方面的两个计算结合起来：

我的视图.py地址：

def graph(request):
bug_all = BugTable.objects.filter()
bug_all_total = bug_all.count()

bug_posted = BugTable.objects.filter(
    status=BugTable.BUG_POSTED)
bug_posted_total = bug_posted.count()

context = {'bug_all_total': bug_all_total,
           'bug_posted_total': bug_posted_total}

return render(request, 'graph.html', context)

我的图形.html你知道吗

<canvas id="Bug-status-bar" class="col-md-6"></canvas>
<script  THERE GOES CHART CDN LINK></script>
<script type="text/javascript">
var ctx = document.getElementById('Bug-status-bar');
var dataArray = [{{bug_all_total|safe}}, {{bug_posted_total|safe}}]
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['All', 'Posted', 'Pending', 'Fixed'],
    datasets: [{
        label: 'Statistic on bug activity',
        data: dataArray,
        backgroundColor: [
            'rgba(255, 99, 132, 0.4)'
            'rgba(54, 162, 235, 0.2)',
        ],

        borderColor: [
            'rgba(255, 99, 132, 1)'
            'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});
</script>

当我把其中一个元素（bug\u all\u total或bug\u posted\u total）放到图形.html数据部分它工作得很好，但由于某些原因，如果我把它们都放进去，它就不工作了。有什么建议吗？感谢您的帮助。你知道吗

Answer 1

一切看起来都很好，只是在rgba字符串后面少了几个逗号。你知道吗

请尝试以下操作：

var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['All', 'Posted', 'Pending', 'Fixed'],
    datasets: [{
        label: 'Statistic on bug activity',
        data: dataArray,
        backgroundColor: [
            'rgba(255, 99, 132, 0.4)',    // <  
            'rgba(54, 162, 235, 0.2)',
        ],

        borderColor: [
            'rgba(255, 99, 132, 1)',     // < -
            'rgba(54, 162, 235, 1)',
        ],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});