Vega-Lite渐变:如何让颜色断点与Y轴刻度关联?
问题:面积图颜色断点与Y轴实际刻度关联的实现
我有一个指标,希望在面积图中根据该指标在不同时间点的数值,按区间显示渐变颜色:良好(0至0.1=绿色)、一般(>0.1至0.3=黄色)、较差(>0.3=红色)。如何让颜色断点与Y轴的实际刻度相关联?
我原本以为可以通过offset指定颜色断点,初次尝试时显示正常:
{ "width": 600, "data": { "values": [ { "__row__": 0, "calendar_month_year": "Dec-23", "concentration_risk_monthly": 0.51 }, { "__row__": 1, "calendar_month_year": "Jan-24", "concentration_risk_monthly": 0.5 }, { "__row__": 2, "calendar_month_year": "Feb-24", "concentration_risk_monthly": 0.27 }, { "__row__": 3, "calendar_month_year": "Mar-24", "concentration_risk_monthly": 0.22 }, { "__row__": 4, "calendar_month_year": "Apr-24", "concentration_risk_monthly": 0.25 }, { "__row__": 5, "calendar_month_year": "May-24", "concentration_risk_monthly": 0.22 } ] }, "mark": { "type": "area", "color": { "x1": 1, "y1": 1, "x2": 1, "y2": 0, "gradient": "linear", "stops": [ {"offset": 0, "color": "#00800166"}, {"offset": 0.3, "color": "#F7B50066"}, {"offset": 1, "color": "#A9281F66"} ] } }, "encoding": { "x": { "field": "calendar_month_year", "type": "ordinal", "sort": {"field": "__row__"}, "axis": {"title": null}, "scale": {"padding": 0} }, "y": { "field": "concentration_risk_monthly", "type": "quantitative", "axis": {"title": null} } } }
效果如下:
但当我将所有指标数据改为低于0.05(远低于绿色阈值0.1)时:
{ "width": 600, "data": { "values": [ { "__row__": 0, "calendar_month_year": "Dec-23", "concentration_risk_monthly": 0.051 }, { "__row__": 1, "calendar_month_year": "Jan-24", "concentration_risk_monthly": 0.05 }, { "__row__": 2, "calendar_month_year": "Feb-24", "concentration_risk_monthly": 0.027 }, { "__row__": 3, "calendar_month_year": "Mar-24", "concentration_risk_monthly": 0.022 }, { "__row__": 4, "calendar_month_year": "Apr-24", "concentration_risk_monthly": 0.025 }, { "__row__": 5, "calendar_month_year": "May-24", "concentration_risk_monthly": 0.022 } ] }, "mark": { "type": "area", "color": { "x1": 1, "y1": 1, "x2": 1, "y2": 0, "gradient": "linear", "stops": [ {"offset": 0.0, "color": "#00800166"}, {"offset": 0.3, "color": "#F7B50066"}, {"offset": 1.0, "color": "#A9281F66"} ] } }, "encoding": { "x": { "field": "calendar_month_year", "type": "ordinal", "sort": {"field": "__row__"}, "axis": {"title": null}, "scale": {"padding": 0} }, "y": { "field": "concentration_risk_monthly", "type": "quantitative", "axis": {"title": null} } } }
我原本期望整个区域为绿色,但似乎offset是相对于整个绘图区域的,因此即使所有指标都低于0.1,仍会出现红色区域:
内容的提问来源于stack exchange,提问作者Tyler Rinker
相关产品推荐
相关产品推荐

