时间戳

首页 > 解决方案 > Vega 中的多值工具提示

vega - Vega 中的多值工具提示

问题描述

我正在使用 Vega（不是 vega-lite，因为我使用的是 vega-lite 不支持的树形图）。

在上面链接的示例中，我在悬停时添加了一个工具提示，因此您可以看到每个小框是什么：

    ...
    {
      "type": "rect",
      "from": {"data": "leaves"},
      "encode": {
        ...
        "hover": {
          "tooltip": {"field": "name"},  // What I added
          "fill": {"value": "red"}
        }
      }
    },
    ...

这非常适合在工具提示中显示名称，但我想显示多个字段，我无法弄清楚它们的语法。我尝试过类似的东西：

    tooltip: [{"field": "name"}, {"field": "depth"}]  // Doesn't work
    tooltip: {"field": ["name", "depth"]}  // Also doesn't work

格式化的字符串也可以，但我也不知道格式化是如何工作的：

    tooltip: "datum['name'] is depth datum['depth']"  // Doesn't work

Marks -> Rect 文档有些无益地将“工具提示”的类型定义为“Any”（我什至不确定该文档是否适用，因为我的工具提示实际上在rect的encode->子对象中。hover

有没有办法显示多个工具提示值？

标签： vega

解决方案

就在这里！同样，这是很难找到任何文档的事情之一。但这是我如何实现这一目标的一个例子。

....

encode: {
  enter: {
    tooltip: {
      signal: "{'Title1': datum.field1,
                'Title2': datum.field2,
                'Title3': datum.field3}"
    }

...

你也很亲近！出于某种原因，您只需将其定义为一个大信号，然后您就可以访问当前数据。

我知道这是不带引号的（我使用 Kibana 编辑器），因此您可能需要稍微尝试一下语法。

推荐阅读