0

设想

我正在使用 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>

如果您运行该代码段，您将看到一个带有水平图例的图表。如果您点击链接进行编辑，您将再次看到这样的垂直图例：

在此处输入图像描述

4

1 回答 1

1

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"}在颜色编码中使用。

于 2018-08-03T21:57:47.240 回答