vega-lite - 如何根据条件更改 vega-lite 中的线条描边颜色
问题描述
我在 vega-lite 中有一个图表,并尝试根据绿色阴影区域的上限 (obeGrenze) 更改点和线的颜色,例如,如果点高于此上限,则将颜色设置为红色。代码:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A dual axis chart, created by setting y's scale resolution to `\"independent\"`",
"width": 300, "height": 300,
"data": {
"url": "https://pnwscm60.github.io/data/chdeath.csv"
},
"axis": {
"font": "Open Sans Condensed"
},
"encoding": {
"x": {
"field": "date",
"axis": {"format": "%d.%m", "title": null},
"type": "temporal",
"timeUnit": "daymonth"
}
},
"layer": [
{
"mark": {"opacity": 0.3, "type": "area", "color": "#85C5A6"},
"transform": [{"filter": "datum.Alter == \"65\""}],
"encoding": {
"y": {
"aggregate": "average",
"field": "obeGrenze",
"scale": {"domain": [0, 1800]},
"type": "quantitative",
"axis": {"title": "Anzahl wöchentliche Todesfälle", "titleColor": "#111","format": ".2r"}
},
"y2": {
"aggregate": "average",
"field": "untGrenze"
}
}
},
{
"mark": {"opacity": 0.3, "type": "area", "color": "#85C5A6"},
"transform": [{"filter": "datum.Alter == \"0-64\""}],
"encoding": {
"y": {
"aggregate": "average",
"field": "obeGrenze",
"scale": {"domain": [0, 1800]},
"type": "quantitative"
},
"y2": {
"aggregate": "average",
"field": "untGrenze"
}
}
},
{
"mark": {
"stroke":"#85A9C5", "type": "line", "interpolate": "monotone","point": true},
"transform": [{"filter": "datum.Alter == \"0-64\""}],
"encoding": {
"y": {
"aggregate": "mean",
"field": "hochrechnung",
"type": "quantitative",
"axis": {}
}
}
},
{
"mark": {
"stroke": "#85A9C5", "type": "line", "interpolate": "monotone","point": ""},
"transform": [{"filter": "datum.Alter == \"65\""}],
"encoding": {
"y": {
"aggregate": "mean",
"field": "hochrechnung",
"type": "quantitative"
}
}
},
{
"mark": "point",
"transform": [{"filter": "datum.Alter == \"65\""}],
"encoding": {
"y": {
"aggregate": "mean",
"field": "hochrechnung",
"type": "quantitative"
},
"tooltip": [{"field": "Woche", "type":"quantitative"},{"field": "hochrechnung", "type":"quantitative"}],
"fill": { "value": "#fff" }
}
},
{
"mark": "point",
"transform": [{"filter": "datum.Alter == \"0-64\""}],
"encoding": {
"y": {
"aggregate": "mean",
"field": "hochrechnung",
"type": "quantitative"
},
"tooltip": [{"field": "Woche", "type":"quantitative"},{"field": "hochrechnung", "type":"quantitative"}],
"fill": { "value": "#fff" }
}
}
]
}
我可以使用条件更改颜色,例如“test”:“datum['hocrechnung'] > 100”,但是当我尝试使用变量而不是数字时(例如“datum['obeGrenze']”,我不有什么影响。
我怎样才能做到这一点?
解决方案
推荐阅读
- typescript - 如何拥有具有不同子类型的 TypeScript 数组?
- html - 在Angular 9中旋转图像
- .net - Visual Basic 窗体在另一个区域中打开
- javascript - 使用 redux 和 redux-saga 在 React 应用程序中刷新令牌功能
- linux - 当一段时间没有输出时使 bash 脚本超时
- reactjs - React Router 渲染父组件
- javascript - 如何从不包括某些给定数字的数组中生成随机数
- android - FCM 令牌是特定于应用程序还是设备?
- r - 如何使数组中的最大值小于另一个数组的每个值(R)
- angular - 从字符串数组中获取 keyof 类