visualizing-change-over-time

可视化随时间变化

当请求涉及某事物如何变化时，默认的选取是折线/面积趋势图——对于具有许多 x 点的连续序列，这通常是对的。但对于某些随时间变化的形态，其他图表读起来要好得多。本技能提供了可选的菜单，包括斜率图，用于在使用 @posthog/quill-charts 构建可视化时使用。

呈现合适的选项并让用户选择——这些都不是强制性的。

按变化的形态选择

变化是…	选择	原因
跨多个时间点的连续序列（趋势）	TimeSeriesLineChart / LineChart（面积填充以强调）	标准趋势图；每对点之间的斜率都可见。
仅两个点（前 → 后）跨多个序列/类别	SlopeChart	每个实体从左侧“前”到右侧“后”的一条线——每个实体的变化方向和幅度，以及排名翻转，一目了然。
时间点上的量级比较（而非它们之间的路径）	BarChart / TimeSeriesBarChart	条形图比较离散值；对子序列进行分组/堆叠。
单个头条数字及其与上一周期的变化	MetricCard	大数字 + 迷你图 + 变化胶囊。

如果用户比较的正好是两个快照（本周 vs 上周、对照组 vs 实验组、Q1 vs Q2），尤其是当有许多类别且它们的_相对_变动很重要时，建议将斜率图作为分组条形图或 2 点折线图的更清晰替代方案。

使用 SlopeChart

import { SlopeChart } from '@posthog/quill-charts'
import type { Series } from '@posthog/quill-charts'
import type { SlopeSeriesMeta } from '@posthog/quill-charts'

// One series per entity; `data` is exactly [start, end].
const series: Series<SlopeSeriesMeta>[] = [
    { key: 'us', label: 'US', data: [120, 185] },
    { key: 'eu', label: 'EU', data: [200, 150] },
]

<SlopeChart
    series={series}
    labels={['Before', 'After']}
    theme={theme}
    config={{
        showSeriesLabels: true, // name beside each end point; steepest line always keeps its label
        legend: { show: true }, // each row shows the color, label, and the formatted change
        deltaFormatter: (d) => `${d >= 0 ? '+' : ''}${d}`,
    }}
/>

关键选项（完整列表见图表 docs/chart-types.md 的 "SlopeChart" 部分）：

• showStartLabels / showEndLabels — 值标签的图表级默认值； 可按序列用 meta.showStartLabel / meta.showEndLabel 覆盖。
• showSeriesLabels — 名称标签；发生冲突时，变化最大的序列 （|end − start|）始终保留其标签。
• legend: { show, position } — 行带有每个序列的变化（deltaFormatter）。
• 值轴默认隐藏——起始/结束标签就是读数。

主题来自 useChartTheme()；给包装容器一个真实的高度。有关主题接线和尺寸设置，请参阅 charts AGENTS.md。

范围说明

渲染斜率图有 两种 方式；选择哪一种取决于使用场景：

• SlopeChart — @posthog/quill-charts 组件。在直接构建 UI 时使用：仪表盘、报告、mcp_analytics 前端、自定义可视化。它为 Max 的内联趋势结果卡片上的 Slope 视图切换提供支持 （services/mcp/src/ui-apps/components/TrendsVisualizer.tsx）。
• ChartDisplayType.SlopeGraph — 一等洞察展示类型（frontend/src/types.ts 中的值 'SlopeGraph'），由后端 SlopeGraphTrendsQueryRunner （products/product_analytics/backend/hogql_queries/trends/slope_graph_trends_query_runner.py）渲染。它 接收一个 TrendsQuery，并将日期范围的 第一个和最后一个分桶 保留为 两个斜率点（当最后一个分段是当前仍在累积的周期时，该分段为虚线）。通过 trendsFilter.display: "SlopeGraph" 设置（仅限 trends）。
  • 产品洞察编辑器 包含斜率图选择器条目。
  • 通过 API / posthog:insight-create MCP 工具，传入带有 trendsFilter.display: "SlopeGraph" 的 TrendsQuery。要构建清晰的前后对比，请选择 日期范围和 interval，使第一个分桶作为基线，最后一个分桶为 "now"（例如从基线月份开始的每月分桶）。