场景模拟器让计划员"假设"出一个未来，但真实世界里还有另一类对比更关键：

 团队每两周迭代一版，Prophet 调参、加特征、换 LightGBM，每次都要回答三个问题——准不准、稳不稳、值不值。

A/B Test 在预测场景有个特殊性：它不是随机分流用户，而是

同一条历史序列上跑两个版本、逐点比较误差

。这决定了可视化的重点不在"哪组人更爱点击"，而在"误差分布往哪边移、异常少了还是多了、哪些 SKU 反而变差了"。本文将拆解对比口径、配对样本检验、多维度可视化、显著性与业务价值换算，以及完整的交互架构。

一、先统一统计口径：预测 A/B 不是分流实验 

这是预测 A/B 最容易混淆的起点。互联网 A/B 是两组独立样本比均值，预测 A/B 是

同一批时间点上的两个预测，逐点配对

。如果用独立样本 t 检验，会把时间序列的自相关全丢掉，显著性结果严重失真。

 是关键构造。它的均值是两个版本误差的直接差值，它的符号分布回答"B 在多少比例的点上更好"。

只报平均误差而不报符号比例，会掩盖"整体略好但大量点变差"的危险情况

数据契约上，后端应一次性下发两个版本的完整对照数据，前端只做展示与交互：

——这个符号约定必须团队内统一并写进文档。

 字段是配对样本 t 检验的结果：均值差、标准差、t 统计量、p 值、B 更优的比例（胜率）、样本量、置信水平。

 是业务方最易理解的信号，p 值则是"这个胜率够不够稳"的保险。

二、检验逻辑：前端要算到什么程度 

展示用的统计量可以前端复算用于交互筛选，权威性结论一律以后端为准

。但理解检验逻辑，是做出正确可视化的前提。

import { mean, deviation, quantile } from 'd3-array'

// 配对样本 t 检验：回答"两版本差异是否超出噪声"
export function pairedTTest(paired) {
  const diffs = paired.map(d => d.diff)
  const n = diffs.length
  const m = mean(diffs)
  const sd = deviation(diffs)   // d3 的 deviation 即样本标准差（n-1 分母）
  const se = sd / Math.sqrt(n)
  const t = m / se

  // 两侧 p 值用 Student-t 近似；生产环境建议接入 jStat 或后端结果
  const p = 2 * (1 - tCDF(Math.abs(t), n - 1))

  return {
    meanDiff: m,
    stdDiff: sd,
    tStat: t,
    pValue: p,
    winRate: diffs.filter(d => d < 0).length / n,
    sampleSize: n,
    significant: p < 0.05,
  }
}

// Student-t 累积分布近似（Abramowitz & Stegun 26.7.1）
function tCDF(t, df) {
  const x = df / (df + t * t)
  // 正则化不完全 beta 函数简化实现，误差 < 1e-6
  const b = ibeta(0.5, df / 2, x)
  return 1 - 0.5 * b
}

 分母是样本标准差，与后端必须一致，否则 p 值对不上——

这是前端复算最常见的偏差来源

。t 统计量的绝对值越大、样本越多，p 值越小。把 

 作为布尔标记输出，直接驱动视图上的结论文案。

更稳妥的做法是只在前端保留复算用于交互，正式结论读后端 

export function compareVersions(paired, test) {
  const byDay = paired.map(d => ({
    ds: d.ds,
    aErr: d.a.absErr,
    bErr: d.b.absErr,
    diff: d.diff,
    improved: d.diff < 0,
  }))

  const improved = byDay.filter(d => d.improved)
  const regressed = byDay.filter(d => d.diff > 0)

  return {
    byDay,
    improved,
    regressed,
    summary: {
      wmapeDelta: test.meanDiff,
      winRate: test.winRate,
      significant: test.pValue < 0.05,
      verdict: test.pValue < 0.05
        ? (test.meanDiff < 0 ? 'B 显著优于 A' : 'A 显著优于 B')
        : '差异不显著，需更多样本',
    },
  }
}

 分开输出，直接喂给"改善日清单"和"恶化日清单"两个视图——

