chartjs arbeitet nicht auf der php-seite, aber arbeitet auf der html-seite

Question

Ich verwende chartjs charts auf meiner webseite. Es funktioniert ordnungsgemäß auf HTML-Seite. aber wenn ich sie auf der php-seite auf den server lade, hat sie dort keine grafik angezeigt. Ich habe zwei Graphen, eine ist Linie und eine andere ist Bar mit folgendem Code.

var dData = function() { 
    return Math.round(Math.random() * 90) + 10 
}; 

var barChartData = { 
    labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"], 
    datasets: [{ 
    fillColor: "rgba(102, 191, 255, 0.6)", 
    strokeColor: "#07c", 
    data: [dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData()] 
    }] 
} 

var index = 11; 
var ctx = document.getElementById("canvas").getContext("2d"); 
var barChartDemo = new Chart(ctx).Bar(barChartData, { 
    responsive: true, 
    barValueSpacing: 2 
}); 




    var lineChartData = { 
    labels: ["Date 1", "Date 2", "Date 3", "Date 4", "Date 5", "Date 6", "Date 7"], 
    datasets: [ { 
     fillColor: "rgba(102, 191, 255, 0.6)", 
     strokeColor: "#07c", 
     pointColor: "#0095ff", 
     data: [60, 10, 40, 30, 80, 30, 20] 
    }] 

} 

Chart.defaults.global.animationSteps = 50; 
Chart.defaults.global.tooltipYPadding = 16; 
Chart.defaults.global.tooltipCornerRadius = 0; 
Chart.defaults.global.tooltipTitleFontStyle = "normal"; 
Chart.defaults.global.tooltipFillColor = "black"; 
Chart.defaults.global.animationEasing = "easeOutBounce"; 
Chart.defaults.global.responsive = true; 
Chart.defaults.global.scaleLineColor = "silver"; 
Chart.defaults.global.scaleFontSize = 16; 

var ctx = document.getElementById("canvas1").getContext("2d"); 
var LineChartDemo = new Chart(ctx).Line(lineChartData, { 
    pointDotRadius: 10, 
    bezierCurve: false, 
    scaleShowVerticalLines: false, 
    scaleGridLineColor: "silver" 
}); 

Dies funktioniert sehr gut auf der lokalen Seite in HTML. Folgendes ist Js-Datei, die ich dafür verwende.

<script src="http://prosport.guru/ps/assets/js/charts.js"></script> 

Html-Code Diagramme

<div class="row match-height"> 
    <div class="col-xl-6 col-lg-12" style="padding:0px"> 
     <div class="card"> 
      <div class="card-body"> 
       <div class=""> 
        <div style="width: 100%"> 
        <canvas id="canvas1"></canvas> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-xl-6 col-lg-12" style="padding:0px"> 
     <div class="card"> 
      <div class="card-body"> 
       <div style="width: 100%"> 
        <canvas id="canvas"></canvas> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

In Konsole anzuzeigen es zeigt diesen Fehler.

Uncaught TypeError: Cannot read property 'getContext' of null

Answer 1

von dem Fehler zu urteilen, glaube ich, die folgende Codezeile nicht mit der ID "Leinwand" jedes HTML-Element zu finden:

var ctx = document.getElementById("canvas").getContext("2d"); 

Können Sie überprüfen, ob Ihr PHP-Code das HTML-Element machen <canvas id="canvas"></canvas> korrekt?

Answer 2

Ich denke, das Problem ist Ihre js läuft, bevor der HTML geladen wird. Oder setzen Sie einfach Ihre js nach der. Das wird funktionieren.