vega-lite - 用 VEGA-LITE 绘制多个 "columns"并包含一个图例-6ren

vega-lite - 用 VEGA-LITE 绘制多个 "columns"并包含一个图例

转载作者：行者123 更新时间：2023-12-03 08:03:21

28

4

我有以下最少的数据:

[
    {"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 将为图表生成一个图例，如果有一个编码保证它，例如颜色、形状等。

在绘制多列的情况下，一个有用的模式是使用 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 - 用 VEGA-LITE 绘制多个 "columns"并包含一个图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56425430/

28

4

0

文章推荐： ms-access - VBA Access 检查父表单是否存在

文章推荐： xcode - XCode 'Clean'实际上做什么？

文章推荐： javascript - 使用 Protractor 定位元素指令中的元素

vega - 在 vega 中刷牙/链接(不是 vega-lite)
我正在尝试在 vega 中绘制/链接两个图，更具体地说是一个节点链接图和几个散点图。根据拖动如何处理节点链接图中的信号，我确实走得很远，但还不够... 为了简单起见，我将在此处仅使用两个散点图提供一些
vega - 修改规范中的 Vega 工具提示以显示特定字段
我有一个 Vega 规范，需要修改工具提示: Vega Chart Editor - Donut Chart 如何从此工具提示中删除“startAngle”和“endAngle”？我也可以只添加一个
vega - 如何在 vega 中以编程方式选择项目？
下面是可行的，但是好像不太对 (see live demo) : vg.parse.spec(spec, function(chart) { var view = chart({ el:
vega - 在 Vega 中连接多个数据源
在 Vega 中，我有多个数据源，有时我想将它们一个接一个地合并在一起。例如，给定源 A、B 和 C，有两列 - date 和 value，我可能想创建一个包含 date< 列的组合数据源、value
vega - vega-lite 的详细错误报告
我有一系列转换，它们不是 Vega-Lite 解析器的“ friend ”。有没有办法获得比以下更好/更详细的错误消息: 具体来说:消息Ignoring an invalid transform 确实
vega - 重命名 Vega 图中的图例值并保持颜色一致
我的数据包含 3 列 - 日期、类别和值。该类别是我想扩展的一个短字符串代码，例如“r”=>“常规”，“n”=>“禁止”等，并显示正确的图例字符串。有没有办法让映射 {"r":"regular", "
vega - Vega/Lite 中的动画
我尝试实现类似于 https://vimeo.com/177767802 中所示的动画(2 点 30 分) 我的代码如下: { "data": { "values": [ {"
vega - 重命名 Vega 图中的图例值并保持颜色一致
我的数据包含 3 列 - 日期、类别和值。该类别是我想扩展的一个短字符串代码，例如“r”=>“常规”，“n”=>“禁止”等，并显示正确的图例字符串。有没有办法让映射 {"r":"regular", "
vega - Vega/Lite 中的动画
我尝试实现类似于 https://vimeo.com/177767802 中所示的动画(2 点 30 分) 我的代码如下: { "data": { "values": [ {"
vega - 如何在 vega-lite 中添加引用线？
我有一个时间序列图(简单的折线图)，我想在图中添加一条或多条引用线，以表示边界(类似于 SPC 图表，最小值、最大值和平均值)。这在 Vega-Lite 中可能吗？谢谢。我的图表的链接: EGV
vega - 如何删除 vega(-lite) 图周围的边框？
Vega/Vega Lite 图周围有一个微弱的灰色边框......是否可以通过配置参数删除它，或者我是否需要渲染为 SVG 并使用 CSS 来执行此操作？最佳答案您可以覆盖默认的单元格样式 "c
vega-lite - 如何在 vega 公式变换中使用阶乘 (!)
我正在尝试创建 binomial distribution PMF 的直方图使用 vega js 规范。这通常是如何完成的？ vega expressions不包括用于选择或阶乘的函数，也不包括 s
vega-lite - vega-lite 饼图中按大小排序的弧
我正在尝试创建一个饼图，其中弧按大小(顺时针)排序，但不知道如何排序。看来“theta”中的“sort”参数指向“color”的默认顺序，例如: { "$schema": "https://ve
vega-lite - 如何在 Vega-Lite 中创建分组或成对箱线图？
就像这个: https://www.r-graph-gallery.com/265-grouped-boxplot-with-ggplot2/ 我尝试了刻面、颜色 channel 和构图，但结果并不
vega-lite - 将字符串转换为日期 vega lite 的问题
我试图在折线图中显示一些数据。但是，我的“Harvest_Year”数据(以年为单位的日期，如 2017 年或 2018 年)显示为我认为是一个字符串我从 .csv 文件导入数据，以下是我将字符串更
vega-lite - 如何在 Vega-Lite 中为具有特定颜色的线条着色？
VegaLite 自动分配颜色。金价是蓝色，银价是橙色，感觉不对。如何指定显式颜色 - #F1C40F黄金和 #95A5A6为了银？我也想保留data.values如下面的示例代码 - 作为一组单
vega-lite - 使 Vega-Lite 条形标记相邻
我正在 Vega-Lite(使用 Altair 生成)中绘制条形图。使用 Vega-View API，我编写了一些代码，用户可以在其中选择条形，这会更改这些条形的颜色(以及在应用程序的其他地方做一些其
vega-lite - 是否可以在 vega-lite 中注册命名的自定义配色方案
我想注册一个自定义 Multi-Hue Sequential Color Scheme在织女星精简版。我对文档的阅读是我只能创建 config.range对象来设置自定义色阶，但无法公开插值函数，从
vega-lite - 如何在 Vega Lite 中重命名图例标签？
最近几天我一直在尝试重命名我的 vega-lite 图表上的图例标签。通常，这些标签与其各自的数据字段名称匹配。我有一个案例，我想给它们一个更具描述性的名称，但不重命名原始数据名称。一个简化的例子
vega-lite - 使用数据作为数组而不是 Vega Lite 的表
如何在 VegaLite 中使用数组数据？我想将数据用作数组 dates = [1, 2, 3] prices1 = [1, 2, 1] prices2 = [1.5, 1, 2] 代替 Veg

首页

博学

6Ren·AI

商城

vega-lite - 用 VEGA-LITE 绘制多个 "columns"并包含一个图例