Vega Lite分面图表自动跨多行多列及谷歌财经式着色技术咨询

一、让分面图表自动跨多行多列展示 #

在Vega Lite中，只需在facet配置里指定columns参数（每行最多显示的分面数量），当分面总数超过设定的列数时，图表会自动换行生成多行。

示例配置片段：

{
  "facet": {
    "field": "你的分面字段名", // 用于分面的字段
    "columns": 3 // 每行最多显示3个分面，超出自动换行
  },
  "spec": {
    // 单个分面的图表配置（如折线图、柱状图）
    "mark": "line",
    "encoding": {
      "x": {"field": "日期", "type": "temporal"},
      "y": {"field": "数值", "type": "quantitative"}
    }
  },
  "spacing": 20 // 可选：调整分面间的间距
}

如果需要统一或独立分面的坐标轴，可通过resolve参数配置：

"resolve": {
  "scale": {"y": "shared"} // 所有分面共享Y轴，默认是独立的"independent"
}

二、根据起始/结束值为图表着色（类似谷歌财经） #

要实现“涨绿跌红”的着色效果，需先通过数据变换计算每个分面的起始值和结束值，再根据两者的大小关系生成颜色字段，最后将颜色应用到图表元素上。

步骤1：计算起始值、结束值和趋势颜色 #

使用window变换按分面字段分组，提取每组的第一个（起始）和最后一个（结束）数值，再用calculate生成颜色：

"transform": [
  // 按分面字段分组，提取每组第一个数值作为起始值
  {"window": [{"field": "数值", "op": "first", "as": "start_val"}], "groupby": ["你的分面字段名"]},
  // 按分面字段分组，提取每组最后一个数值作为结束值
  {"window": [{"field": "数值", "op": "last", "as": "end_val"}], "groupby": ["你的分面字段名"]},
  // 根据涨跌判断颜色：涨用绿色，跌用红色
  {"calculate": "datum.end_val > datum.start_val ? '#2ecc71' : '#e74c3c'", "as": "trend_color"}
]

步骤2：将颜色应用到图表 #

可以把颜色应用到线条、区域填充或分面标题等元素：

• 应用到折线：

"mark": {"type": "line", "stroke": {"expr": "datum.trend_color"}, "strokeWidth": 2}

• 应用到区域填充：

"mark": {"type": "area", "color": {"expr": "datum.trend_color"}, "opacity": 0.3}

• 给分面标题着色：

"facet": {
  "field": "你的分面字段名",
  "columns": 3,
  "header": {"labelColor": {"expr": "datum.trend_color"}}
}

完整示例 #

整合以上两点的完整Vega Lite配置：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "你的数据源地址"},
  "transform": [
    {"window": [{"field": "数值", "op": "first", "as": "start_val"}], "groupby": ["品类"]},
    {"window": [{"field": "数值", "op": "last", "as": "end_val"}], "groupby": ["品类"]},
    {"calculate": "datum.end_val > datum.start_val ? '#2ecc71' : '#e74c3c'", "as": "trend_color"}
  ],
  "facet": {
    "field": "品类",
    "columns": 3,
    "header": {"labelColor": {"expr": "datum.trend_color"}}
  },
  "spec": {
    "mark": {"type": "line", "stroke": {"expr": "datum.trend_color"}, "strokeWidth": 2},
    "encoding": {
      "x": {"field": "日期", "type": "temporal"},
      "y": {"field": "数值", "type": "quantitative"}
    }
  },
  "spacing": 20,
  "resolve": {"scale": {"y": "shared"}}
}

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