Chartjs.org圖表只顯示在一個頁面中

Question

我的圖表在同一頁面上運行良好，但是當我放在不同的頁面上時，只有第一個工作正常。

例如： Page1.html

<div class="wrapper"> 
    <canvas id="pieChart" width="200px" height="200px"></canvas> 
</div> 

Page2.html

<div class="wrapper"> 
    <canvas id="lineChart" width="200px" height="200px"></canvas> 
</div> 

JS

 

    //page1.html 
    //piechart 
    var pieVar = { 
     type: 'pie', 
     data: { 
     labels: ["Yes", "No"], 
     datasets: [ 
      { 
       data: [60, 40], 
       backgroundColor: [ 
        "#FF6384", 
        "#36A2EB" 
       ], 
       hoverBackgroundColor: [ 
        "#FF6384", 
        "#36A2EB" 
       ] 
      } 
     ] 
    }, 
     options: { 
      scales: { 
       xAxes: [{ 
        display: true 
       }] 
      } 
     } 
    } 

    //page2.html 
    //line chart 
    var lineVar = { 
     type: 'line', 
     data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [ 
      { 
       label: "My First dataset", 
       fill: true, 
       lineTension: 0.2, 
       backgroundColor: "rgba(75,192,192,0.4)", 
       borderColor: "rgba(75,192,192,1)", 
       borderCapStyle: 'butt', 
       borderDash: [], 
       borderDashOffset: 0.0, 
       borderJoinStyle: 'miter', 
       pointBorderColor: "rgba(75,192,192,1)", 
       pointBackgroundColor: "#fff", 
       pointBorderWidth: 1, 
       pointHoverRadius: 10, 
       pointHoverBackgroundColor: "rgba(255,0,0,1)", 
       pointHoverBorderColor: "rgba(255,0,0,1)", 
       pointHoverBorderWidth: 2, 
       pointRadius: 1, 
       pointHitRadius: 10, 
       data: [65, 59, 80, 81, 56, 55, 40], 
       spanGaps: false, 
      } 
     ] 
    }, 
     options: { 
      scales: { 
       xAxes: [{ 
        display: true 
       }] 
      } 
     } 
    } 

    window.onload = function(){ 
     //piechart 
     var pieCtx = document.getElementById("pieChart"); 
     var myPieChart = new Chart(pieCtx, pieVar); 
     //linechart 
     var lineCtx = document.getElementById("lineChart"); 
     var myLineChart = new Chart(lineCtx, lineVar); 
    }; 

在這種codepen工作得很好，因爲它是在同一頁.. CODEPEN

Answer 1

聽起來好像你正在兩個頁面中加載相同的JavaScript文件（其中包含你的兩個圖表的配置）。問題在於，由於您使用的是具有兩個圖表定義的單個JavaScript文件，因此您嘗試創建的圖表在html中不存在，因爲您傳遞的是空的上下文，所以會引發錯誤。

window.onload = function(){ 
    //piechart (this will be null on page2.html) 
    var pieCtx = document.getElementById("pieChart"); 

    // You are passing in a null pieCtx on page2.html because there is no element with an id = "pieChart" 
    var myPieChart = new Chart(pieCtx, pieVar); 

    //linechart (this will be null on page1.html) 
    var lineCtx = document.getElementById("lineChart"); 

    // You are passing in a null lineCtx on page1.html because there is no element with an id = "lineChart" 
    var myLineChart = new Chart(lineCtx, lineVar); 
}; 

您應該分裂您的JavaScript文件分成兩個文件，以便在第一頁只包括第一張圖的定義和第二頁只包括第二張圖的定義。或者，添加一些條件來防止嘗試創建空白圖表（如此）。

window.onload = function(){ 
    //piechart (this will be null on page2.html) 
    var pieCtx = document.getElementById("pieChart"); 

    if (pieChart) { 
    var myPieChart = new Chart(pieCtx, pieVar); 
    } 

    //linechart (this will be null on page1.html) 
    var lineCtx = document.getElementById("lineChart"); 

    if (lineChart) { 
    var myLineChart = new Chart(lineCtx, lineVar); 
    } 
};