Flask应用中JS脚本注入模板变量引发页面空白问题求助

我之前也碰到过一模一样的问题！核心原因其实很简单：Flask直接渲染Python字符串列表时，不会给字符串加上引号，导致JS把这些字符串当成未定义的变量，直接抛出语法错误，中断了整个脚本的执行。

举个例子，你的后端传的labels是["Tech", "Finance", "Healthcare"]，Flask模板直接渲染后，JS里会变成：

var labels = [Tech, Finance, Healthcare];

这在JS里完全不合法——Tech会被当作一个变量名，但你根本没定义过这个变量，浏览器控制台肯定会报ReferenceError: Tech is not defined，脚本一挂，后面的Chart初始化代码也跑不了，页面自然就空白了。而数值列表没问题是因为[5,3,2]在JS里本身就是合法的数组。

解决方案：用Flask的tojson过滤器 #

Flask内置了tojson过滤器，能把Python对象转换成符合JS语法的JSON格式，自动给字符串加上双引号。你只需要修改JS里的变量声明：

var data = {{ values|tojson }};
var labels = {{ labels|tojson }};

然后把Chart配置里的静态labels换成这个变量（既然你传了动态标签，肯定是要用上的）：

data: {
  labels: labels, // 替换原来的['Red', 'Blue', ...]
  datasets: [{
    // ... 其他配置不变
  }]
}

验证一下 #

假设你的distribution是{'Tech': 5, 'Finance': 3, 'Healthcare': 2}，渲染后的JS代码会变成：

var data = [5, 3, 2];
var labels = ["Tech", "Finance", "Healthcare"];

这完全符合JS语法，脚本能正常执行，饼图也会正确渲染出来。

另外提一句：哪怕你没在Chart里用到labels变量，只要脚本里出现了var labels = [Tech, Finance];这种非法代码，浏览器在解析脚本时就会直接报错终止，所以页面才会空白——这也是为什么你说“仅声明labels变量就触发错误”的原因。

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