django + chart.js。无法在同一个图形上用适当的数据得到两个柱状图。

Question

我是一个相当新的javascript，我不能让一个条形图工作。问题似乎出在chart3数据部分。我不知道如何组织两个语句以获得正确的数据。我已经尝试了所有的方法来让两个值以条形图的形式显示在彼此旁边，但似乎没有任何方法可以做到。有谁能发现我哪里出错了？

DATA.View.py

{'supplier : "ARAGON", average_service_level_implied:-9.24, average_service_level_optimal: 0.495}

view.py

@method_decorator(login_required, name='dispatch')
class SupplierPage(LoginRequiredMixin,APIView):
    def get(self, request, *args, **kwargs):
        query = request.GET.get('search_ress', None)
        context = {}

        if query and request.method == 'GET':
            Supplier = supplier.objects.filter(supplier = query)
            context.update({'Supplier': Supplier})


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

和 chart.js graph

<script>
             $(document).ready(function() {
                 var endpoint = 'items.html'
                 var forecastdata = []
                 var reference = []


                 ;

                 $.ajax({
                         method: "GET",
                         url: endpoint,
                         success: function (data) {


                             reference = data.reference
                             forecastdata = data.forecastdata


                             setChart()
                         },
                         error: function (error_data) {

                             console.log(error_data)
                         }
                     }
                 )
 function setChart() {
                     var ctx = document.getElementById('myChart3').getContext('2d');
     var myChart3 = new Chart(ctx3, {
                         type: 'bar',
                         data: {
                             labels: ["actual service level", "optimal service level"],
                             datasets: [{
                                 label: 'Service level analytics',
                                 data: [

                                    {% for dr in reference %}{{ dr.niveau_service_implicite}}, {% endfor %},


                                     {% for dr in reference %}{{ dr.niveau_service_optimal}}, {% endfor %}

                                 ],


                                 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: {
                                     type: 'linear',
                                     position: 'bottom',
                                     xAxes: [{maxBarThickness: 10}],
                                     yAxes: [{
                                         ticks: {
                                             beginAtZero: true
                                         }
                                     }]
                                 }
                             }
                         }
                     })

Answer 1

可以尝试用setChart()函数传递条形图的2个值，像这样。

function setChart(d1,d2) { 
...
data [ d1 , d2 ]

并且在调用函数的同时就可以进行数值的提取。

reference = data.reference
forecastdata = data.forecastdata
d1 = ...
d2 = ...
setChart(d1,d2)