从谷歌网站上的嵌入式(iframe)片段中,引用存储在谷歌驱动器上的json文件



我正试图在谷歌网站中嵌入一个HTML格式的交互式图表。我用vega lite制作了这个情节。将其从谷歌网站嵌入到谷歌网站中"编辑模式";,我选择Insert>Embed>Embed code,然后简单地将HTML内容粘贴到框中。

vega lite图表采用JSOn格式编码的数据。可以从托管在谷歌驱动器以外的其他地方的JSON文件中读取输入数据,如本例所示:https://vega.github.io/vega-lite/docs/data.html#url.但根据我的经验,vega lite无法从谷歌驱动器上的json文件中读取数据。

所以我的问题是:我可以读取谷歌驱动器上的json文件(私有/共享(以在谷歌网站上显示纯素食主义者的绘图吗?

我希望这是可能的。那太好了。它将大大简化交互式情节的呈现。

举个例子,下面是我在谷歌驱动器中嵌入的使用vega lite生成的HTML文件的内容

<!DOCTYPE html>
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.21.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
description: 'A simple bar chart with embedded data.',
data: {
values: [
{a: 'A', b: 28},
{a: 'B', b: 55},
{a: 'C', b: 43},
{a: 'D', b: 91},
{a: 'E', b: 81},
{a: 'F', b: 53},
{a: 'G', b: 19},
{a: 'H', b: 87},
{a: 'I', b: 52}
]
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal'},
y: {field: 'b', type: 'quantitative'}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>

我想提供存储在谷歌驱动器上的json文件中的数据,并将其提供给datasets字段,即代替

data: {
values: [
{a: 'A', b: 28},
{a: 'B', b: 55},
{a: 'C', b: 43},
{a: 'D', b: 91},
{a: 'E', b: 81},
{a: 'F', b: 53},
{a: 'G', b: 19},
{a: 'H', b: 87},
{a: 'I', b: 52}
]
},

我想从谷歌驱动器上的json文件中获得data,如下所示:

data: "https://drive.google.com/uc?export=view&id=FILE_ID"

这似乎是你在这里的问题的后续:为什么谷歌驱动器的图像没有通过嵌入的html显示在谷歌网站上,使用Altair(vega lite(制作

与前面的答案一样,问题是drive.google.comCORS标头不允许访问其他域的驱动器资源。您可以使用curl打印标题来确认这一点:

$ curl -I https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc
HTTP/2 400 
content-type: text/html; charset=UTF-8
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
cross-origin-opener-policy-report-only: same-origin; report-to="coop_gse_l9ocaq"
<...>

这意味着您无法从另一个域上运行的Javascript访问此文件。这是没有办法的:这是现代浏览器内置的安全功能。

最新更新