chartjs不工作的PHP页面，但在HTML页面上工作

问题描述：

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

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

答

从错误来看，我认为下面的代码行无法找到任何HTML元素ID为“画布”：

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

可以检查你的PHP代码生成HTML元素<canvas id="canvas"></canvas>是否正确？

答

我想问题是你的js在HTML加载之前运行。或简单地把你的js后。这是行得通的。

chartjs不工作的PHP页面，但在HTML页面上工作

相关推荐