时间戳

首页 > 解决方案 > Django + Chart.js 我这样做对吗？什么都没有被渲染

python - Django + Chart.js 我这样做对吗？什么都没有被渲染

问题描述

#views.py

from django.shortcuts import render
from django.views import View

class home_view(View):
    template_name = "home.html"
    
    def get(self,request,*args,**kwargs):
        request.session.flush() ##fixed an issue (session data corrupted)
        user = request.user
        form = QuestionnaireForm()
        
        context = {
            'user': user,
            'form': form
        }
        return render(request,self.template_name, context)

    def post(self,request, id=None, *args, **kwargs):
        user = request.user
        form = QuestionnaireForm(request.POST)

        if form.is_valid():
            form.save()

        context = {
            'user': user,
            'form': form
        }
        return render(request,self.template_name, context)

class RandomView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'api-chart.html')

#urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url

from pages.views import home_view, RandomView

path('', home_view.as_view(), name='home'),
url(r'^chart/$', RandomView.as_view(), name='test'),

#api-chart.html
{% extends 'base.html' %}

<script>
{% block jQuery %}
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
{% endblock %}
</script>


{% block content %}


        <h1>Hello World</h1>
        
        <canvas id="myChart" width="400" height="400"></canvas>
      

{% endblock %}

#base.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        

        <title>
            Mar_Lode's Django Website
        </title>
        <h1 class="text-center">
           Tally Site
        </h1>
    </head>
    <body class="bg-secondary"> 
        
        <div class="container bg-light min-vh-100 d-flex flex-column">
        {% include 'navbar.html' %}

        <script>
        {% block jQuery %}
        {% endblock %}
        </script>

        {% block content %}
        {% endblock %}
        
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        
    </body>
</html>

我已经尝试了很多东西，但这是页面上的结果： 如果我检查页面，画布就在那里，但实际上没有呈现任何内容。发生了什么？

标签： pythonhtmljsondjangochart.js

解决方案

尝试从jQuery 块中或之前和之后删除<script></script>标签。并且在使用之前导入 Chart.js 和定义。base.htmlapi_chart.htmlid = "myChart"new Chart

<h1>Hello World</h1>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    {% block jQuery %}
        <script>
          var ctx = document.getElementById('myChart')
          var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
              labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
              datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                .....
    {% endblock %}

推荐阅读