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);
    };

在这个代码中，因为它是同一个页面，所以Pen工作得很好。码本

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); 
  }
};