能否为VegaLite图表截断的图例文本添加on-hover提示文本？

Vega-Lite 原生图例配置未直接支持为截断文本添加悬停提示，但可以通过嵌入 Vega 原生配置的方式实现该功能，核心思路是自定义图例元素并绑定悬停事件触发 tooltip。

实现步骤与示例代码 #

以下是适配需求的完整配置，添加了图例悬停显示完整文本的功能：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "非常非常长的类别名称1", "value": 40},
      {"category": "非常非常长的类别名称2", "value": 30},
      {"category": "非常非常长的类别名称3", "value": 20},
      {"category": "非常非常长的类别名称4", "value": 10}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "value", "type": "quantitative"},
    "y": {"field": "category", "type": "ordinal"},
    "color": {"field": "category", "type": "nominal"}
  },
  "config": {
    "legend": {
      "custom": true,
      "encode": {
        "symbols": {
          "update": {
            "fill": {"scale": "color", "field": "value"},
            "stroke": {"value": "transparent"},
            "width": {"value": 15},
            "height": {"value": 15},
            "x": {"value": 0},
            "y": {"signal": "index * 20"}
          }
        },
        "labels": {
          "update": {
            "text": {"field": "value"},
            "x": {"value": 20},
            "y": {"signal": "index * 20 + 8"},
            "fontSize": {"value": 12},
            "align": {"value": "left"},
            "baseline": {"value": "middle"},
            // 绑定悬停事件
            "on": [
              {
                "trigger": "mouseover",
                "modify": "tooltip",
                "values": {"visible": true, "text": {"field": "value"}, "x": {"signal": "event.x"}, "y": {"signal": "event.y"}}
              },
              {
                "trigger": "mouseout",
                "modify": "tooltip",
                "values": {"visible": false}
              }
            ]
          }
        }
      }
    }
  },
  // 原生Vega配置实现tooltip渲染
  "vega": {
    "signals": [
      {
        "name": "tooltip",
        "value": {"visible": false, "text": "", "x": 0, "y": 0},
        "on": [
          {"events": "mouseout", "update": "{visible: false, text: '', x: 0, y: 0}"}
        ]
      }
    ],
    "marks": [
      {
        "type": "text",
        "name": "tooltip-text",
        "interactive": false,
        "encode": {
          "enter": {
            "fontSize": {"value": 12},
            "fill": {"value": "#333"},
            "background": {"value": "#f0f0f0"},
            "padding": {"value": 5},
            "cornerRadius": {"value": 3}
          },
          "update": {
            "text": {"signal": "tooltip.text"},
            "x": {"signal": "tooltip.x + 10"},
            "y": {"signal": "tooltip.y - 10"},
            "opacity": {"signal": "tooltip.visible ? 1 : 0"}
          }
        }
      }
    ]
  }
}

关键说明 #

• 自定义图例：通过config.legend.custom启用自定义图例，手动控制图例符号与文本的渲染逻辑。
• 悬停事件绑定：在图例标签的encode.update.on中绑定mouseover/mouseout事件，更新tooltip信号的显示状态与内容。
• Tooltip渲染：在vega字段中定义原生Vega信号和文本标记，根据tooltip信号的状态动态显示完整文本提示。

内容的提问来源于stack exchange，提问作者Greg Bartlett