我试图使用测试 predicate 或字段 predicate 根据另一个字段值呈现标签颜色，但我无法正确获得它。我想要的是，y轴（截面）上的标签颜色可以在其弹性值等于0时从黑色变为红色。我已经在在线编辑器上编写了我的代码，如果您能给我一些帮助，我真的很感激。vega lite条件渲染标签颜色在上述情况下，第五个<4.卫生与清洁>应为红色，而不是黑色。
eh57zj3b1#
我添加了另一个带有文本的层，其中 text 属于 section 此时将显示字段。在这种情况下，带有条件的颜色配置将正常工作。下面是代码和编辑器：
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" } } } ] }
1条答案
按热度按时间eh57zj3b1#
我添加了另一个带有文本的层，其中
text属于section此时将显示字段。在这种情况下，带有条件的颜色配置将正常工作。下面是代码和编辑器：