如何在Vega/Vega-Lite中实现柱状图全局统一渐变填充？

当然可以实现全局共享的固定渐变柱状图，核心是让渐变绑定到整个图表的全局坐标系，而非单个柱子的局部空间。默认在mark上直接设置渐变时，Vega/Vega-Lite会为每个标记单独生成渐变，要解决这个问题，关键步骤如下：

实现步骤（以Vega-Lite为例） #

• 1. 在配置中定义全局线性渐变，设置gradientUnits为"userSpaceOnUse"，确保渐变范围基于整个图表的用户空间。
• 2. 调整渐变的起止坐标，匹配图表的布局方向（比如垂直柱状图的渐变从下到上）。
• 3. 在柱状图的fill属性中引用这个全局渐变。

示例代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "value": 4},
      {"category": "B", "value": 6},
      {"category": "C", "value": 2},
      {"category": "D", "value": 8}
    ]
  },
  "config": {
    "gradients": [
      {
        "name": "globalGradient",
        "type": "linear",
        "gradientUnits": "userSpaceOnUse",
        "x1": 0, "x2": 1, "y1": 1, "y2": 0,
        "stops": [
          {"offset": 0, "color": "#ffcccc"},
          {"offset": 0.5, "color": "#ff6666"},
          {"offset": 1, "color": "#cc0000"}
        ]
      }
    ]
  },
  "mark": {"type": "bar", "fill": "url(#globalGradient)"},
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

关键说明 #

• gradientUnits: "userSpaceOnUse"是实现全局渐变的核心参数，它让渐变的坐标范围对应整个图表的用户坐标系（0到1代表从左到右、从下到上的整个区域），而非每个柱子的局部范围。
• 通过调整x1/x2、y1/y2可以改变渐变的方向和覆盖范围：比如水平渐变可以设置y1:0, y2:0, x1:0, x2:1。

内容的提问来源于stack exchange，提问作者Mark Unsworth