如何解决在 Altair 图表中引用本地 .csv 文件
我正在尝试使用 altair 来可视化数据，但我很难以我想要的方式使用它：没有将数据嵌入生成的 .html 图表中，但是通过引用包含数据的本地 .csv 文件。否则，会导致数据重复，从而使所需存储空间增加一倍。
这是我尝试过的：
import os
import altair as alt
import numpy as np
import pandas as pd
# Dummy data.
n = 100
df = pd.DataFrame({
"x": np.arange(n),"y": np.random.randn(n),})
# Using the dataframe directly.
chartdf = alt.Chart(df).mark_line().encode(
x='x:Q',y='y:Q',)
chartdf.save('chartdf.html')
# Now referencing the local .csv file.
filename = "data.csv"
df.to_csv(filename)
directory = os.getcwd()
fullpath = "file://" + os.path.join(directory,filename)
alt.data_transformers.enable('csv')
chartcsv = alt.Chart(fullpath).mark_line().encode(
x='x:Q',)
chartcsv.save('chartcsv.html')
因此，我得到两个 .html 文件。这是 chartdf.html，正确显示了绘图，但将数据存储在源代码中。
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400,"continuousHeight": 300}},"data": {"name": "data-1727235c61a7b22ee660b7640869d48d"},"mark": "line","encoding": {"x": {"type": "quantitative","field": "x"},"y": {"type": "quantitative","field": "y"}},"$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json","datasets": {"data-1727235c61a7b22ee660b7640869d48d": [{"x": 0,"y": 0.2112352635569061},{"x": 1,"y": -0.6297931563725685},{"x": 2,"y": -1.6669551411704615},{"x": 3,"y": -0.8590377939062339},{"x": 4,"y": -2.362675608121853},{"x": 5,"y": 0.1816769959879393},{"x": 6,"y": 0.21964717520484453},{"x": 7,"y": 0.5924276442771413},{"x": 8,"y": 2.062942588202062},{"x": 9,"y": -1.411207827356746},{"x": 10,"y": -2.2266024022172957},{"x": 11,"y": 0.47229354076715996},{"x": 12,"y": -0.14474440245785294},{"x": 13,"y": 0.051738284319541146},{"x": 14,"y": -0.4838552098939953},{"x": 15,"y": 0.29366971719427554},{"x": 16,"y": 0.18361573516404703},{"x": 17,"y": 0.6734430961408209},{"x": 18,"y": -1.6084727160210788},{"x": 19,"y": 0.457742541113758},{"x": 20,"y": -1.4873380353155474},{"x": 21,"y": 0.6118088150042575},{"x": 22,"y": 0.9889323424386781},{"x": 23,"y": -0.4539168151678354},{"x": 24,"y": 0.5438198860906843},{"x": 25,"y": 0.47011997666216776},{"x": 26,"y": -0.7562418295269627},{"x": 27,"y": -0.27690138025681765},{"x": 28,"y": 0.49827375786911876},{"x": 29,"y": 1.0153141593800437},{"x": 30,"y": 1.1782385627274985},{"x": 31,"y": 0.0424730271073153},{"x": 32,"y": -1.4185058816513483},{"x": 33,"y": -1.8114268346098452},{"x": 34,"y": -1.29594887684236},{"x": 35,"y": 0.09894597002376446},{"x": 36,"y": -1.4631390515148475},{"x": 37,"y": -2.1926825852861485},{"x": 38,"y": 1.1519292846453788},{"x": 39,"y": -0.5818573231859363},{"x": 40,"y": -0.02064804413385189},{"x": 41,"y": 0.5006162765747295},{"x": 42,"y": -0.9784096515241409},{"x": 43,"y": 1.7117580547861466},{"x": 44,"y": 0.8677907294763252},{"x": 45,"y": -1.3285577876719292},{"x": 46,"y": 0.385574566953019},{"x": 47,"y": 1.0251802025168757},{"x": 48,"y": 0.2255080418305147},{"x": 49,"y": 0.8012860491915356},{"x": 50,"y": -1.3742866681331305},{"x": 51,"y": -0.5160585231146249},{"x": 52,"y": 1.0086907194824801},{"x": 53,"y": 1.8441072855180702},{"x": 54,"y": 0.10647348146379314},{"x": 55,"y": -0.9950070073653883},{"x": 56,"y": -0.1209797393395647},{"x": 57,"y": 1.2957688874221422},{"x": 58,"y": 1.5377004050922511},{"x": 59,"y": 0.14393885533903575},{"x": 60,"y": -1.440499604914547},{"x": 61,"y": 1.4762530684041733},{"x": 62,"y": 0.3962335303842206},{"x": 63,"y": 0.15195105628021952},{"x": 64,"y": 1.274568257852339},{"x": 65,"y": -1.9517895004128185},{"x": 66,"y": -1.6847841535930692},{"x": 67,"y": 1.3936389293839209},{"x": 68,"y": -0.11370298418438128},{"x": 69,"y": 1.8052343535396553},{"x": 70,"y": -0.3443348662400949},{"x": 71,"y": 0.8838398407281737},{"x": 72,"y": 0.8666912228874258},{"x": 73,"y": 2.33181288689919},{"x": 74,"y": -1.7370617166021098},{"x": 75,"y": -0.8447406898036955},{"x": 76,"y": -0.27812566279331796},{"x": 77,"y": 0.6939513790408266},{"x": 78,"y": 1.2769804660273463},{"x": 79,"y": 1.275176541502504},{"x": 80,"y": -0.3843801173353608},{"x": 81,"y": -0.14199480129344477},{"x": 82,"y": -0.7443885322363791},{"x": 83,"y": 0.392135684892227},{"x": 84,"y": -1.4963957824987753},{"x": 85,"y": -0.05395082651327829},{"x": 86,"y": -1.1640386653528847},{"x": 87,"y": -0.8740477495639896},{"x": 88,"y": 2.367892815244499},{"x": 89,"y": -1.1861757645950304},{"x": 90,"y": 0.4862085488887814},{"x": 91,"y": -1.907728993442288},{"x": 92,"y": 0.6304124541928168},{"x": 93,"y": 1.0704432779754836},{"x": 94,"y": -0.805919444706216},{"x": 95,"y": 0.829176968267078},{"x": 96,"y": 0.16050957366472954},{"x": 97,"y": 1.1663653159345964},{"x": 98,"y": 0.33908181024409456},{"x": 99,"y": -0.04008707863910976}]}};
var embedOpt = {"mode": "vega-lite"};
function showError(el,error){
el.innerHTML = ('<div class="error" style="color:red;">'
+ '<p>JavaScript Error: ' + error.message + '</p>'
+ "<p>This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.</p>"
+ '</div>');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis",spec,embedOpt)
.catch(error => showError(el,error));
})(vegaEmbed);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400,"data": {"url": "file:///Users/MY_USER_NAME_WAS_HERE/Projects/ds-python/utilities/plotlibrary/data.csv"},"$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"};
var embedOpt = {"mode": "vega-lite"};
function showError(el,error));
})(vegaEmbed);
</script>
</body>
</html>实现使用存储在本地文件中的数据的 altair 图表的正确方法是什么？
解决方法
要在 Altair 图表中使用本地数据文件，需要满足两个条件：
- 文件必须指定为对显示图表的前端（即浏览器）有效的 URL
- URL 必须满足浏览器的安全要求（例如，必须满足跨域策略）
不幸的是，确保满足 (1) 和 (2) 的方法在很大程度上取决于您使用的前端（即 JupyterLab 与 Jupyter Notebook 与 Colab 与 Streamlit 与 ...）以及每个前端其中，甚至可能取决于您运行的笔记本/服务器的版本、您使用的浏览器、您启用的浏览器安全设置、您使用的是 http 还是 https，您是否使用广告拦截器、您使用的操作系统、您如何启动笔记本服务器或打开 HTML 文件的准确细节，以及可能还有许多其他变量。
出于这个原因，作为 Altair 的主要作者，我通常不鼓励人们尝试使用本地数据文件，因为很难回答看似简单的问题，例如“如何在 Altair 图表中引用本地 CSV 文件？ ”。
如果您想继续前进，我建议您打开浏览器的 javascript 控制台，在那里您会看到警告或错误，这些警告或错误有助于诊断您如何更改内容以满足上述要求 (1) 和 (2)。自己的设置。如果您想要一些可以正常工作的东西，我建议使用 Pandas 将文件加载到数据框中，然后以这种方式创建图表。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。