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

Question

我在一个jupyter笔记本上使用altair，在将它传递给Altair图表之前，我试图将一只熊猫的数据转换为json文件。我想将最终图表保存为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笔记本中都是正确显示的，但是当我在浏览器中打开它时，只有cars2.html才能正确显示。just只是一个空的白框。我的语法有错吗？我在python3.6，牛版：'2.2.2'，木星：'4.3.0‘。

Answer 1

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

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

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