用 VEGA-LITE 绘制多个“列”并包含一个图例答案

【问题标题】：Plot multiple "columns" with VEGA-LITE and include a legend用 VEGA-LITE 绘制多个“列”并包含一个图例
【发布时间】：2019-10-18 21:28:21
【问题描述】：

我有以下最少的数据：

[
    {"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
    {"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
    {"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
    {"date": "2019-01-04", "foo": 1000,  "bar": 60, "goo": 20}
]

我使用 VEGA-LITE 绘制的：

<!DOCTYPE html>
<html>

<head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.4.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0"></script>
</head>

<body>
    <div id="vis"></div>

    <script type="text/javascript">
        var yourVlSpec = {
            "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
            "Title": "Insights stats",
            "description": "Overview of insights stats",
            "width": 1000,
            "height": 450,
            "data": {
                "url": "./data.json"
            },
            "layer": [
                {
                    "mark": "line",
                    "encoding": {
                        "x": {
                            "field": "date",
                            "type": "temporal",
                            "title": "Date"
                        },
                        "y": {
                            "field": "foo",
                            "type": "quantitative",
                            "title": "Some Foo"
                        }
                    }
                },
                {
                    "mark": {
                        "type": "line",
                        "stroke": "firebrick"
                    },
                    "encoding": {
                        "x": {
                            "field": "date",
                            "type": "temporal"
                        },
                        "y": {
                            "field": "bar",
                            "type": "quantitative",
                            "title": null,
                            "scale": { "domain": [0, 100] }
                        }
                    }
                },
                {
                    "mark": {
                        "type": "line",
                        "stroke": "red"
                    },
                    "encoding": {
                        "x": {
                            "field": "date",
                            "type": "temporal"
                        },
                        "y": {
                            "field": "goo",
                            "type": "quantitative",
                            "title": "Ratio (%)",
                            "scale": { "domain": [0, 100] }
                        }
                    }
                }
            ],
            "resolve": { "scale": { "y": "independent" } }
        };
        vegaEmbed('#vis', yourVlSpec);
    </script>
</body>

</html>

我没有为每一行提供适当的图例。我错过了什么？

【问题讨论】：

标签： vega-lite

【解决方案1】：

Vega-Lite 将为图表生成一个图例，如果有一个编码保证它，例如颜色、形状等。

在绘制多列的情况下，一个有用的模式是使用Fold Transform，以便通过编码而不是手动分层来指定颜色。结果看起来像这样 (vega editor link)：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "title": "Insights stats",
  "description": "Overview of insights stats",
  "width": 1000,
  "height": 450,
  "data": {
    "values": [
      {"date": "2019-01-01", "foo": 10, "bar": 10, "goo": 30},
      {"date": "2019-01-02", "foo": 30, "bar": 20, "goo": 20},
      {"date": "2019-01-03", "foo": 40, "bar": 20, "goo": 10},
      {"date": "2019-01-04", "foo": 1, "bar": 60, "goo": 20}
    ]
  },
  "transform": [
    {"fold": ["foo", "bar", "goo"]}
  ],
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal"}
  }
}

【讨论】：

很好的解释！对于那些想知道如何将 Legends 名称从“key”更改为其他名称的人，您只需添加 "title": "the title you want",。
重要问题：如果我们有不同的标记，比如一条线和一个点，我们如何将它们包含在图例中？目前，它只需要一个或另一个，但不是两个！