计划员最棘手的问题其实是第三个：

 如果系统只能回答到"模型说是趋势驱动的"，这句话在采购会议上毫无用处。

SHAP 的价值，在于它把每个预测拆解成一串

——价格压低了 88 件、促销拉高了 153 件、节前效应贡献 60 件，加总后恰好等于预测值相对基线偏离的部分。前端要做的，是把这套加法结构变成可悬停、可排序、可下钻的交互语言。本文将拆解 SHAP 的两种语义（全局重要性与局部解释）、三种经典视图的取舍，以及数据契约和性能上的工程要点。

一、先弄清两种 SHAP：别把"重要性"和"归因"混为一谈 

这是 SHAP 前端最容易翻车的地方。团队里常有人说"展示特征重要性"，但这个说法其实模糊地指了两件不同的事：

：三者的数据量差着几个数量级。全局重要性只需几十个数值，可直接打进首屏 HTML；局部解释每个点乘每个特征，90 天预测窗口乘 20 个特征就是 1800 条，适合按点懒加载；蜂群图则要铺开所有样本的所有特征，动辄数万点，

。把它全塞进首屏 JSON，就是一次典型的包体灾难。

数据契约上，建议把两种语义分字段返回：

 是 E[f(x)]，即所有样本的平均预测，它是 waterfall 的起点，绝不可省略。

 降序，保证概览图永远从上到下是"影响最大的排最前"。

 用日期做 key 便于 O(1) 索引；单点贡献里 

 是已经换算成业务量纲（件）的值，

 是原始 SHAP 值（模型输出空间），

——量纲值用于读图，原始值用于跨模型对比。

二、视图一：全局重要性条形图 

这是最低成本也最常被消费的一张图，价值在于让计划员秒懂"哪些因素值得我们去管"。

：降序后只取 Top 10 是经验值——超过 10 条人眼就难以比较长度了。

（如是否为可控特征），而不是随机上色。建议把"价格、促销、库存"标为可控特征染橙色，把"星期、节假日、天气"标为不可控特征染灰色，这样计划员能立刻看出"哪些是我能干预的"。

import { max, scaleLinear, format } from 'd3'

export function GlobalImportance({ data }) {
  const sorted = [...data].sort((a, b) => b.meanAbs - a.meanAbs).slice(0, 10)
  const x = scaleLinear().domain([0, max(sorted, d => d.meanAbs)]).range([0, 100])
  const controllable = new Set(['price', 'promo_intensity', 'inventory', 'stockout'])

  return (
    <ul className="space-y-1.5">
      {sorted.map(d => (
        <li key={d.f} className="flex items-center gap-2 group">
          <span className="w-32 text-xs text-right text-gray-600 truncate">
            {d.f}
          </span>
          <span className="flex-1 relative h-5 bg-gray-100 rounded">
            <span className={`absolute inset-y-0 left-0 rounded
              ${controllable.has(d.f) ? 'bg-orange-400' : 'bg-gray-400'}`}
              style={{ width: `${x(d.meanAbs)}%` }} />
            <span className="absolute inset-0 flex items-center justify-end
              pr-1 text-[10px] opacity-0 group-hover:opacity-100">
              {d.meanAbs} 件
            </span>
          </span>
        </li>
      ))}
    </ul>
  )
}

 百分比而非 SVG，首屏零额外开销。

 显示具体数值，平时只留长度，是

。橙色标签是最关键的语义层：计划员扫一眼就知道"促销强度是可控杠杆，优先关注"，这正是这张图从"好看"变成"有用"的分界。

三、视图二：单点归因 Waterfall 

单点解释是 SHAP 交互的主战场。计划员点中某一天，侧栏应立刻展开一个可验证的加法故事：

基线 1200 件 + 促销 +153 件 − 价格 −88 件 + 节假日 +60 件 + 趋势 +45 件 = 预测 1370 件。

它把模型解释变成可手算校验的东西

。每行只画一条短柱，基线柱在左、各项贡献向右堆叠，最后一根是预测值。如果用户自己拿计算器加一遍能对上，信任就建立起来了。这也是 SHAP 比"特征重要度百分比"更有说服力的原因。

