如何在Vega-Lite多折线图中条件式配置color通道?
问题:通过参数切换实现Vega-Lite折线图合并/拆分效果
我有一个包含两条折线的图表,希望通过切换param参数将两条折线合并为一条。Vega-Lite支持为字段设置条件编码,但当条件不满足时,无法实现“不定义”color通道的效果:
- 设置
value: red会让两条折线变为同色; - 设置
value: false/null则会完全隐藏折线。
根据condition文档说明,else字段为可选,但不设置value或field时,始终无法显示两条折线,这似乎意味着color通道从未被定义。
当前图表效果:
当勾选“combine”复选框时,期望得到如下效果(与未定义color通道的效果一致):
但实际得到的却是:
可在Vega编辑器中使用的示例spec如下:
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"y": -1, "x": 1, "name": "north"}, {"y": 2, "x": 2, "name": "north"}, {"y": 0, "x": 3, "name": "north"}, {"y": -3, "x": 1, "name": "south"}, {"y": 1, "x": 2, "name": "south"}, {"y": 4, "x": 3, "name": "south"} ] }, "encoding": { "color": { "condition": {"param": "combine", "field": "name"}, "value": "red", }, "x": {"field": "x", "type": "quantitative"}, "y": { "aggregate": "median", "field": "y", "scale": {"domain": [-10, 10]}, "type": "quantitative" } }, "height": "container", "layer": [{"mark": {"interpolate": "basis", "type": "line"}}], "params": [ { "bind": {"input": "checkbox"}, "name": "combine", "value": "Yes" } ], "width": 300 }
内容的提问来源于stack exchange,提问作者markson edwardson
相关产品推荐
相关产品推荐

