Bokeh DataTable无法加载求助（Django环境下）

问题核心原因 #

浏览器报错could not resolve type 'DataTable'，本质是Bokeh的DataTable属于交互式组件（Widgets）范畴，默认的Bokeh核心JS库不包含这类组件的定义，必须额外加载对应的Widgets依赖文件，否则浏览器无法识别该组件类型。

分步解决方案 #

1. 补充Bokeh Widgets的JS/CSS依赖 #

在你的Django主模板（base.html或product.html）的<head>标签内，添加与你Bokeh版本匹配的Widgets资源（当前使用版本为3.6.3）：

<!-- Bokeh核心库 -->
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.6.3.min.js"></script>
<!-- 必须添加：DataTable依赖的Widgets库 -->
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.6.3.min.js"></script>
<!-- 可选：添加表格样式文件，优化显示效果 -->
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-3.6.3.min.css">
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.6.3.min.css">

注意：版本号必须和你Python环境中安装的Bokeh版本完全一致，可通过pip show bokeh命令查看本地版本。

2. 修正视图中的变量名错误 #

你的视图代码存在变量名不一致的问题：定义的数据源是product_data，但后续赋值时误用了rating_data，会导致数据源为空，修正后：

data = {
    "Rating Type": list(product_data.values_list('Rating_Type', flat=True)),
    "Year": list(product_data.values_list('Rating_Year', flat=True)),
    "Rating": list(product_data.values_list('Rating', flat=True)),
}

3. 调整局部模板的脚本位置 #

确保Bokeh生成的脚本在DOM元素加载后执行，将脚本放在表格容器之后：

<div id="prod-rating-chart">
    {{ rating_div|safe }}  
</div>

{{ rating_script|safe }}

额外检查点 #

• 如果不使用CDN，需将Bokeh的Widgets相关JS/CSS文件拷贝到Django静态目录，通过{% static %}标签引用。
• 验证前端控制台是否还有其他报错，比如数据源为空、跨域问题等，逐步排查。

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