打开任意一张预测看板，最先进入视野的永远只有三样东西：预测曲线画得像不像、那条置信区间带宽不宽、以及残差散得匀不匀。这三样恰好对应三种不同的统计视角——中心趋势、不确定性、误差结构。

多视图不是把同一份数据画三遍。它背后的设计原则是

：一个视图回答一个问题，用户在不同视图之间切换，完成从"发生了什么"到"误差是不是有模式"的推理。本文将拆解预测主视图、置信区间带、误差分布三类视图的实现要点，并给出性能与视觉表达上的取舍方案。

一、先定契约：一份数据驱动三个视图 

多视图平台最大的技术债务，往往不是画图，而是

。后端给实际值、给预测值、给区间、给误差，却用三种命名和两种时间戳格式返回，前端就不得不在每个组件里各写一套解析。

建议在 API 网关层做一次规范化，统一输出如下结构：

 把单位与频率提出来，所有视图共用同一套坐标轴标签和格式化函数，避免"件"和"箱"混用。

 更安全，因为实际值也可能合法地为 0。

 只在列表层聚合一次后下发，视图层不再自己重算——

能杜绝仪表盘上多个数字互相矛盾。

 是异常视图的入口，本篇不展开。

契约定了之后，三个视图共享同一份数据、同一套时间轴、同一个悬停状态，这才是"多视图"而不是"三个孤立图表"。

二、视图一：预测主视图与置信区间带 

。计划员一眼必须能看出那条虚线从哪里开始进入预测期，否则整张图就是误导。

：拆两段的目的不是数据计算，而是

——历史段预测用实线表示"已验证"，未来段用虚线表示"待验证"。区间带的画法是把 

 反序首尾相接，形成一个闭合多边形，

import Plotly from 'plotly.js-dist-min'

// 构建预测主视图的完整 trace 配置
export function buildForecastTraces(series) {
  const x = series.map(d => d.ds)
  const actual = series.map(d => d.isActual ? d.actual : null)
  const yhat   = series.map(d => d.yhat)
  const hi     = series.map(d => d.yhatUpper)
  const lo     = series.map(d => d.yhatLower)
  const cutover = series.find(d => !d.isActual) // 历史与预测的分界点

  return [
    {
      x: [...x, ...x.slice().reverse()],
      y: [...hi, ...lo.slice().reverse()],
      fill: 'toself',
      fillcolor: 'rgba(99,102,241,0.16)',
      line: { width: 0 },
      name: '80% 置信区间',
      hoverinfo: 'skip',
      layer: 'below',
    },
    {
      x, y: actual, type: 'scatter', mode: 'lines+markers',
      name: '实际销量', line: { color: '#111827', width: 2 },
      marker: { size: 4 }, connectgaps: false,
    },
    {
      x, y: yhat, type: 'scatter', mode: 'lines',
      name: '预测值', line: { color: '#6366f1', width: 2 },
      // 预测期改为虚线，cutover 处不换行
      connectgaps: true,
    },
    {
      x: [cutover?.ds], y: [cutover?.yhat],
      type: 'scatter', mode: 'markers',
      marker: { symbol: 'circle-open', size: 10, color: '#6366f1' },
      name: '预测起点', hoverinfo: 'skip',
    },
  ]
}

// 区间带"是否可信"的视觉反馈
function paintIntervalByCoverage(coverage) {
  const trace = document.querySelector('[data-interval]')
  if (!trace) return
  trace.style.setProperty('--band-color',
    coverage < 0.8 ? 'rgba(239,68,68,0.28)' : 'rgba(99,102,241,0.16)')
}

：第一个函数里最容易被忽略的是 

 圆点——它给"历史到此结束、预测从此开始"一个明确锚点，比纯靠虚线更容易读。

，这比在角落写一行小字"区间覆盖率偏低"有效得多。覆盖率的计算逻辑是 

count(actual between lower and upper) / count

布局层面需要统一时间轴与交互：

export const baseLayout = {
  hovermode: 'x unified',           // 所有 trace 在同一 x 处统一弹层
  dragmode: 'zoom',
  xaxis: { type: 'date', rangeslider: { visible: true } },
  yaxis: { title: '需求量（件）', rangemode: 'tozero' },
  legend: { orientation: 'h', y: -0.22 },
  margin: { t: 30, r: 20, b: 60, l: 60 },
}

 让光标停在某一天时，实际值、预测值、上下界四行数据同时出现，是残差一眼可估的关键。

 提供底部时间缩略条，用户可框选放大到某个促销周，这对"预测 vs 实际对比"是刚需。

三、视图二：误差分布与残差结构 

预测曲线只能看出"偏差大不大"，看不出"偏差有没有规律"。这就是误差视图存在的理由——它负责回答第二个问题：

模型的错误是随机噪声，还是系统性偏置。

：残差图的价值在对比，而不是单看。对称且中心近零说明误差接近白噪声，模型已充分榨取信息；

明显右偏或中心远离零，则意味着模型系统性低估或高估

，应回炉重训。分组均值则是"分箱诊断"——例如发现所有周一都偏高，说明周季节性分量没学好。

import { histogram, quantile } from 'd3-array'