export function ShapWaterfall({ baseline, shap, yhat }) {
  // 按绝对贡献降序，让最关键的贡献排在前面
  const items = [...shap].sort((a, b) => Math.abs(b.v) - Math.abs(a.v))
  let acc = baseline

  return (
    <div className="font-mono text-xs">
      <div className="flex items-end gap-1 h-44 border-b border-gray-300 pb-1">
        {/* 基线柱 */}
        <div className="w-14 flex flex-col justify-end items-center">
          <span className="text-[10px] mb-1">{baseline}</span>
          <div className="w-8 bg-gray-400" style={{ height: '45%' }} />
          <span className="text-[10px] mt-1 text-gray-500">基线</span>
        </div>

        {items.map(it => {
          const positive = it.v >= 0
          acc += it.v
          return (
            <div key={it.f} className="w-14 flex flex-col justify-end items-center group">
              <span className={`text-[10px] mb-1 ${positive ? 'text-emerald-600' : 'text-rose-600'}`}>
                {positive ? '+' : ''}{it.v}
              </span>
              <div className={`w-8 ${positive ? 'bg-emerald-400' : 'bg-rose-400'}`}
                   style={{ height: `${Math.abs(it.v) / baseline * 60}%` }} />
              <span className="text-[10px] mt-1 text-gray-500 truncate w-14 text-center">
                {it.f}
              </span>
            </div>
          )
        })}
      </div>

      <div className="flex justify-between mt-2 px-1">
        <span>预测合计</span>
        <span className="font-bold">{yhat}</span>
      </div>
      <div className="flex justify-between px-1 text-gray-500">
        <span>实际值偏差</span>
        <span>{yhat - (actual ?? yhat)} 件</span>
      </div>
    </div>
  )
}

 累加器虽然在循环里持续累加却只在渲染中使用，目的是让读者能逐行走查"每一步加了多少"。正贡献用绿色、负贡献用红色，方向与颜色严格对应，避免误读。

最后一行必须给出"预测合计"和"实际值偏差"

，否则解释到预测值为止，用户仍会追问"那它为什么还是没预测准"——把残差显式写出来，才是诚实的归因。

waterfall 只讲一个点，蜂群图（beeswarm）讲的是

，它回答的问题是：这个特征对预测的作用方向稳定吗？还是有时推高、有时压低？

 的 SHAP 点如果整体在零右侧、且越红（促销越强）越靠右，就说明"促销确实推高了预测"；如果点散落在零两侧没有明显色阶规律，则说明这个特征的影响不稳定、可能与其他特征共线性。

这是诊断特征质量的利器，也是全局重要性的必要补充

——重要性高但方向混乱的特征，往往不值得信任。

import { scaleLinear, scaleSequential } from 'd3'
import { interpolateInferno } from 'd3-scale-chromatic'

// 把某特征的全样本 SHAP 值铺成可渲染的二维点集
export function layoutBeeswarm(values, rawFeatureValues, width, height) {
  const x = scaleLinear()
    .domain([min(values), max(values)])
    .range([0, width])

  const color = scaleSequential(interpolateInferno)
    .domain([min(rawFeatureValues), max(rawFeatureValues)])

  // 按 SHAP 值排序，纵向做简单堆叠抖动，避免点重叠
  const sorted = values
    .map((v, i) => ({ v, raw: rawFeatureValues[i], i }))
    .sort((a, b) => a.v - b.v)

  let stack = 0
  return sorted.map((d, i) => {
    stack = i % 2 === 0 ? stack + 6 : stack - 6
    return {
      cx: x(d.v),
      cy: height / 2 + stack,
      fill: color(d.raw),
      raw: d.raw,
    }
  })
}

：排序后按奇偶交替上下堆叠，是最轻量的防重叠策略，万点以内够用。颜色域必须取自该特征的真实取值范围，而不是固定色阶——

否则跨特征切换时颜色失去可比性

。生产环境若点数上万，此函数应放到 Web Worker 或改用 canvas 批量 

力图（force plot）适合做"某个点 vs 全局分布"的对照，是蜂群图的点位化版本：

