Question

图表存在问题，即我只能在折线图中渲染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代码”

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

在html代码中定义的端点变量（snmp）是渲染我的Restframwork的地方。

请注意，这些数据将通过snmp从设备中收集。但为简单起见，我将它们硬编码在两个代表实际数据的数据集数组中。

我们将一如既往地为您提供帮助。

谢谢

Chartjs和Django-多数据集问题

0 个答案: