Flask项目中外部JS引入Chart.js无法渲染图表求助

你的问题主要出在两个核心点：ES模块下Chart.js的导入方式错误，以及外部静态JS无法解析Flask的Jinja模板变量，以下是具体修复步骤：

1. 修正Chart.js的ES模块导入方式 #

直接导入CDN地址的写法不符合Chart.js的ES模块规范，需要明确导入Chart类并注册必要组件：

// graph.js 修正后的导入代码
import { Chart, registerables } from 'https://cdn.jsdelivr.net/npm/chart.js@4.4.8/+esm';
Chart.register(...registerables);

说明： #

• Chart.js的ES模块版本需要显式注册registerables（包含图表类型、缩放、交互等核心组件），否则无法正常渲染图表
• 指定+esm后缀确保加载的是ES模块版本，而非UMD全局版本

2. 解决Jinja模板变量传递问题 #

外部静态JS文件属于Flask的静态资源，不会被模板引擎解析，因此{{ labels | safe }}这类语法无法生效。需要从HTML页面将数据传递到JS：

步骤1：在HTML中挂载全局数据 #

在引入graph.js前，添加脚本将Jinja变量挂载到window全局对象：

<!-- HTML中新增的脚本 -->
<script>
window.chartData = {
  labels: {{ labels | safe }},
  values: {{ values | safe }}
};
</script>

步骤2：在graph.js中使用全局数据 #

替换原来的模板变量引用：

// graph.js 中数据部分的修正
data: {
  labels: window.chartData.labels,
  datasets: [
    {
      label: "Data Points",
      data: window.chartData.values,
      fill: false,
      borderColor: "rgb(75, 192, 192)",
      lineTension: 0.1
    }
  ]
}

完整修正代码 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample chart</title>
</head>
<body>
  <canvas id="lineChart" width="900" height="400"></canvas>

  <!-- 传递Jinja数据到全局 -->
  <script>
    window.chartData = {
      labels: {{ labels | safe }},
      values: {{ values | safe }}
    };
  </script>

  <script type="module" src="{{ url_for('static', filename='js/graph.js') }}"></script>
</body>
</html>

graph.js文件 #

import { Chart, registerables } from 'https://cdn.jsdelivr.net/npm/chart.js@4.4.8/+esm';
Chart.register(...registerables);

const ctx = document.getElementById("lineChart").getContext("2d");
const lineChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: window.chartData.labels,
    datasets: [
      {
        label: "Data Points",
        data: window.chartData.values,
        fill: false,
        borderColor: "rgb(75, 192, 192)",
        lineTension: 0.1
      }
    ]
  },
  options: {
    responsive: false
  }
});

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