用途:当请求涉及“某事物如何变化”、前后对比或同比环比时,帮助 PostHog 工程师与智能体选择合适图表。默认趋势用折线/面积图,但某些变化形态用其他图表更易读。该技能提供可选菜单(含斜率图),供构建可视化时参考,最终由用户选择,均非强制。
按变化形态选图:连续多时间点趋势用 TimeSeriesLineChart / LineChart(面积填充强调);仅两个点(前→后)且跨多个系列/类别用 SlopeChart,每个实体一条线,方向、幅度与排名翻转一目了然;比较某时点的量级(而非路径)用 BarChart / TimeSeriesBarChart,可分组或堆叠;单个头条数字及其与上期变化用 MetricCard(大数字+迷你趋势线+变化标签)。若比较恰好两个快照(本周 vs 上周、对照组 vs 实验组、Q1 vs Q2),尤其类别多且相对移动重要时,建议用斜率图替代分组柱状图或两点折线图。
使用 SlopeChart:从 @posthog/quill-charts 导入 SlopeChart、Series、SlopeSeriesMeta;每个实体一个系列,data 恰为 [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, legend: { show: true }, deltaFormatter: (d) => ${d >= 0 ? '+' : ''}${d} }} />。
关键选项:showStartLabels / showEndLabels 为图表级数值标签默认值,可用 meta.showStartLabel / meta.showEndLabel 按系列覆盖;showSeriesLabels 为名称标签,冲突时变化最大(|end − start|)的系列始终保留标签;legend: { show, position } 每行显示颜色、标签与格式化变化(deltaFormatter)。数值轴默认隐藏,起止标签即读数。主题来自 useChartTheme(),需给容器真实高度。
范围说明:两种渲染方式。SlopeChart 是 @posthog/quill-charts 组件,用于直接构建 UI(仪表盘、报告、mcp_analytics 前端、自定义可视化),支撑 Max 内联趋势结果卡上的 Slope 视图切换。ChartDisplayType.SlopeGraph 是一等洞察展示(frontend/src/types.ts 中值 'SlopeGraph'),由后端 SlopeGraphTrendsQueryRunner 渲染,接收 TrendsQuery,取日期范围首尾桶作为两个斜率点(最后一段为当前仍在累积期时用虚线)。通过 trendsFilter.display: "SlopeGraph" 设置(仅趋势)。产品洞察编辑器中该选项受 FEATURE_FLAGS.SLOPE_GRAPH_INSIGHT(slope-graph-insight)门控;通过 API / posthog:insight-create MCP 工具无需该标志,传入带 trendsFilter.display: "SlopeGraph" 的 TrendsQuery 即可。要构造干净的前→后,选择日期范围与间隔使首桶为基线、末桶为“现在”(如从基线月起按月分桶)。