Диаграмма js и django - проблема множественных наборов данных - PullRequest
Новая
       4

Диаграмма js и django - проблема множественных наборов данных

0 голосов
/ 10 апреля 2020

Возникла проблема с моим графиком, из-за которой я могу отобразить только 1 набор данных в моем линейном графике. Я думаю, что проблема заключается в моих представлениях, потому что, если я жестко закодировал значения в моем html напрямую, все работает.

"views.py" 

def get(request, *args, **kwargs):
return render(request, 'dashboard.html', {})

data1 = [28, 89, 50, 94, 45, 67, 78]
data2 = [34, 100, 234, 79, 156, 123, 76]


class ChartData(APIView):
    authentication_classes = []
    permission_classes = []

    def get(self, request, format=None):


    label1 = ['0s', '10s', '20', '30s', '40s', '50s', '60s']
    data = {
           "labels": label1,
           "default1": data1,
           "default2": data2,
           }         

    return Response(data)

"ursl.py" 

from django.urls import path
from . import views
from django.contrib.auth import views as auth_views

urlpatterns = [
    path('data/', views.get, name='data'),
    path('snmp/', views.ChartData.as_view(), name='snmp'),
    ]

"html code" 

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<canvas id="myChart" width="500" height="500"></canvas>


<script>
var endpoint ='/snmp/'
var defaultDatas = []
var defaultDatas1 = []
var labels1 = [];
$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
       labels1 = data.labels1
       defaultDatas = data.default1
       dafaultDatas1 = data.default2
       var ctx1 = document.getElementById('myChart').getContext('2d');
       var myChart = new Chart(ctx1, {
           type: 'line',
           data: {
               labels: labels1,
               datasets: [{
                   label: 'Egress',
                   data: defaultDatas,
                   backgroundColor: ["rgb(255, 99, 132)"]
                   }, {
                   label: 'Ingress',
                   data: defaultDatas1,
                   backgroundColor: ["rgb(177, 126, 253)"],
                   options: {
                     maintainAspectRatio: false,
                    legend: {
                        position: 'left',
                        labels: {
                            boxWidth: 12
                                }
                        }
                 }
             }
         ]
      }
   })
 },


    error: function(error_data){
       console.log("error")
       console.log(error_data)
    }
})
</script>

Переменная конечной точки (snmp), определенная в коде html, - это то место, где отображается моя restframwork.

Просто отметим, что эти данные будут собираться с устройства через snmp. но для простоты я жестко закодировал их в массиве из двух наборов данных, представляющих фактические данные.

Ваша помощь, как обычно, очень ценится.

Спасибо,

...