我使用 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 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 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));
uj5u.com熱心網友回復：
沒有內置函式，所以最簡單的可能是根據單詞的出現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 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);
然后，您可以像普通文本檔案一樣將該字串變數寫入磁盤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/485898.html
標籤：javascript Python html 牵牛星
上一篇：如果useEffect偵聽非狀態值，在依賴項的陣列中具有非狀態值會有什么影響？
下一篇：React道具和組件