我使用 altair 使用 python 创建图形。所以我使用了以下代码来保存图表。
chart.save('chart.html', embed_options={'actions': False})
我的 chart.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//[email protected]"></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": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/cars.json"}, "mark": "point", "encoding": {"color": {"type": "nominal", "field": "Origin"}, "x": {"type": "quantitative", "field": "Horsepower"}, "y": {"type": "quantitative", "field": "Miles_per_Gallon"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"};
var embedOpt = {"actions": false, "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>
这很好用，我可以毫无问题地看到我的图表。但我需要将其转换为 javascript 文件，以便我可以在需要时调用该脚本。有没有办法获得如下的javascript文件？
mychart.js
----------
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/cars.json"}, "mark": "point", "encoding": {"color": {"type": "nominal", "field": "Origin"}, "x": {"type": "quantitative", "field": "Horsepower"}, "y": {"type": "quantitative", "field": "Miles_per_Gallon"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json"};
var embedOpt = {"actions": false, "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);
我的意图是如下使用，然后我可以轻松地从不同的文件中调用它。
<div id="vis"></div>
<script src="mychart.js"></script>
更新：-
无论如何在创建 JS 之前更改关键字“vis”？如下所示，
const el = document.getElementById('ID1');
vegaEmbed("#ID1", spec, embedOpt)
.catch(error => showError(el, error));
没有内置函数，所以最简单的可能是根据单词的出现vegaEmbed和偏移量来索引 html 字符串：
import altair as alt
from vega_datasets import data
source = data.cars.url
chart = alt.Chart(source).mark_circle().encode(
x=alt.X('Horsepower:Q', scale=alt.Scale(nice=False)),
y='Miles_per_Gallon:Q',
)
html_chart = chart.to_html()
# These offsets will be the same for any chart
start = html_chart.index('vegaEmbed') - 10
end = html_chart.index('vegaEmbed);') + 11
print(html_chart[start:end])
# Out
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"url": "https://cdn.jsdelivr.net/npm/[email protected]/data/cars.json"}, "mark": "circle", "encoding": {"x": {"field": "Horsepower", "scale": {"nice": false}, "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json"};
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);
然后，您可以像普通文本文件一样将该字符串变量写入磁盘。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句