如何根据值 Vega Lite 设置不同颜色的面积图

问题描述

我想创建面积图，其中 y=0 上方的区域将是一种颜色，下方是另一种颜色。我在 Vega-Lite 中设置条件颜色时遇到问题。（我使用的是来自 https://vega.github.io/vega-lite/docs/condition.html 的指南）

"color": {
      "condition": {
        "test": "datum['y'] < 0","value": {
          "x1": 1,"y1": 1,"x2": 1,"y2": 0,"gradient": "linear","stops": [
            {
              "offset": 0,"color": "white"
            },{
              "offset": 1,"color": "orange"
            }
          ]
        }
      },"value": {
       // otherValue
    }

完整代码在这里：

https://codesandbox.io/s/interactive-vega-lite-bar-chart-forked-b0hnh?file=/index.html

解决方法

该条件不适用于标记 area。对 bar 或 point 类型尝试了相同的方法，并且成功了。仍然设法获得红色、白色和橙色的渐变效果。您可以参考以下配置或参考link：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json","description": "Google's stock price over time.","data": {
    "values": [
      {"date": "2021-03-29","value": -10,"rValue": 0},{"date": "2021-03-28","value": -20,{"date": "2021-03-27","value": 20,{"date": "2021-03-26","value": 40,{"date": "2021-03-25","value": 35,"rValue": 0}
    ]
  },"width": 400,"height": 200,"mark": {"type": "area"},"encoding": {
    "x": {
      "field": "date","type": "temporal","axis": {"format": "%d/%m/%Y","labelPadding": 10}
    },"y": {"field": "value","type": "quantitative"},"fill": {
      "value": {
        "gradient": "linear","stops": [
          {"offset": 0,"color": "red"},{"offset": 0.5,"color": "white"},{"offset": 1,"color": "orange"}
        ]
      }
    }
  },"config": {}
}

另外，我使用简单的配置尝试了您的标记 area，但没有奏效。我创建了一个具有 bar 的配置，它在条件下正常工作，但如果将其更改为 area，则它不起作用。

vega vega-lite