Chart.js在Bootstrap区块中无法显示图表的问题求助

你按照Chart.js官方文档实现的柱状图无法正常显示，结合提供的代码，以下是可能的原因及解决方法：

相关代码 #

chart.html：

{% extends "base.html" %}

{% block js %}
    <div>
      <canvas id="myChart"></canvas>
    </div>
    <script src="../static/js/try.js"></script>
{% endblock %}

try.js：

import 'https://cdn.jsdelivr.net/npm/chart.js';
const ctx = document.getElementById('myChart');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

问题排查与解决 #

• ES模块未声明：你的try.js使用了ES模块的import语法，但引用脚本的<script>标签没有声明type="module"，浏览器会将其当作普通脚本处理，导致导入失败。
  解决：修改chart.html中的脚本标签：

  <script src="../static/js/try.js" type="module"></script>
  

• Chart对象未正确导入：直接import 'https://cdn.jsdelivr.net/npm/chart.js'不会自动暴露全局的Chart构造函数，需要明确导入该对象。
  解决：修改try.js的导入语句：

  import Chart from 'https://cdn.jsdelivr.net/npm/chart.js';
  

• DOM元素未加载完成：脚本执行时，<canvas id="myChart">可能还未被渲染到DOM中，导致document.getElementById('myChart')返回null，无法初始化图表。
  解决：在try.js中包裹DOM加载完成事件：

  import Chart from 'https://cdn.jsdelivr.net/npm/chart.js';
  
  document.addEventListener('DOMContentLoaded', () => {
    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });
  

• 脚本路径错误：检查../static/js/try.js的路径是否正确，确保浏览器能正确加载该脚本文件（可通过浏览器开发者工具的Network面板查看请求状态）。

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