如何基于线性回归结果动态改变Vega-Lite面积图颜色？

要实现时间序列面积图随线性回归趋势变色（下降时变红），核心是计算回归线斜率并基于斜率值设置条件颜色，以下是具体实现步骤和代码：

关键思路 #

1. 通过regression变换计算线性回归模型的斜率参数
2. 将斜率值注入到整个数据集，作为颜色判断的依据
3. 在面积图的颜色编码中，添加条件逻辑：斜率为负时显示红色，否则使用默认颜色

完整代码示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "transform": [
    {"filter": "datum.symbol === 'GOOG'"},
    // 计算线性回归，提取斜率slope
    {
      "regression": "price",
      "on": "date",
      "as": ["predictedPrice", "regressionParams"],
      "params": true
    },
    // 将斜率值添加为全局字段，让所有数据点都能访问
    {"calculate": "regressionParams.slope", "as": "trendSlope"}
  ],
  "layer": [
    // 面积图层：根据斜率设置条件颜色
    {
      "mark": {"type": "area", "opacity": 0.6},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {
          "condition": {"test": "datum.trendSlope < 0", "value": "red"},
          "value": "#4c78a8"
        }
      }
    },
    // 线性回归线层
    {
      "mark": {"type": "line", "color": "black", "strokeWidth": 2},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "predictedPrice", "type": "quantitative"}
      }
    }
  ]
}

关键部分解释 #

• 回归变换：regression变换不仅生成预测值，还通过params: true返回回归模型参数（包含斜率slope）
• 斜率提取：用calculate将斜率从参数对象中提取为独立字段trendSlope，确保所有数据点都能获取该值
• 条件颜色：在面积图的color编码中，通过condition判断trendSlope < 0，满足时设置红色，否则用默认蓝色

这样就能实现趋势下降时面积图自动变为红色的效果。

内容的提问来源于stack exchange，提问作者remsidave