代码之家 › 专栏 › 技术社区 › piRSquared

Vega没有一致地呈现规范

altair vega-lite vega python

piRSquared · 技术社区 · 7 年前

脚本

我正在使用Altair用python制作图表。但是,当我将图表保存为HTML并打开文件时,呈现的图表是不同的。特别是,图例在HTML文件中是水平的,而在Jupyter笔记本中呈现时它是垂直的。更重要的是,当我使用在HTML中创建的链接来使用Vega编辑器时,它再次以垂直图例呈现。

使vega lite呈现为垂直图例的HTML缺少什么?

我的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>

如果运行该片段,您将看到一个带有水平图例的图表。如果按照链接进行编辑,您将再次看到一个垂直图例,如下所示:

1 回复 | 直到 7 年前

jakevdp 7 年前

Vega-Lite改变了它在2.5版中呈现传奇的方式。以前,连续的图例是垂直的,在版本2.5和更新版本中,图例是水平的。所以问题的根源在于,在这两种情况下,您使用的是不同版本的Vega Lite。

Jupyter实验室或Jupyter笔记本前端使用的vega lite版本受控制 通过前端扩展 ,它不是牵牛星图书馆的一部分。如果需要更新的渲染器,则可以更新前端扩展(这是 vega-extension 如果你在使用JupyterLab,或者 ipyvega package 如果你使用的是Jupyter笔记本)。

当你打电话 save() 另一方面,它生成的HTML不依赖于前端,而是从web加载最新的javascript库。

如果您想在Vega Lite 2.5或更新版本中明确选择垂直图例方向,可以使用 "legend": {"direction": "vertical"} 在颜色编码中。