Javascript chartjs不工作于php页面，但工作于html页面

我正在我的网页上使用chartjs图表。它在html页面上正常工作。但当我在php页面中将它们加载到服务器时，它并没有显示任何图形。 我有两个图，一个是直线图，另一个是带有以下代码的条形图

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>

在控制台中显示此错误

未捕获的TypeError:无法读取null的属性“getContext”

---

从错误判断，我认为以下代码行无法找到id为“canvas”的HTML元素：

---

您能检查PHP代码是否正确呈现HTML元素吗？

我想问题是您的js在加载HTML之前运行。 或者干脆把你的js放在后面。 这是可行的

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