第一段引用上面的摘要： 本文介绍了如何使用 Python 的 Altair 库创建图表，并将其转换为独立的 JavaScript 文件，以便在不同的 HTML 页面中重复使用。文章将演示如何从生成的 HTML 代码中提取 JavaScript 部分，并提供修改 HTML 元素 ID 的方法，以实现更灵活的图表集成。
将 Altair 图表转换为 JavaScript 文件
Altair 是一个基于 Vega-Lite 的 Python 可视化库，它允许用户使用简洁的语法创建各种交互式图表。通常，使用 Altair 创建的图表可以通过 chart.save('chart.html') 方法保存为 HTML 文件。然而，有时我们需要将图表导出为独立的 JavaScript 文件，以便在不同的网页中复用。
以下步骤演示了如何从 Altair 生成的 HTML 代码中提取 JavaScript 代码，并将其保存为 .js 文件：
- 创建 Altair 图表：
首先，使用 Altair 创建你想要的图表。例如：
import altair as alt
from vega_datasets import data
source = data.cars.url
chart = alt.Chart(source).mark_circle().encode(
x=alt.X('Horsepower:Q', scale=alt.Scale(nice=False)),
y='Miles_per_Gallon:Q',
)
html_chart = chart.to_html()- 提取 JavaScript 代码：
由于 Altair 没有直接生成 JavaScript 文件的功能，我们需要从生成的 HTML 代码中提取相应的 JavaScript 代码。 一种简单的方法是找到包含 vegaEmbed 的代码块，并将其提取出来。
立即学习“Java免费学习笔记（深入）”；
start = html_chart.index('vegaEmbed') - 10
end = html_chart.index('vegaEmbed);') + 11
javascript_code = html_chart[start:end]
print(javascript_code)这段代码通过查找 vegaEmbed 字符串在 HTML 代码中的位置，并截取包含图表配置和渲染逻辑的 JavaScript 代码。
- 保存为 JavaScript 文件：
将提取的 JavaScript 代码保存到 .js 文件中。
with open('mychart.js', 'w') as f:
f.write(javascript_code)现在，你已经成功地将 Altair 图表转换为了独立的 JavaScript 文件 mychart.js。
使用 JavaScript 文件在 HTML 中渲染图表
要在 HTML 页面中使用生成的 JavaScript 文件，你需要包含一个具有特定 ID 的 div 元素，并将 JavaScript 文件引入到 HTML 页面中。
<!DOCTYPE html>
<html>
<head>
<title>Altair Chart</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//<a class="__cf_email__" data-cfemail="c5b3a0a2a4ebafaab7a685f1ebee8591fbb6a7" href="/cdn-cgi/l/email-protection">[email protected]</a>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script src="mychart.js"></script>
</body>
</html>在这个例子中，我们创建了一个 ID 为 vis 的 div 元素，并在页面底部引入了 mychart.js 文件。 mychart.js 文件中的代码将使用 vegaEmbed 函数将图表渲染到 ID 为 vis 的 div 元素中。
修改 HTML 元素 ID
如果需要将图表渲染到具有不同 ID 的 HTML 元素中，可以修改 JavaScript 代码中的 document.getElementById() 函数的参数。
例如，要将图表渲染到 ID 为 ID1 的元素中，你需要修改 mychart.js 文件中的以下代码：
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));修改为：
const el = document.getElementById('ID1');
vegaEmbed("#ID1", spec, embedOpt)
.catch(error => showError(el, error));然后，确保你的 HTML 页面包含一个 ID 为 ID1 的元素：
<div id="ID1"></div> <script src="mychart.js"></script>
注意事项
- 确保你的 HTML 页面引入了 Vega 和 Vega-Embed 的 JavaScript 库。 这些库是渲染 Altair 图表所必需的。
- 提取 JavaScript 代码时，请确保截取的代码块完整，包括 (function(vegaEmbed) { ... })(vegaEmbed); 这样的闭包结构。
- 如果你的图表包含数据 URL，请确保这些 URL 在你的 JavaScript 文件中仍然有效。
总结
通过以上步骤，你可以将 Altair 图表转换为独立的 JavaScript 文件，并在不同的 HTML 页面中重复使用。这种方法可以提高代码的复用性和可维护性，并使你的图表更加灵活。记住，需要手动提取 JavaScript 代码，并根据需要修改 HTML 元素 ID，以确保图表能够正确渲染。
