Question

我已将图表JS 2.5实现到我的django应用程序版本1.11中，但我只能看到画布而不是任何条形图，此外，Web浏览器控制台不会显示任何错误，所以这对我来说变得非常困难追查错误。

statistics.html 和 views.py 是我目前正在尝试调试此问题的主要文件。最近没有触及 urls.py 和 header.html 文件，我将它们放在最后。

statistics.html文件：图形实现和JSON对象的检索

{% extends "personal_website/header.html"%}
<script>
{% block jquery %}
var endpoint = '/statistics/data' 
var defaultData = []
var labels = []
$.ajax({
    method: "GET",
    url: endpoint,
    dataType: 'json',
    success: function(data){
        labels = data.labels
        defaultData = data.default
        var ctx = document.getElementById("myChart")
        var myChart = new Chart(ctx, {
            type:'bar',
            data: {
                labels: labels,
                datasets : [{
                    label: '# of votes',
                    data: defaultData,
                }]
            }
        })
    },
    error: function(error_data){
        console.log("error on data")
        console.log(error_data)
    }
})
{% endblock %}
</script>
{% block content %}

<div class ='row'>
<div class="col-sm-12" url-endpoint='{% url "get_data" %}'>
    <h1>Statistics for week 21</h1>
    <canvas id="myChart" width="400" height="400"></canvas>     
</div>
</div>
{% endblock content %}

Views.py

get_data（）用于测试我是否可以通过Web浏览器控制台接收JSON对象。

from django.shortcuts import render
from django.views.generic import View
from django.http import JsonResponse
from django.template.loader import render_to_string
from rest_framework.views import APIView
from rest_framework.response import Response

def index(request):
   return render(request, 'personal_website/home.html')

def statistics(request):
   return render(request, 'personal_website/statistics.html',{})

def get_data(request, *args, **kwargs):
   response_data = {}
   response_data["customers"] = 100
   response_data["sales"] = 40  *12
   return JsonResponse(response_data)

class ChartData(APIView):

   def get(self,request,format=None):
       labels = ["Red","Blue","Yellow","Green","Purple","Orange"]
       default_items = [22,35,12,8,10,9]
       data = {
           "labels": labels,
           "default": default_items,
       } 
       return Response(data)

urls.py

from django.conf.urls import url, include
from . import views
from .views import ChartData, get_data
urlpatterns = [
    url(r'^$', views.index, name='index'), # home
    url(r'^statistics/$', views.statistics, name='statistics'),
    url(r'^statistics/data$', get_data, name='get_data'), 
    url(r'^statistics/chart-data$', ChartData.as_view()), # API View working) ]

<强烈> header.html中

<head>
<title>Statistics</title>
<meta charset="utf-8" />
{% load staticfiles %}
<meta name="viewport" content="width=device=width, initial-scale=1.0">
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
    <div class="row">
       <div class="col-sm-10">
          <h3>Statistics</h3>
       </div>
     </div><hr>
     <div class="well bs-sidebar" id="sidebar">
        <ul class="nav nav-pills nav-stacked">
           <li><a href='/'>Home</a></li>
           <li><a href='/statistics/'>Statistics</a></li>
        </ul>
     </div>
</div>            
<footer>
    <!-- no content for the moment-->   
</footer>   
</body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js">
    </script>
</html>

最后，我看到改变的唯一部分是标签：＆＃39;投票数＆＃39;来自数据集。

代码中缺少什么，所以我可以看到显示的条形图？

欢迎任何帮助，建议，改进，问题。

JSON对象未在图表js：Django中呈现

0 个答案: