chartjsはPHPページは動作しませんが、HTMLページで作業しています

Question

私は自分のWebページでchartjsのグラフを使用しています。それはHTMLページで正しく動作しています。 PHPのページでサーバにロードするとグラフが表示されませんでした。 私は2つのグラフを1つは線であり、もう1つは次のコードを持つ棒です。

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" 
}); 

これは、HTMLのローカルページで非常にうまく動作しています。 以下は私が使用しているjsファイルです。

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

HTMLコードは、グラフコンソールで

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

それがこのエラーを示すを表示します。

Uncaught TypeError: Cannot read property 'getContext' of null

Answer 1

エラーから判断すると、私は次のコード行は、ID「キャンバス」で任意のHTML要素を見つけることができないと思う：

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

PHPコードは、HTML要素<canvas id="canvas"></canvas>をレンダリングするかどうかをチェックできます正しく？

Answer 2

私は、HTMLがロードされる前にjsが実行されていると思います。 または単にあなたのjsを後に置いてください。 これは動作します。