使用 Altair 从 Json 文件读取数据并将图表保存到 html

Question

我在 jupyter notebook 上使用 altair，我试图将 pandas 数据帧转换为 json 文件，然后再将其传递给 Altair 图表。我想将最终图表保存为 html 文件。

import altair as alt
alt.renderers.enable('notebook')
alt.data_transformers.enable('json')
from vega_datasets import data

url = 'data.json'
cars = data.cars()
cars.to_json(url, orient='records')

charts1=alt.Chart(url).mark_circle(size=60).encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
color='Cylinders:O',
tooltip=['Name:Q', 'Origin:N', 'Horsepower:Q', 'Miles_per_Gallon:Q']
).interactive()

charts1.save('cars1.html')


charts2=alt.Chart(cars).mark_circle(size=60).encode(
x='Horsepower:Q',
y='Miles_per_Gallon:Q',
color='Cylinders:O',
tooltip=['Name:Q', 'Origin:N', 'Horsepower:Q', 'Miles_per_Gallon:Q']
).interactive()

charts2.save('cars2.html')

charts1 | charts2

charts1 和 charts2 都在 jupyter notebook 中正确显示，但是当我在浏览器中打开它时只有 cars2.html 正确显示。 cars1.html 只是一个空的白框。我的语法错了吗？我在 python3.6，Altair 版本：'2.2.2'，Jupyter：'4.3.0'。

Answer 1

对于 chart1，数据存在于单独的文件 (data.json) 中，浏览器必须可以访问该文件，以便浏览器在图表中呈现数据。如果数据文件不可访问（要么是因为它位于错误的 URL，要么是由于跨域问题），那么结果将是一个空白图表。

要确定问题所在，请打开浏览器的 javascript 控制台并检查错误是什么。

例如，如果您从 file:// URL 查看图表，如果您的浏览器具有严格的跨源策略，则数据可能无法访问。尝试通过本地网络服务器查看文件（您可以使用 python -m http.server）。

使用 Altair 从 Json 文件读取数据并将图表保存到 html

Read data from a Json file and save chart to html using Altair

python-3.x

jupyter

altair