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

來源

2017-09-14 Nimra Waseem

從錯誤來看，我認爲下面的代碼行無法找到任何HTML元素ID爲「畫布」：

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

可以檢查你的PHP代碼生成HTML元素<canvas id="canvas"></canvas>是否正確？

來源

2017-09-14 07:14:00

我想問題是你的js在HTML加載之前運行。或簡單地把你的js後。這是行得通的。

來源

2017-09-14 07:21:16

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

回答

相關問題