Charts.js 2.5 wird nicht in Django angezeigt

Ich versuche, einige Diagramme in meiner Hauptansicht mit Django Version 1.11 anzuzeigen. Ich habe einen Test gemacht, um zu überprüfen, ob die JS-Bibliotheken korrekt funktionieren, indem ich eine Warnung ("Erfolg") eintippte, aber die Warnungen erschienen nicht in meinem Browser (Chrome-Version 58).Charts.js 2.5 wird nicht in Django angezeigt

Haupt HTML-Datei:

{% 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>

Nur noch ein paar Bemerkungen hinzufügen, ich bin in der Lage, die wichtigsten html mit den H3-Tags sehen gerendert und wenn ich den Code mit den dev chrome tools anschaue, kann ich die Leinwand sehen, aber es wird kein Diagramm angezeigt, was bedeutet, dass etwas mit den JS-Bibliotheken nicht stimmt. Jede Idee, Vorschlag oder neuer Vorschlag, um diesen Fehler zu erkennen, ist willkommen.

Quelle

2017-05-22 Alejandro BR

Sie versuchen, einen Block zu überschreiben, genannt 'jquery' in Ihrem HTML-Haupt

Haupt HTML nicht geändert, aber es gibt keinen solchen Block in Ihrer Basisvorlage ('header.html'). Ziehen Sie auch in Betracht, die 'script' Tags vor das schließende'' Tag zu verschieben. – Selcuk

Also, in diesem Fall sollte ich eine {% block jquery%} in meiner header.html Datei hinzufügen? Ich habe die Skript-Tags vor dem Schließen verschoben Tag, aber ich habe keinen Erfolg. –

Ich habe einige Änderungen vorgenommen und Sie hatten Recht @Selcuk! Ich musste den jQuery-Inhalt in meine header.html-Datei einfügen. –

Nach einigen Korrekturen und Vorschlägen, die von @Selcuk gemacht wurden, endete ich mit den folgenden Ergebnissen, die notwendig waren, um die angezeigten Graphen zu sehen.

{% 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-Datei modifizierte

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

Quelle

2017-05-22 03:42:31

Charts.js 2.5 wird nicht in Django angezeigt

Antwort

Verwandte Themen