用 VEGA-LITE 绘制多个“列”并包含一个图例
Posted
技术标签:
【中文标题】用 VEGA-LITE 绘制多个“列”并包含一个图例【英文标题】：Plot multiple "columns" with VEGA-LITE and include a legend 【发布时间】：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>
我没有为每一行提供适当的图例。我错过了什么？
【问题讨论】：
【参考方案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",。
重要问题：如果我们有不同的标记，比如一条线和一个点，我们如何将它们包含在图例中？目前，它只需要一个或另一个，但不是两个！以上是关于用 VEGA-LITE 绘制多个“列”并包含一个图例的主要内容，如果未能解决你的问题，请参考以下文章