window.onload中Chart代码报错：Cannot read property 'getContext' of null 求助

阿华AIGC实验室

2026-5-11

Fixing "Cannot read property 'getContext' of null" in Chart.js Initialization

Hey there! Let's break down why your doughnut chart isn't loading and fix this step by step. That error means when your code tries to grab the canvas element with document.getElementById('chart-area'), it can’t find the element—so it gets null instead, and calling getContext() on null throws the error. Here’s how to troubleshoot and resolve it:

Common Reasons & Solutions

1. Double-check your canvas element's ID

First, confirm your HTML has a canvas element with the exact ID chart-area. IDs are case-sensitive, so Chart-Area or chartarea won’t work. Your HTML should look like this:

<canvas id="chart-area"></canvas>

If the ID is misspelled or missing entirely, the browser can’t locate the element—hence the null error.

2. Move your script to the end of the body

While window.onload is supposed to wait for all resources to load, edge cases (like conflicting scripts) can cause it to run before the DOM is fully ready. A more reliable approach is to place your chart initialization script right before the closing </body> tag:

<body>
  <!-- All your other HTML content here -->
  <canvas id="chart-area"></canvas>

  <script>
    var ctx = document.getElementById('chart-area').getContext('2d');
    window.myDoughnut = new Chart(ctx, config);
  </script>
</body>

By the time this script runs, the canvas element is already in the DOM, so getElementById will find it correctly.

3. Use `addEventListener` instead of overwriting `window.onload`

If you need to keep the code in a separate file or rely on the load event, avoid assigning directly to window.onload—this can get overwritten by other scripts that use the same approach. Instead, use addEventListener to attach your load event safely:

window.addEventListener('load', function() {
  var ctx = document.getElementById('chart-area').getContext('2d');
  window.myDoughnut = new Chart(ctx, config);
});

This way, multiple load event handlers can run without overriding each other.

4. Check if the canvas is dynamically generated

If your canvas element is created with JavaScript (instead of hardcoded in HTML), window.onload might run before the canvas is added to the DOM. In this case, initialize the chart after the canvas is created and appended to the DOM:

// Create canvas dynamically
var canvas = document.createElement('canvas');
canvas.id = 'chart-area';
document.body.appendChild(canvas);

// Now initialize the chart
var ctx = canvas.getContext('2d');
window.myDoughnut = new Chart(ctx, config);