使用Chart.js渲染HTML图表显示空白问题求助

你的页面空白主要由两个问题导致，直接看修复说明和代码：

核心问题1：HTML标签未正确闭合 #

原代码里的<head>标签没有添加闭合标签</head>，浏览器解析DOM时会出现结构混乱，这是页面空白的关键原因。

核心问题2：Chart数据集缺少label（非必填但易引发渲染异常） #

虽然Chart.js的dataset不强制要求label，但部分版本可能因缺少该属性导致图表无法正常渲染，建议补上。

修复后的完整代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.2/chart.js"
        integrity="sha512-mq0l9aRxJmpWp47xw5+DBJ0m2pWg8KBuvGn7nMSia050SC7vjYecudIjApBhd3HvFInxjWZOR3lvT7BZNP7iaw=="
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  </head> <!-- 补上闭合的head标签 -->

<body>
<div style="width: 900px; height: 400px;">
    <canvas id="myChart"></canvas>
</div>

<script>
  let labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];
  let itemData = [12, 19, 3, 5, 2, 3];

  const data = {
    labels: labels,
    datasets: [{
        label: '统计数据', // 补上dataset的label属性
        data: itemData,
        backgroundColor: 'rgb(66, 221, 245)'
    }]
  };

  const config = {
    type: 'bar',
    data: data
  };

  const chart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

</body>
</html>

额外排查点 #

1. 确认Flask的render_template指向的HTML文件路径正确，文件名无拼写错误；
2. 打开浏览器F12控制台，查看是否有其他报错（比如Chart.js加载失败提示），若有则检查CDN链接状态。

内容的提问来源于stack exchange，提问作者Kiran