// 从序列计算误差分布数据
export function computeErrorDistribution(series) {
  const valid = series.filter(d => d.isActual && d.residual != null)
  const res = valid.map(d => d.residual)

  const bins = histogram()
    .value(d => d.residual)
    .thresholds(24)(valid)           // 固定 24 个桶，保证跨 SKU 可比

  const p50 = quantile(res, 0.5)
  const p90 = quantile(res, 0.9)
  const mean = res.reduce((a, b) => a + b, 0) / res.length

  return {
    bins: bins.map(b => ({
      x0: b.x0, x1: b.x1, count: b.length,
    })),
    stats: { mean, p50, p90, n: res.length },
    meanBias: mean > 0 ? '高估倾向' : '低估倾向',
  }
}

：阈值固定 24 桶是有意为之——

，否则直方图高度被桶宽稀释，看起来一样其实完全不同。

 单独提取，是因为业务更关心"最坏偏差有多大"而非平均。返回的 

 是语义标签，直接喂给摘要文案生成。

视图层用双色柱状表达方向，这是最直观的偏置可视化：

export function ResidualHistogram({ bins, stats }) {
  const max = Math.max(...bins.map(b => b.count))
  return (
    <div className="space-y-2">
      <div className="flex h-40 items-end gap-px">
        {bins.map(b => {
          const mid = (b.x0 + b.x1) / 2
          const isPositive = mid >= 0
          return (
            <div key={b.x0} className="flex-1 group relative"
                 style={{ height: `${(b.count / max) * 100}%` }}>
              <div className={`absolute inset-0 opacity-80
                ${isPositive ? 'bg-emerald-400' : 'bg-rose-400'}`} />
              <div className="absolute -top-7 left-1/2 -translate-x-1/2
                hidden group-hover:block text-xs whitespace-nowrap
                bg-gray-900 text-white px-1.5 py-0.5 rounded">
                {b.x0}~{b.x1}: {b.count} 天
              </div>
            </div>
          )
        })}
      </div>
      <div className="text-xs text-gray-500 flex justify-between">
        <span>P50 偏差 {stats.p50}</span>
        <span>均值 {stats.mean.toFixed(1)}（{stats.mean > 0 ? '系统高估' : '系统低估'}）</span>
        <span>P90 偏差 {stats.p90}</span>
      </div>
    </div>
  )
}

：正误差用绿、负误差用红，让用户一眼判断偏置方向。

 弹层显示区间与频次，避免了给几十根柱子各绑 tooltip 的性能开销。底部三列分位数排布形成一条"读图引导线"——从左到右依次是中位数、均值、极端值。

四、视图三：误差密度与异常点位 

直方图回答"分布多宽"，密度曲线回答"哪里最密"。两者并存时，用户既能看到主体聚集位置，也能看到尾部拖得多长。

：理想残差应接近钟形、中心在零、左右对称。若出现

，通常意味着模型没有识别出某个分段结构（如季节性、品类切换），把两类数据混在一起拟合，前端应把这一信号作为"建议重训"的提示输出。

点位图则把误差叠加回时间轴，是异常标注的入口：

export function ErrorScatter({ series, onSelect }) {
  const points = series.filter(d => d.isActual && d.absPctErr != null)
  return (
    <div className="space-y-3">
      {points.map(d => {
        const severity =
          d.absPctErr > 0.3 ? 'bg-rose-500' :
          d.absPctErr > 0.15 ? 'bg-amber-400' : 'bg-gray-300'
        return (
          <button key={d.ds} onClick={() => onSelect(d)}
            className="flex items-center gap-3 w-full text-left">
            <span className="w-20 text-xs text-gray-500">{d.ds}</span>
            <span className={`h-2 rounded-full ${severity} flex-1`}
              style={{ maxWidth: `${Math.min(d.absPctErr, 1) * 100}%` }} />
            <span className="w-16 text-xs tabular-nums text-right">
              {d.absPctErr > 0 ? '+' : ''}
              {(d.absPctErr * 100).toFixed(1)}%
            </span>
          </button>
        )
      })}
    </div>
  )
}

：误差用横向条形表达，长度即误差大小、颜色即严重等级（>30% 红、>15% 黄、其余灰）。这是

，比散点图更紧凑，也更便于逐条处理。点击触发 

，下一层视图（偏差分解、标注面板）就挂在它上面。

三个视图必须共享交互状态，否则就是三个孤岛：

：框选是筛选、悬停是查询，两种动作语义不同，不能用同一套状态。

 或 100ms 防抖），否则每帧都重算分箱会把主线程拖死；

：降采样绝不能只做均匀抽样——

，否则用户会觉得"图被美化过"。前端拿到降采样数据后，框选放大到某周时再请求该区间原始点位，形成"粗细两级"渲染。

多视图展示的核心不是画图的技巧，而是

让每个视图各司其职、彼此印证

：预测曲线告诉用户"我们预测了什么"，置信带补充"我们有多不确定"，误差分布揭示"模型的错误有没有模式"。三张图合起来，才把一串 

 翻译成可判断、可质疑、可下钻的决策依据。

AI 预测可视化平台 | 预测结果多视图展示：折线图、置信区间与误差分布

前端开发

人工智能

前端

开发工具

多视图预测看板通过互补视图实现深度分析：统一数据契约规范API输出，主视图用置信区间带和分界点区分历史与预测；误差分布采用固定分箱直方图暴露系统性偏置；异常清单通过颜色分级标记偏差严重度。核心要点包括指标唯一数据源、覆盖率驱动视觉反馈、超2万点降采样及框选悬停分治交互。

2026上云采购 | AI焕新·智启新局

cngw

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

AI 预测可视化平台 | 预测结果多视图展示：折线图、置信区间与误差分布

AI 预测可视化平台 | 预测结果多视图展示：折线图、置信区间与误差分布

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