Сценарий
Я создаю диаграммы на Python с помощью Altair. Однако, когда я сохраняю диаграммы в HTML и открываю файл, визуализированная диаграмма отличается. В частности, легенда в HTML-файле расположена горизонтально, тогда как при рендеринге в моем Jupyter Notebook она была вертикальной. Более того, когда я использую ссылку, созданную в HTML, для использования редактора Vega, она снова отображается с вертикальной легендой.
Чего не хватает в HTML для рендеринга vega-lite с вертикальной легендой?
Мой код Python
import altair as alt
import json
chart = alt.Chart.from_dict(json.loads("""
{
"config": {"view": {"width": 400, "height": 300}},
"data": {
"values": [
{"X": "Thing1", "Y": "ThatA", "Value": 1},
{"X": "Thing1", "Y": "ThatB", "Value": 3},
{"X": "Thing2", "Y": "ThatA", "Value": 2},
{"X": "Thing2", "Y": "ThatB", "Value": 4}
]
},
"mark": "bar",
"encoding": {
"color": {"type": "quantitative", "field": "Value"},
"x": {"type": "nominal", "field": "X"},
"y": {"type": "nominal", "field": "Y"}
},
"height": 300,
"width": 500,
"$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json"
}"""
))
chart
Отображает как
Сохранить
chart.savechart('test.html')
Производит
<!DOCTYPE html>
<html>
<head>
<style>
.vega-actions a {
margin-right: 12px;
color: #757575;
font-weight: normal;
font-size: 13px;
}
.error {
color: red;
}
</style>
<script src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm//[email protected]"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var spec = {"config": {"view": {"width": 400, "height": 300}}, "data": {"values": [{"X": "Thing1", "Y": "ThatA", "Value": 1}, {"X": "Thing1", "Y": "ThatB", "Value": 3}, {"X": "Thing2", "Y": "ThatA", "Value": 2}, {"X": "Thing2", "Y": "ThatB", "Value": 4}]}, "mark": "bar", "encoding": {"color": {"type": "quantitative", "field": "Value"}, "x": {"type": "nominal", "field": "X"}, "y": {"type": "nominal", "field": "Y"}}, "height": 300, "width": 500, "$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json"};
var embed_opt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = ('<div class="error">'
+ '<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, embed_opt)
.catch(error => showError(el, error));
</script>
</body>
</html>Если вы запустите этот фрагмент, вы увидите диаграмму с горизонтальной легендой. Если вы перейдете по ссылке для редактирования, вы снова увидите вертикальную легенду, подобную этой:
