Question

我有以下基本数据：

[
    {"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>

我没有为每行写一个正确的图例。我想念什么？

Answer 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"}
  }
}

使用VEGA-LITE绘制多个“列”，并包含图例

1 个答案: