当前位置：首页 > 文章列表 > 文章 > 前端 > 用Altair生成独立JS图表文件教程

用Altair生成独立JS图表文件教程

2025-09-17 13:22:48 0浏览收藏

从现在开始，努力学习吧！本文《用 Altair 生成独立 JS 图表文件方法》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

从 Python Altair 图表生成独立的 JavaScript 文件

第一段引用上面的摘要：本文介绍了如何使用 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 的代码块，并将其提取出来。

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 文件中仍然有效。