基于另一个字段值的条件渲染标签颜色
Conditional render label Color base on another field value
我正在尝试使用测试谓词或字段谓词根据另一个字段值呈现标签颜色,但我无法正确处理。
我想要的只是y轴(section)上的标签颜色可以在弹性值等于0时从黑色变为红色。
我已经在在线编辑器上编写了代码,如果您能给我一些帮助,我将不胜感激。
vega-lite-condition-render-label-color
在上面的例子中,第五个<4。卫生与清洁> 应该是红色而不是黑色。
我添加了另一个带有文本的图层,其中显示了您的 text
of section
字段。因为带有条件的颜色配置将正常工作。下面是代码和 editor:
{
"$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"
}
}
}
]
}
我正在尝试使用测试谓词或字段谓词根据另一个字段值呈现标签颜色,但我无法正确处理。
我想要的只是y轴(section)上的标签颜色可以在弹性值等于0时从黑色变为红色。
我已经在在线编辑器上编写了代码,如果您能给我一些帮助,我将不胜感激。
vega-lite-condition-render-label-color
在上面的例子中,第五个<4。卫生与清洁> 应该是红色而不是黑色。
我添加了另一个带有文本的图层,其中显示了您的 text
of section
字段。因为带有条件的颜色配置将正常工作。下面是代码和 editor:
{
"$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"
}
}
}
]
}