javascript - Django + Chart.js : Cannot get two bar charts on the same graph with appropriate data

Question

我对 javascript 相当陌生，我无法获得条形图来锻炼。问题似乎出在 Chart3 数据部分。我不知道如何组织这两个语句以获得正确的数据。我确实尝试了一切方法，以便能够在条形图中相邻显示两个值，但似乎没有任何方法能够实现。有人发现我这里错了吗？

数据:

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

查看.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图表​​

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