如何在Wazuh的Vega可视化中实现折线图与线性回归线重叠

问题背景 #

需在Wazuh的Vega可视化中叠加展示Telegram频道月度封禁数量的折线图与线性回归线，当前存在以下问题：

• 两个图表可单独生成，但无法重叠显示
• X轴格式不统一时图表并排展示；格式统一时回归线覆盖其他图表导致其无法显示

核心问题分析 #

你的代码存在几个关键问题导致无法实现重叠：

1. 原始date_id被设为nominal类型，回归线使用的是temporal类型的date字段，两者X轴度量不一致
2. month_total从日志中读取的是字符串类型，无法正确参与回归计算
3. 各图层X轴编码未统一，导致图层无法对齐

解决方案 #

关键调整点 #

• 在全局transform中统一将date_id转换为temporal类型，确保所有图层使用一致的时间字段
• 将month_total转为数值类型，保证回归计算准确性
• 在顶层定义统一的X/Y轴编码，所有子图层自动继承，避免类型冲突
• 保留完整回归线（更利于趋势分析），也可选择仅显示端点

修改后的完整Vega代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Linear Regression Line Graph for Telegram ban",
  "data": {
    "url": {
      "index": "wazuh-alerts-*",
      "body": {
        "query": {
          "bool": {
            "must": [
              {
                "match": {
                  "data.last_day_of_month": "true"
                }
              },
              "%dashboard_context-must_clause%",
              {
                "range": {
                  "data._id": {
                    "%timefilter%": true
                  }
                }
              }
            ]
          }
        },
        "sort": [
          {
            "data._id": {
              "order": "asc"
            }
          }
        ],
        "size": 10000,
        "_source": [
          "data"
        ]
      }
    },
    "format": {
      "property": "hits.hits"
    }
  },
  "transform": [
    {
      "calculate": "datum._source.data._id",
      "as": "date_id"
    },
    {
      "calculate": "parseInt(datum._source.data.month_total)",
      "as": "month_total"
    },
    {
      "calculate": "utcParse(datum.date_id, '%Y-%m-%d')",
      "as": "date"
    },
    {
      "filter": "datum.date != null && datum.month_total != null"
    }
  ],
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "format": "%Y-%m-%d",
      "axis": {
        "labelExpr": "timeFormat(datum.value, '%Y-%m-%d')",
        "grid": true
      }
    },
    "y": {
      "field": "month_total",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": "point",
      "encoding": {
        "tooltip": [
          {
            "field": "date_id",
            "type": "nominal",
            "title": "日期"
          },
          {
            "field": "month_total",
            "type": "quantitative",
            "title": "月度封禁总数"
          }
        ]
      }
    },
    {
      "mark": "line",
      "encoding": {
        "color": {
          "value": "red"
        }
      }
    },
    {
      "transform": [
        {
          "regression": "month_total",
          "on": "date",
          "method": "linear"
        }
      ],
      "mark": "line",
      "encoding": {
        "color": {
          "value": "blue"
        },
        "tooltip": [
          {
            "field": "date",
            "type": "temporal",
            "format": "%Y-%m-%d",
            "title": "日期"
          },
          {
            "field": "month_total",
            "type": "quantitative",
            "title": "回归预测值"
          }
        ]
      }
    }
  ]
}

代码说明 #

1. 全局转换优化：
   • 用parseInt将month_total转为数值类型，解决字符串无法参与回归计算的问题
   • 统一生成temporal类型的date字段，所有图层共享该字段
2. 统一轴编码：
   • 顶层定义X/Y轴编码，子图层自动继承，避免重复定义和类型冲突
3. 修复查询冗余：移除重复的match条件定义

可选：仅显示回归线端点 #

若需只显示回归线的首尾端点，可将回归线层的transform替换为以下内容：

{
  "transform": [
    {
      "regression": "month_total",
      "on": "date",
      "method": "linear"
    },
    {
      "window": [{"op": "row_number", "as": "row"}],
      "frame": [null, null]
    },
    {
      "filter": "datum.row === 1 || datum.row === datum.length"
    }
  ]
}

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