任何总体结论都必须同时展示反向案例

，否则就是选择性呈现。结论文案三态化，把统计判断翻译成人话。

三、可视化一：双序列误差分布对比 

平均 WMAPE 是个数字，误差分布才是真相。两版模型的误差分布若形态不同，说明改进机制不同，应对方式也不同。

说明稳定性提升，这对备安全库存特别有价值；

则说明改进只在一类数据上成立，需分段建模。前端不自动下结论，但要把这三种形态清晰呈现，让数据科学家自己判断。

export function ErrorDensityOverlay({ a, b }) {
  const bins = makeBins([...a, ...b], 24)
  const max = Math.max(
    ...bins.map(bin => Math.max(bin.countA, bin.countB))
  )

  return (
    <div className="space-y-2">
      <div className="flex h-44 items-end gap-px">
        {bins.map(bin => (
          <div key={bin.x0} className="flex-1 flex items-end gap-px relative group">
            <div className="flex-1 bg-indigo-300 opacity-70"
                 style={{ height: `${(bin.countA / max) * 100}%` }} />
            <div className="flex-1 bg-emerald-400 opacity-80"
                 style={{ height: `${(bin.countB / max) * 100}%` }} />
            <div className="hidden group-hover:block absolute -top-12 left-1/2
              -translate-x-1/2 bg-gray-900 text-white text-[10px] p-1.5 rounded z-10">
              {bin.x0}~{bin.x1}<br/>A: {bin.countA} / B: {bin.countB}
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-4 text-xs text-gray-500">
        <span><span className="inline-block w-3 h-3 bg-indigo-300 mr-1 align-middle" />版本 A</span>
        <span><span className="inline-block w-3 h-3 bg-emerald-400 mr-1 align-middle" />版本 B</span>
      </div>
    </div>
  )
}

：两色并排柱、同桶等高对比，是最直观的分布比较。

（先合并再分箱），否则宽度不同会让高度失去可比性。悬停浮层同时显示两版频次，方便读具体数字。图例固定在底部，不遮挡主体。

四、可视化二：配对差异散点与胜率 

散点图回答"B 在哪些点上赢了、赢了多少"，是定位回归案例的主力视图。

：柱状为 B、折线为 A，落在折线

的柱子就是 B 更准的点。一眼可见 11 月 B 的误差反而更大——这就是要重点检查的回归点。

export function PairedScatter({ paired, onSelect }) {
  const points = paired.filter(d => d.a.absErr != null && d.b.absErr != null)
  const maxErr = Math.max(...points.map(d => Math.max(d.a.absErr, d.b.absErr)))

  return (
    <div className="relative">
      <svg viewBox="0 0 300 300" className="w-full h-64">
        {/* 对角线：线上方 = B 更差，线下方 = B 更好 */}
        <line x1="20" y1="280" x2="280" y2="20"
              stroke="#D1D5DB" strokeDasharray="4 4" />
        <text x="240" y="40" className="text-[10px] fill-gray-400">B=A 线</text>

        {points.map(d => {
          const x = 20 + (d.a.absErr / maxErr) * 260
          const y = 280 - (d.b.absErr / maxErr) * 260
          const better = d.b.absErr < d.a.absErr
          return (
            <circle key={d.ds} cx={x} cy={y} r={4}
                    fill={better ? '#10B981' : '#EF4444'}
                    opacity="0.75"
                    className="cursor-pointer"
                    onClick={() => onSelect(d)}>
              <title>{d.ds} | A: {d.a.absErr} / B: {d.b.absErr}</title>
            </circle>
          )
        })}
      </svg>

      <div className="flex justify-between text-xs text-gray-500 mt-1">
        <span>B 更优 {points.filter(d => d.b.absErr < d.a.absErr).length} 点</span>
        <span>B 更差 {points.filter(d => d.b.absErr > d.a.absErr).length} 点</span>
      </div>
    </div>
  )
}

绿点在对角线下方、红点在上方的映射

，让用户仅凭位置就能判断方向。

 提供原生 tooltip，零 JS 开销。底部计数是胜率的即时呈现。

五、可视化三：改善/恶化清单与归因 

统计结论之后必须落到具体日期，否则数据科学家无法核查、计划员无法行动。

且都可点击跳转到归因面板。只展示改善是报喜不报忧，只展示恶化是过度保守，两者缺一都无法支撑发布决策。

export function DeltaList({ items, direction, onSelect }) {
  const sorted = [...items]
    .sort((a, b) => Math.abs(b.diff) - Math.abs(a.diff))
    .slice(0, 10)

  return (
    <ul className="divide-y text-sm">
      {sorted.map(d => (
        <li key={d.ds} className="flex items-center gap-3 py-1.5 cursor-pointer hover:bg-gray-50"
            onClick={() => onSelect(d)}>
          <span className="w-20 text-xs text-gray-500">{d.ds}</span>
          <span className={`w-16 text-xs ${direction === 'improved' ? 'text-emerald-600' : 'text-rose-600'}`}>
            {direction === 'improved' ? '↓' : '↑'} {Math.abs(d.diff)} 件
          </span>
          <span className="text-xs text-gray-400">
            {d.a.absErr} → {d.b.absErr}
          </span>
        </li>
      ))}
    </ul>
  )
}

：排序依据是绝对差值，保证最严重的案例排在最前，无论方向。

 的简写让"改进了多少"一目了然。点击跳归因，形成从结论到原因的最短路径。

统计显著不等于业务值得。最后一个视图必须把指标改进换算成钱：

export function businessValue(summary, annualVolume, unitMargin) {
  const wmapeDelta = summary.wmapeDelta          // 单位是小数
  const savedUnits = annualVolume * wmapeDelta   // 相对改善对应的件数
  const savedMargin = savedUnits * unitMargin    // 折算毛利

  return {
    savedUnits: Math.round(savedUnits),
    savedMargin: Math.round(savedMargin),
    confidence: summary.significant ? '高' : '低',
  }
}

 是相对量，乘年销量得到件数、再乘单件毛利得到金额。

，尤其是"误差减少一件是否真等于少备一件安全库存"，取决于库存策略，前端不应自行假设。

：这是发布决策的最后一道闸门。

统计显著但价值不足以覆盖上线成本，就不该全量

；反之，即使指标改善微小但价值巨大（如关键爆品），也值得灰度观察。前端把计算透明化，避免数据团队用"指标好看"替业务拍板。

完整的交互架构要保证"选版本—看检验—查清单—跳归因"四步连贯：

：四个视图共享同一份配对数据和同一个选中日期，形成可推理闭环。归因面板复用系列第三篇的 SHAP 呈现，不重复造轮子。

性能上，配对数据本身是 N×2 量级，90 天窗口只有 180 条，纯前端计算完全无压力：

：万级样本以下都在 200ms 内，可直接主线程计算。超过 5000 时建议 Worker，主要开销在分位数和分箱而非 t 检验本身。

模型版本对比的核心，是把"新模型更好"这个模糊判断变成一组可核验的证据：

配对差给出方向，t 检验给出可信度，胜率给出覆盖范围，误差分布揭示改进机制，改善与恶化清单锁定具体日期，业务价值换算决定要不要上线。

场景模拟器让计划员"假设"出一个未来，但真实世界里还有另一类对比更关键：新模型到底比旧模型好多少？ 团队每两周迭代一版，Prophet 调参、加特征、换 LightGBM，每次都要回答三个问题——准不准、稳不稳、值不值。

AI 预测可视化平台 | 模型版本对比：A/B Test 结果的可视化方案

前端开发

人工智能

预测模型版本对比可视化指南：聚焦配对样本检验与误差分布分析，通过双序列密度图、配对散点图及改善/恶化清单，综合评估模型准度、稳定性与业务价值，确保显著性与实际收益双重验证。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

AI 预测可视化平台 | 模型版本对比：A/B Test 结果的可视化方案

AI 预测可视化平台 | 模型版本对比：A/B Test 结果的可视化方案

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