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

lnvxswe2  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(312)

我试图使用测试 predicate 或字段 predicate 根据另一个字段值呈现标签颜色,但我无法正确获得它。我想要的是,y轴(截面)上的标签颜色可以在其弹性值等于0时从黑色变为红色。
我已经在在线编辑器上编写了我的代码,如果您能给我一些帮助,我真的很感激。
vega lite条件渲染标签颜色
在上述情况下,第五个<4.卫生与清洁>应为红色,而不是黑色。

eh57zj3b

eh57zj3b1#

我添加了另一个带有文本的层,其中 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"
        }
      }
    }
  ]
}

相关问题