export function ForcePlot({ baseline, shap }) {
  const positive = shap.filter(s => s.v > 0).sort((a, b) => a.v - b.v)
  const negative = shap.filter(s => s.v < 0).sort((a, b) => b.v - a.v)
  return (
    <div>
      <div className="flex h-6 text-[10px]">
        {negative.map(s => (
          <span key={s.f} className="bg-rose-400 text-white px-1 truncate"
                style={{ flex: Math.abs(s.v) }}>
            {s.f}
          </span>
        ))}
      </div>
      <div className="text-center text-xs bg-gray-200 py-0.5">
        基线 {baseline}
      </div>
      <div className="flex h-6 text-[10px]">
        {positive.map(s => (
          <span key={s.f} className="bg-emerald-400 text-white px-1 truncate"
                style={{ flex: s.v }}>
            {s.f}
          </span>
        ))}
      </div>
    </div>
  )
}

：用 flex 权重直接映射贡献大小，负值从基线向左排、正值向右排，

。这种图的优势是"一眼看出模型在往哪个方向用力"，缺点是宽度受比例限制，极小值会被挤压到看不见，因此只适合 Top 若干特征。

五、交互设计：悬停、下钻与对比 

单点归因真正的杀伤力来自联动。悬停某特征，全局图高亮该特征的所有样本分布，这才是"从点回到面"的闭环：

：这个联动解决了一个实际问题——用户看到某特征贡献很大，自然想问"那它在哪些天最猛？"直接列出 Top 5 日期并支持跳转，把探索路径从三步压成一步。

所有跨视图交互都要遵循同一原则：用户产生疑问的地方，就是下一个交互入口。

对比两个模型版本的特征重要性，是验证迭代效果的关键场景：

// 双模型 SHAP 重要性对比
export function compareImportance(a, b) {
  const mapA = new Map(a.map(d => [d.f, d.meanAbs]))
  const all = new Set([...a.map(d => d.f), ...b.map(d => d.f)])
  return [...all].map(f => ({
    f,
    a: mapA.get(f) ?? 0,
    b: (b.find(d => d.f === f)?.meanAbs) ?? 0,
  })).map(d => ({ ...d, delta: d.b - d.a }))
}

 做索引把查找从 O(n) 降到 O(1)，因为特征数可能几十上百，且对比会在每次筛选变化时重算。

，否则图表会出现"某个模型有、另一个没有"的视觉空缺，容易被误读为数据错误。返回的 

 驱动箭头方向，直接呈现"这个特征的重要性是升了还是降了"。

六、性能：SHAP 是数据量最大的视图 

注：10 万点纯 SVG 方案不可接受，必须走 canvas 或 WebGL。

：蜂群图的点数阈值建议压在 2000 以内。降采样要用

（按特征取值分层后每层抽固定比例），保证颜色分布不被破坏。另一个常见陷阱是：把 SHAP 值保留在 state 里做全局缓存，未设置 TTL 导致内存膨胀——

SHAP 数据按 SKU 缓存、切换品类时主动清理

SHAP 可视化的本质，是把模型的"黑箱内部"翻译成业务语言。本文给出了一条从概览到细节的完整路径：

全局重要性条形图告诉计划员该盯哪些可控杠杆，单点 waterfall 把任意一天的解释变成可手算校验的加法故事，蜂群图则揭示特征作用方向的稳定性并承担特征质量诊断。

计划员最棘手的问题其实是第三个：为什么这天会涨这么多？ 如果系统只能回答到"模型说是趋势驱动的"，这句话在采购会议上毫无用处。

AI 预测可视化平台 | 特征重要性可视化：SHAP 值的前端交互式呈现

前端开发

人工智能

前端

开发工具

SHAP可视化将模型预测拆解为带量纲的贡献值，通过全局重要性条形图、单点归因Waterfall和蜂群图三大视图，实现从概览到细节的完整交互路径。核心要点：区分全局重要性与局部归因语义、基线值必传、量纲值与原始值双存、蜂群图需降采样走canvas。该方案让计划员可验证预测逻辑，识别可控杠杆，提升决策信任度。

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

AI 预测可视化平台 | 特征重要性可视化：SHAP 值的前端交互式呈现

AI 预测可视化平台 | 特征重要性可视化：SHAP 值的前端交互式呈现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