1. 背景与需求分析
Python的Altair库是一个功能强大的声明式统计可视化工具，它基于Vega-Lite规范，能够生成高质量的交互式图表。通常，使用chart.save('chart.html')方法会将图表保存为一个完整的HTML文件，其中包含了渲染图表所需的所有HTML结构、CSS样式以及核心JavaScript逻辑。
然而，在某些Web开发场景中，我们可能不需要完整的HTML文件，而仅仅希望获取并重用图表的核心JavaScript代码。例如：
- 模块化开发： 将图表逻辑封装成独立的JS文件，方便在不同的HTML页面或前端框架中按需引入。
- 现有Web项目集成： 将Altair生成的图表作为现有Web应用的一部分，而不是作为一个独立的页面。
- 动态加载： 通过JavaScript动态加载图表，避免页面刷新。
本教程的目标就是演示如何从Altair生成的HTML中，精确地提取出包含Vega-Lite规范和Vega Embed调用逻辑的JavaScript代码，并将其保存为可独立引用的.js文件。
2. 核心原理：HTML字符串解析
Altair生成的HTML文件内部，图表的渲染逻辑通常封装在一个立即执行函数表达式（IIFE）中，该函数接收vegaEmbed作为参数，并在其中定义了Vega-Lite的spec（规范）对象以及调用vegaEmbed来渲染图表的代码。
立即学习“Java免费学习笔记（深入）”；
由于Altair没有提供直接导出纯JavaScript文件的内置功能，最直接有效的方法是利用Python对HTML字符串进行解析和截取。我们可以通过查找JavaScript代码块中特有的标识符（例如vegaEmbed函数的起始和结束位置），来精确地提取出所需的JS代码。
3. 实现步骤
3.1 生成Altair图表并获取HTML字符串
首先，我们需要使用Altair创建一个图表，并将其转换为HTML字符串。chart.to_html()方法可以实现这一点。
import altair as alt
from vega_datasets import data
# 示例数据
source = data.cars.url
# 创建一个Altair图表
chart = alt.Chart(source).mark_circle().encode(
x=alt.X('Horsepower:Q', scale=alt.Scale(nice=False)),
y='Miles_per_Gallon:Q',
color='Origin:N' # 添加颜色编码以丰富示例
).properties(
title='Car Horsepower vs. Miles per Gallon by Origin'
)
# 将图表转换为HTML字符串
html_chart = chart.to_html()
# 可以打印部分HTML内容查看
# print(html_chart[:500])3.2 提取JavaScript代码块
获取到完整的HTML字符串后，下一步是定位并提取出我们需要的JavaScript代码。这个代码块通常以(function(vegaEmbed)开头，并以})(vegaEmbed);结束。我们可以利用Python的str.index()方法来找到这些边界。
# 查找JavaScript代码块的起始和结束位置
# 注意：这些偏移量是根据Altair生成的HTML结构经验得出的，
# 它们旨在精确捕获 `(function(vegaEmbed) { ... })(vegaEmbed);` 整个IIFE。
try:
start_index = html_chart.index('(function(vegaEmbed)')
end_index = html_chart.index('})(vegaEmbed);') + len('})(vegaEmbed);')
# 提取JavaScript代码
js_code = html_chart[start_index:end_index]
print("提取的JavaScript代码片段：")
print(js_code)
except ValueError as e:
print(f"在HTML字符串中未找到预期的JavaScript代码模式：{e}")
print("请检查Altair版本或生成的HTML结构是否发生变化。")示例输出（已清理 data-cfemail 链接）：
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"url": "https://cdn.jsdelivr.net/npm/vega-datasets@2/data/cars.json"}, "mark": "circle", "encoding": {"color": {"field": "Origin", "type": "nominal"}, "x": {"field": "Horsepower", "scale": {"nice": false}, "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json"};
var embedOpt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = (''
+ 'JavaScript Error: ' + error.message + '
'
+ "This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.
"
+ '');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));
})(vegaEmbed);3.3 保存为独立的JS文件
将提取出的JavaScript代码保存到一个.js文件中非常简单，只需使用Python的文件写入操作即可。
output_js_filename = 'mychart.js'
with open(output_js_filename, 'w', encoding='utf-8') as f:
f.write(js_code)
print(f"\nJavaScript代码已成功保存到 '{output_js_filename}'")4. 修改目标容器ID
默认情况下，Altair生成的JavaScript代码会查找一个ID为vis的HTML元素来渲染图表：
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));如果您希望在Web页面中使用不同的容器ID（例如ID1），则需要在提取JavaScript代码后进行字符串替换。
# 假设我们已经有了js_code字符串
custom_id = 'myCustomChartContainer'
modified_js_code = js_code.replace("document.getElementById('vis')", f"document 
