python - Vega 没有一致地呈现规范
问题描述
设想
我正在使用 Altair 在 python 中制作图表。但是,当我将图表保存为 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//vega@3.3.1"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-lite@2.4.3"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-embed@3.11"></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>
如果您运行该代码段,您将看到一个带有水平图例的图表。如果您点击链接进行编辑,您将再次看到这样的垂直图例:
解决方案
Vega-Lite 在 2.5 版本中改变了它渲染图例的方式。以前,连续图例是垂直的,而在 2.5 及更高版本中,图例是水平的。所以问题的根源在于您在这两种情况下使用了不同版本的 Vega-Lite。
JupyterLab 或 Jupyter notebook 前端使用的 vega-lite 版本由前端扩展控制,它不是 Altair 库的一部分。如果你想要一个更新的渲染器,那么你可以更新前端扩展(如果你使用 JupyterLab,这是vega-extension,如果你使用 Jupyter notebook,这是ipyvega 包)。
save()
另一方面,当您调用时,它会生成不依赖于前端的 HTML,而是从 Web 加载最新的 javascript 库。
如果您想在 Vega-Lite 2.5 或更新版本中明确选择垂直图例方向,您可以"legend": {"direction": "vertical"}
在颜色编码中使用。
推荐阅读
- python - Python pandas:在遍历数据框时将信息附加到行
- git - AWS Codebuild -- 执行 buildspec.yml 时如何读取提交上的标签?
- excel - Excel - 如何查找具有匹配键的所有值?
- json - 使用 PowerShell 组合嵌套的 Json
- java - Android 条件导入、预处理器宏或替代方案
- javascript - 一个滚动按钮,可滚动到 jquery 中的多个元素
- r - 从两列分配唯一 ID,其中值可以在不同行上以相反的顺序排列
- python - 如何使用 Python 3 获取文件的正确绝对路径?
- python - 上传 .pfx 格式的证书时出现错误
- vba - 使用 VBA 更改 Power Query 中的 SQL 查询