Vega-Lite - 基于动态输入的线梯度

Question

我想知道是否可以根据字段或参数值为折线图创建自定义渐变着色。根据我的研究，这似乎不可能，因为我找不到任何支持此功能的文档。

虽然这篇文章完全包含了我正在寻找的输出，但它使用手动输入的值来实现结果，这不符合我的需求 --> LINK

我的目标是动态地实现类似的目标。例如，如果

completion

字段位于 25%，则渐变将从 x 位置 0 开始，并且对于线条长度的前 25%，颜色将与

color

字段中的值匹配。线条的其余部分将使用相同的颜色，但不透明度为 0.3。

我怀疑这在 Vega-Lite 中可能不可能，但我很高兴听到是否有人有解决方法或解决方案。

谢谢！

样品：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"startDate": "2024-01-15", "category": "a", "value": 1, "color": "red", "completion": 0.25},
      {"startDate": "2024-01-17", "category": "a", "value": 1.5, "color": "red", "completion": 0.25},
      {"startDate": "2024-01-18", "category": "a", "value": 1.5, "color": "red", "completion": 0.25},
      {"startDate": "2024-01-19", "category": "a", "value": 1.5, "color": "red", "completion": 0.25},
      {"startDate": "2024-01-22", "category": "a", "value": 2, "color": "red", "completion": 0.25},
      {"startDate": "2024-02-15", "category": "b", "value": 2, "color": "blue", "completion": 0.45},
      {"startDate": "2024-02-17", "category": "b", "value": 2.5, "color": "blue", "completion": 0.45},
      {"startDate": "2024-02-18", "category": "b", "value": 2.5, "color": "blue", "completion": 0.45},
      {"startDate": "2024-02-19", "category": "b", "value": 2.5, "color": "blue", "completion": 0.45},
      {"startDate": "2024-02-22", "category": "b", "value": 3, "color": "blue", "completion": 0.45}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {
      "field": "startDate",
      "type": "temporal",
      "title": "Date"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": "Value"
    },
    "detail": {
      "field": "category"
    }
  }
}

Answer 1

而不是基于梯度的线和第二层，您可以在其中可视化每天完成的目标与目标：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "data": {
    "values": [
      {
        "startDate": "2024-01-15",
        "category": "a",
        "value": 1,
        "color": "red",
        "completion": 0.25
      },
      {
        "startDate": "2024-01-17",
        "category": "a",
        "value": 1.5,
        "color": "red",
        "completion": 0.25
      },
      {
        "startDate": "2024-01-18",
        "category": "a",
        "value": 1.5,
        "color": "red",
        "completion": 0.25
      },
      {
        "startDate": "2024-01-19",
        "category": "a",
        "value": 1.5,
        "color": "red",
        "completion": 0.25
      },
      {
        "startDate": "2024-01-22",
        "category": "a",
        "value": 2,
        "color": "red",
        "completion": 0.25
      },
      {
        "startDate": "2024-02-15",
        "category": "b",
        "value": 2,
        "color": "blue",
        "completion": 0.45
      },
      {
        "startDate": "2024-02-17",
        "category": "b",
        "value": 2.5,
        "color": "blue",
        "completion": 0.45
      },
      {
        "startDate": "2024-02-18",
        "category": "b",
        "value": 2.5,
        "color": "blue",
        "completion": 0.45
      },
      {
        "startDate": "2024-02-19",
        "category": "b",
        "value": 2.5,
        "color": "blue",
        "completion": 0.45
      },
      {
        "startDate": "2024-02-22",
        "category": "b",
        "value": 3,
        "color": "blue",
        "completion": 0.45
      }
    ]
  },
  "transform": [
    {
      "calculate": "datum.value * (datum.completion > 0 ? datum.completion : 0)",
      "as": "completed"
    }
  ],
  "layer": [
    {
      "mark": {"type": "area", "interpolate": "monotone"},
      "encoding": {
        "x": {"field": "startDate", "type": "temporal", "title": "Date"},
        "y": {"field": "value", "type": "quantitative", "title": "Value"}
      }
    },
    {
      "mark": {"stroke": "white", "type": "area", "interpolate": "monotone"},
      "encoding": {
        "color": {"value": "#85C5A6"},
        "x": {"field": "startDate", "type": "temporal", "title": "Date"},
        "y": {"field": "completed", "type": "quantitative", "title": "Value"}
      }
    }
  ]
}