升级Python Bokeh至0.12.4后遇JSON类型错误求解决方案

嘿，我刚好碰到过类似的问题！升级Bokeh到0.12.4后在Flask嵌入场景里踩过这个JSON类型的坑，给你几个简易的修复步骤，亲测有效：

核心原因 #

这个错误本质是Flask模板默认会转义HTML/JS内容，导致Bokeh生成的脚本被转义后变成了无效的JSON字符串——而Jupyter环境里Bokeh会自动处理转义逻辑，所以没出现这个问题。另外Bokeh 0.12.4对JSON序列化的要求比之前版本更严格，这也放大了这个问题。

简易修复方案 #

1. 检查视图函数的components()调用 #

确保你在Flask视图里正确生成Bokeh的脚本和div组件：

from bokeh.embed import components
from bokeh.plotting import figure
from flask import render_template

# 生成你的Bokeh图表
p = figure(title="示例图表")
p.circle([1,2,3], [4,5,6])

# 生成嵌入所需的script和div
script, div = components(p)

# 把组件传给模板
return render_template('graph.html', script=script, div=div)

2. 修改模板的嵌入代码（关键！） #

打开你的graph.html，确保引用Bokeh的官方CDN资源，并且给script和div变量加上|safe过滤器——这个过滤器会告诉Flask不要转义这些内容，让Bokeh的脚本能正常解析：

<!DOCTYPE html>
<html>
<head>
    <title>Flask + Bokeh</title>
    <!-- 直接用Bokeh官方CDN，无需本地库 -->
    <link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.4.min.css" type="text/css">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.4.min.js"></script>
</head>
<body>
    <!-- 用|safe确保div不被转义 -->
    {{ div|safe }}
    <!-- 用|safe确保脚本的JSON内容正常解析 -->
    {{ script|safe }}
</body>
</html>

3. 额外排查点（如果上面没解决） #

如果你是手动处理Bokeh的JSON数据（比如不用components()而是自己生成JSON），一定要用json.dumps()来序列化，而不是直接转成字符串：

import json
from bokeh.resources import CDN

# 正确序列化图表为JSON
plot_json = json.dumps(p.to_json())
# 获取CDN资源链接
cdn_js = CDN.js_files[0]
cdn_css = CDN.css_files[0]

# 传给模板时同样要在模板里用{{ plot_json|safe }}

验证 #

重启你的Flask服务，刷新页面——这个「JSON object has wrong type string」错误应该就消失了！

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