Charts.js 2.5 在 django 中不显示答案

【问题标题】：Charts.js 2.5 does not display in djangoCharts.js 2.5 在 django 中不显示
【发布时间】：2017-05-22 00:07:01
【问题描述】：

我正在尝试使用 Django 1.11 版在我的主视图中显示一些图表。我做了一些测试，通过输入一些警报（“成功”）来检查 JS 库是否正常工作，但警报没有出现在我的浏览器中（Chrome 版本 58）。

主 HTML 文件：

{% extends "personal_website/header.html"%}
<script>
{% block jquery %}
var endpoint = 'statistics' 

//Code to display the charts
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 %}
// end of code to display charts
</script>

{% block content %}

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

header.html

<head>
    <title>Statistics</title>
    <meta charset="utf-8" />
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'personal_website/css/bootstrap.min.css' %}" type = "text/css"/>
<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>

再添加一些观察，我可以看到渲染了 H3 标签的主 html，如果我使用 dev chrome 工具检查代码，我可以看到画布但没有显示图表，这意味着 JS 库可能有问题。欢迎任何发现此错误的想法、建议或新提议。

【问题讨论】：

您正试图在您的主 HTML 中覆盖一个名为 jquery 的块，但在您的基本模板 (header.html) 中没有这样的块。还可以考虑将 script 标签移到关闭 </body> 标签之前。
那么，在这种情况下，我应该在我的 header.html 文件中添加一个 {% block jquery %} 吗？我在关闭

标签： javascript jquery html django charts

【解决方案1】：

在@Selcuk 提出一些更正和建议后，我最终得到了以下结果，这些结果对于查看显示的图表是必要的。

主 HTML 未修改

{% extends "personal_website/header.html"%}
<script>
{% block jquery %}
var endpoint = 'statistics' 

//Code to display the charts
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 %}
// end of code to display charts
</script>

{% block content %}

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

头html文件修改

<head>
<title>Statistics</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal_website/css/bootstrap.min.css' %}" type = "text/css"/> <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>
<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>   
<script>
    {% block jquery %}
    {% endblock %}
</script>
</body>
</html>

【讨论】：