angularjs - 基于另一个字段值的条件渲染标签颜色

Question

我正在尝试使用测试谓词或字段谓词根据另一个字段值呈现标签颜色，但我无法正确处理。我想要的是，当弹性值等于 0 时，y 轴（部分）上的标签颜色可以从黑色变为红色。
我已经在在线编辑器上编写了代码，如果你能给我一些帮助，我真的很感激。

vega-lite 条件渲染标签颜色

在上述情况下，第五个 <4。卫生和清洁> 应该是红色而不是黑色。

标签： angularjsconditional-statementspredicatevega-litevega

Answer 1

我添加了另一个带有文本的图层，其中显示了您text的section字段。因为带有条件的颜色配置将正常工作。下面是代码和编辑器：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {"embedOptions": {"renderer": "svg"}},
  "data": {
    "values": [
      {
        "section": "1. General Health & Safety",
        "Index": 38.40277777777778,
        "resilience": 31
      },
      {
        "section": "10. Environmental Accidents",
        "Index": 38.40277777777778,
        "resilience": 19
      },
      {
        "section": "2. Health - Process",
        "Index": 38.40277777777778,
        "resilience": 39
      },
      {
        "section": "3. Health - People",
        "Index": 38.40277777777778,
        "resilience": 47
      },
      {
        "section": "4. Hygiene & Cleaning",
        "Index": 38.40277777777778,
        "resilience": 0
      },
      {
        "section": "5. Health Care & Working Conditions",
        "Index": 38.40277777777778,
        "resilience": 25
      },
      {
        "section": "6. External Pollution & Extreme Weather Conditions",
        "Index": 38.40277777777778,
        "resilience": 16
      },
      {
        "section": "7. Hazardous Materials/Substances",
        "Index": 38.40277777777778,
        "resilience": 25
      },
      {
        "section": "8. Safety Accidents",
        "Index": 38.40277777777778,
        "resilience": 46
      },
      {
        "section": "9. Subcontractors Training",
        "Index": 38.40277777777778,
        "resilience": "1"
      }
    ]
  },
  "config": {"view": {"stroke": null}},
  "height": 300,
  "autosize": {"resize": true},
  "layer": [
    {
      "mark": {"type": "bar", "cornerRadiusEnd": 2},
      "encoding": {
        "x": {
          "field": "resilience",
          "type": "quantitative",
          "title": null,
          "axis": {"grid": true},
          "scale": {"domain": [0, 100]}
        },
        "y": {
          "field": "section",
          "type": "ordinal",
          "axis": {
            "grid": false,
            "domain": false,
            "ticks": false,
            "labels": false,
            "labelAlign": "left",
            "labelBaseline": "middle",
            "labelPadding": -5,
            "labelOffset": 0,
            "labelColor2": {"expr": "datum.resilience < 230 ? 'red' : 'green'"},
            "labelColor": {
              "condition": {"test": "datum.resilience > 5", "value": "red"},
              "value": "green"
            },
            "title": null
          }
        },
        "tooltip": {
          "field": "resilience",
          "type": "quantitative",
          "format": ".0f"
        },
        "color": {
          "field": "resilience",
          "type": "quantitative",
          "title": "Score",
          "scale": {
            "domain": [0, 30, 50, 55, 60, 65, 70, 75, 80, 90, 100],
            "range": [
              "#DE7363",
              "#FB9F38",
              "#F9B821",
              "#FBE8C9",
              "#F5DA01",
              "#E2D91E",
              "#CBD641",
              "#B6D35F",
              "#A2D180",
              "#7CC895",
              "#52BEA9"
            ]
          }
        }
      }
    },
    {
      "mark": {"type": "text", "align": "left"},
      "encoding": {
        "text": {"field": "section"},
        "color": {
          "condition": {"test": "datum.resilience < 2", "value": "red"},
          "value": "green"
        },
        "x": {"datum": 0},
        "y": {"field": "section", "type": "ordinal"}
      }
    },
    {
      "mark": {"type": "rule", "color": "red", "size": 3},
      "encoding": {
        "x": {
          "aggregate": "max",
          "field": "Index",
          "type": "quantitative",
          "axis": null,
          "format": ".0f",
          "title": "Module Resilience"
        }
      }
    }
  ]
}