Charts.js 2.5不会在django中显示

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

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

只需添加一些更多的观察，我能看到看到主HTML与H3标签呈现，如果我用dev铬工具检查代码，我能够看到画布，但没有显示图表，这意味着JS库的某些内容可能会出错。任何想法，建议或新的提案发现这个错误是值得欢迎的。

来源

2017-05-22 Alejandro BR

您试图重写一个叫做'jquery'块在主HTML，但没有这样的块在您的基本模板（'header.html'）中。还要考虑在关闭标签前移动脚本标签。 – Selcuk

那么，在这种情况下，我应该在我的header.html文件中添加{％block jquery％}？我在关闭标记之前移动了脚本标记，但我没有成功。 –

我做了一些修改，你是对的@Selcuk！我必须将jQuery内容放入我的header.html文件中。 –

经过@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>

来源

2017-05-22 03:42:31

回答

相关问题