django + диаграмма. js: невозможно получить две гистограммы на одном графике с соответствующими данными - PullRequest
Новая
       6

django + диаграмма. js: невозможно получить две гистограммы на одном графике с соответствующими данными

0 голосов
/ 05 мая 2020

Я новичок в javascript и не могу получить гистограмму для тренировки. Проблема, кажется, живет в разделе данных диаграммы3. Я не могу понять, как организовать эти два оператора, чтобы получить правильные данные. Я буквально перепробовал все, чтобы иметь возможность отображать два значения рядом друг с другом в столбцах, но, похоже, ничего не может сделать это. Кто-нибудь заметит, что я здесь не прав?

ДАННЫЕ: 

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

и диаграмма. 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
                                         }
                                     }]
                                 }
                             }
                         }
                     })

1 Ответ

1 голос
/ 05 мая 2020

Можно попробовать передать 2 значения полосы с помощью функции setChart (), например: 

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

И извлечение значения может быть выполнено при вызове функции: 

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