chartjs不工作php页面，而是在html页面上工作。

Question

我在我的网页上使用图表。它在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>

在控制台中，它显示了此错误。

Uncaught :无法读取属性'getContext‘的null

Answer 1

从错误判断，我认为下面的代码行找不到任何带有id“画布”的HTML元素：

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

您能否检查您的PHP代码是否正确地呈现了HTML <canvas id="canvas"></canvas>？

Answer 2

我想问题是js在加载HTML之前运行。或者简单地把你的js放在后面。这是会成功的。