Question

我试图在Django 1.11版的主视图中显示一些图表。我做了一些测试，通过输入一些警报（＆＃34;成功＆＃34;）检查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库可能出错。任何发现此错误的想法，建议或新提议都是受欢迎的。

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

Charts.js 2.5不会显示在django中

1 个答案: