Question

我在jupyter笔记本上使用altair，在此之前我尝试将熊猫数据帧转换为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

在jupyter笔记本中正确显示Chart1和Chart2，但是在浏览器中打开时，只能正确显示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

1 个答案: