表格型热力图在线生成工具 - 带数值标注的矩阵热力图
开始使用 表格型热力图在线生成工具 - 带数值标注的矩阵热力图
Gotokit所有工具可直接在线使用，无需下载，无需登录。
上传宽表 CSV 模板，一键生成带数值标注的表格型热力图（Annotated Heatmap）：以发散色带展示二维矩阵的数值分布，每格标注整数数值，右侧为带刻度的垂直色条；内置经典参考、彩虹、莫兰迪三种配色方案，浅色 / 深色底图，可导出 PNG / SVG。
关于这个工具
热力图擅长暴露模式，但纯色块让你读不出精确值。这张表格型热力图在每一格里既填色又直接印数值——正负以 0 为中心对称渐变，负数蓝、正数红，深浅即幅度；右侧竖条色标带刻度，方便对色。适合相关系数、基因表达、问卷评分这类「矩阵 + 数值」的数据，颜色与数字一起读。
- 导出高清 PNG / SVG，可继续编辑
- 内置多套配色主题，一键切换
- 支持浅色 / 深色画布
- 免费无水印，无次数限制
与通用制图方式对比
| 维度 | Gotokit 工具 | 常见替代方式 |
|---|---|---|
| 视觉方向 | 面向特定图法与风格快速出图 | 更通用，但前期配置更多 |
| 导出 | 更强调快速导出 PNG/SVG | 格式更多，但步骤更重 |
| 适合场景 | 汇报、专题页、社媒视觉 | 从零构建复杂分析图表 |
说明文档
什么是表格型热力图？
表格型热力图（Annotated Heatmap，也叫带数值标注的矩阵热力图）用一张二维矩阵展示数据的数值分布：行和列分别代表两个维度的类别，交叉格子的颜色深浅或色相随数值连续变化，同时每个格子内直接标注具体数值，兼顾”整体分布一眼看清”与”单点数值精确可查”。当数值有正有负时，通常采用发散色带——负值一端偏冷色、零值居中为浅中性色、正值一端偏暖色，配合右侧竖向连续色条作为图例。本工具严格还原参考示意图的风格：白底、格子间细白缝、暗玫红轴文字、右侧竖向色条带刻度与竖排标题，并额外提供彩虹与莫兰迪两种配色方案。
功能特点
- 模板驱动，所见即所得：无需任何可视化基础，下载 CSV 模板、填入数据、上传即可生成表格型热力图
- 宽表矩阵结构：首行为 X 轴类目、首列为 Y 轴类目、左上角留空，交叉格填数值，支持 2
40 行 × 260 列 - 逐格数值标注：每个格子直接显示数值，颜色过深时自动切换为白字，保证可读性
- 发散色带自动取整：以 0 为中心向正负两端发散，色条范围自动按对称整数刻度（如 ±60）取整，刻度清晰
- 三种配色方案：参考图经典（青→米白→橙→酒红）、彩虹（紫→蓝→绿→黄→红）、莫兰迪（灰蓝→米灰→陶土），下拉菜单一键切换
- 浅色 / 深色双模式：一键切换底图风格，深色模式配色整体提亮，适配 PPT、报告、网页等场景
- 多格式导出：支持高清 PNG（2x 像素比）和矢量 SVG 两种格式下载
- 本地隐私处理：所有数据均在浏览器本地解析和渲染，不会上传至服务器
适用领域
- 科研与学术论文：展示基因表达矩阵、相关系数矩阵、实验条件 × 测量指标的结果分布
- 数据分析与商业智能：呈现地区 × 产品、月份 × 渠道等交叉维度的销售额、增长率或达成率
- 金融与风控：绘制行业 × 期限的利差矩阵、组合因子暴露热力分布
- 运营与用户研究：展示星期 × 时段的活跃度、页面 × 版本的转化率对比
- 报告与演示：为 PPT、数据海报、年度报告添加信息密度高又美观的矩阵图，提升说服力
如果你的数值没有正负对称含义、只是单边大小比较，也可以改用单色渐变的三角阶梯分布热力图；表格型热力图更适合”有正有负、需要逐格读数”的矩阵数据。
使用步骤
- 点击「下载 CSV 模板」获取示例文件
- 按模板格式填入你的数据：首行为 X 轴类目、首列为 Y 轴类目、左上角留空，交叉格填数值
- 点击上传区域或拖拽 CSV 文件到页面中
- 自动生成表格型热力图，可下拉切换配色方案、切换浅色 / 深色模式预览
- 满意后点击「下载 PNG」或「下载 SVG」保存图片
数据格式说明
| 位置 | 必填 | 说明 |
|---|---|---|
| 首行 | 是 | X 轴类目名称（如 1~36），左上角第一格留空 |
| 首列 | 是 | Y 轴类目名称（如 1~20） |
| 交叉格 | 是 | 数值，支持正负整数或小数 |
限制：240 行 × 260 列；交叉格均须为数字。色带以 0 为中心向正负两端发散，色条范围按数据绝对值自动对称取整（如 ±60），共 7 档刻度。
这张图怎么读
颜色只负责方向与量级，精确读数要看格内数字。以 0 行为基准：往上一侧为正值、往下一侧为负值，离 0 越远颜色越饱和。找异常值别只看单格，先扫整行整列的色深是否突变，再回读格子数字确认。
关于 Gotokit
Gotokit 致力于提供简洁、高效、美观的在线工具。这款表格型热力图生成器采用 ECharts 渲染引擎，无需注册登录，打开即用，数据完全本地处理，保障您的隐私安全。
常见问题
宽表格式怎么摆：首行是 X 轴、首列是 Y 轴、左上角留空？
宽表矩阵结构：首行为 X 轴类目（左上角第一格留空），首列为 Y 轴类目，交叉格填数值。支持 2~40 行 × 2~60 列，数值可为正负整数或小数。
色条的范围是如何确定的？
色带以 0 为中心向正负两端发散，范围取数据最大绝对值后自动向上对称取整（如数据在 ±47 内则取 ±50，±57 内则取 ±60），共 7 档刻度，保证 0 值始终对应中间的中性色。
这个图表适合做汇报、论文还是社媒图片？
都适合，但重点不同。汇报更看重可读性，论文更看重结构与注释，社媒更看重风格和画面密度。建议根据场景调整配色、标签和导出尺寸。
导出 PNG 和 SVG 应该怎么选？
做演示、社媒或聊天发送时，PNG 更直接；需要继续编辑、放大印刷或嵌入设计系统时，SVG 更合适。若平台不支持 SVG，优先导出高分辨率 PNG。
这个工具和通用图表软件相比有什么区别？
这里的工具更偏向某一种版式或图表语法，打开即可直接得到风格明确的结果；通用图表软件适合从零搭建各种图，但配置和调整成本通常更高。
手机和平板上也能用吗？
大多数工具都支持现代移动浏览器，但复杂图表、大文件处理或精细拖拽类工具在桌面端体验通常更好。若你需要更高效率，建议优先使用电脑。
更适合一次性使用还是长期工作流？
它最擅长快速完成单次任务、核对结果或临时导出；如果你需要持续自动化、多人协作或深度集成，通常还需要结合桌面软件、脚本或企业系统。
第一次使用时，怎样更快得到满意结果？
建议先使用页面内置示例或最小数据样本，确认输入格式、导出结果和显示样式，再替换为正式内容。这样通常能更快定位格式问题或场景不匹配的问题。
更多设计工具
设计工具全部工具环形证据网络图在线生成器
独立录入节点患者数和成对比较研究数，从 CSV 生成环形证据网络图。圆点面积表示患者规模，曲线粗细表示研究数量，支持深浅色模式及 PNG/SVG 导出，数据在浏览器本地处理，不执行统计分析。
潘通选色卡/拾色器
在线拾色并匹配最近潘通色号，支持 HEX/RGB 显示、复制与快速检索链接。
色轮取色器
基于 iro.js 的在线取色器，支持色轮交互、HEX/RGB/HSL/HSV 显示、复制与调色板管理。
界面配色方案生成器
基于 iro.js 色轮 + HSL 算法的配色方案生成器，提供 7 种配色规则（互补/类似/三角/分裂互补/四角/单色/正方形），支持实时 UI 组件预览与一键导出。
印刷品潘通色+CMYK+RGB配色工具
基于 iro.js + 150+ 潘通色卡的印刷品配色工具，支持 2-5 色组合、自动匹配潘通色号、CMYK 四色值实时计算与模拟铜版纸印刷预览。
在线渐变艺术生成器
受 Art of the Gradient 启发的在线渐变工具，支持多图层径向渐变、混合模式、随机生成与 CSS 一键复制。
在线弦图生成器 - 圆形彩色关系图
用圆形弦图读关系：节点排列成环，弧长即节点总流量，弦带的宽度与颜色把两两之间的流向强弱直接画出来。适合迁移、贸易、通话、引用等成对关系数据，三套配色主题，导出 PNG / SVG，全程本地处理。
雅致风格按日期分布环形气泡图
把全年事件按「月 + 日」投到同心日环上：月份在外圈、日期向内对齐，事件化作柔和的渐变气泡悬在对应的日期格上，密度与节日感一眼可见。雅致低饱和配色，支持浅色 / 深色底图与 PNG / SVG 导出。
双色渐变1维南丁格尔玫瑰图在线生成工具
每个花瓣由两种渐变色过渡晕染、呈环形对称展开的维南丁格尔玫瑰图生成器。中心可标注年份文字，支持浅色 / 深色底图与 PNG / SVG 导出，全程本地渲染。
海报风格两列桑基图在线生成工具
海报版两列桑基图：左侧节点逐个涂上明快的彩色，右侧节点按权重压出深浅灰阶，每条流带里直接标名称、数值与占比，版面平整适合直接当海报主视觉。支持浅色 / 深色底图与 PNG / SVG 导出。
在线河流图生成器 - 多层平滑堆叠流图工具
平滑河流图（Streamgraph）：多条序列围绕一条随年份摆动的零基线上下对称堆叠，层与层之间平滑起伏如河流改道，适合把多组成部分随时间的变化叠在一起比较总量与份额。2-16 个系列、3-40 行，支持浅色 / 深色底图与 PNG / SVG 导出。
莫兰迪配色在线河流图生成工具 - 蓝粉渐变流图
莫兰迪蓝粉配色的河流图（Streamgraph / ThemeRiver）：低饱和的蓝、灰蓝、藕粉让叠层河流安静不刺眼，层与层之间留出细白缝、顶部横排图例对号入座。适合既要叠层看趋势、又要温和高级配色出图的场景，支持浅色 / 深色底图与 PNG / SVG 导出。
连续误差带图在线生成工具 - 置信区间带图表
连续误差带图：主线之下不画固定的阴影条，而是一条逐点变宽的贴身误差带，波动大的时段带子自然鼓起、平稳的时段收窄，把「趋势」与「不确定」叠在同一张图里。经典米白、彩虹、莫兰迪三套配色，浅色 / 深色底图，PNG / SVG 导出。
曲线茎线条气泡图在线生成工具 - 对数轴棒棒糖气泡图
茎线气泡图（Line Bubble Chart）：事件沿时间轴排列，一条细茎从底脊向右微微弯起、顶端顶起半透明气泡，Y 轴采用对数刻度让 0.7 与 14 这样跨数量级的值同框比较，气泡大小按平方根映射数值。五类配色、浅色 / 深色底图、PNG / SVG 导出，适合历史时间线与灾难 / 事件数据。
有机融合气泡枝干图在线生成工具 - Morph 分区气泡图生成器
有机融合气泡枝干图（Morph Bubble Zoning Diagram）：子节点不再悬空，而是与所属中心节点像油滴聚并一样被 Metaball 曲面熔接，标签沿节点外缘圆弧排列，节点之间用虚线相连，青绿蓝四色和谐。适合表达「中心 - 成员」聚落结构，支持浅色 / 深色底图与 PNG / SVG 导出。
在线扇贝弦图生成工具 - 双分区引用弦图生成器
扇贝形双分区弦图：下方分组弧按总流量加权成不等宽扇贝，上方目标节点以等宽弧扇面排开，两侧之间的流量化作细缎带沿过圆心的贝塞尔曲线弯曲相连，节点标签沿径向排版不乱。适合「少数分组 → 大量目标」的二分关系数据，支持浅色 / 深色底图与 PNG / SVG 导出。
带误差棒分组柱状图在线生成工具 - 双系列学术柱形图
学术图表风的带误差棒分组柱状图：双系列浅色柱体并排、黑色 I 形误差棒钉在柱顶、全框轴线加 45° 斜排的 x 轴标签，直接复刻论文配图的克制版式。适合实验组间测量对比，支持浅色 / 深色底图与 PNG / SVG 导出。
山峦图在线生成工具 - 纵向分层多重面积图生成器
山峦图（Ridgeline / Joy Plot）：把多个分布沿各自独立水平基线层层排开，山形平滑起伏、互不遮挡，左侧逐行标注系列名、底部圆点图例收尾，多组分布的峰值与离散度并排比较。支持 6 个系列以内、最多 400 行，浅色 / 深色底图与 PNG / SVG 导出。
径向堆叠条形图在线生成工具 - 环形赛道图生成器
径向堆叠条形图（Racetrack / Circular Bar Plot）：每一行数据化作一条同心圆环，环长按堆叠类目分成弧段、每段与总值成比例，像一圈圈赛车跑道标注着年度构成。环末端以斜体标出整环总值，右侧竖排方形图例对色。支持浅色 / 深色底图与 PNG / SVG 导出。
弧形扇面叙事桑基图在线生成工具
复刻截图中的左侧扇形来源、中央倾斜事件条与右侧角色弧线，按影响力线宽生成叙事型桑基图，支持 CSV、PNG 与 SVG。
对数坐标气泡散点图在线生成工具
上传 CSV 生成双对数坐标气泡散点图：气泡大小编码第三维、按分组自动配色，自动叠加 y=x 对角参考虚线与 R² / P / n 统计注释，支持深浅色与 PNG / SVG 导出。
五列淡彩渐变桑基图在线生成工具
五阶段桑基图，把「来源 → 中转 → 分拨 → 渠道 → 终端」的逐级分流一次画完：每个节点独立淡彩配色，流带沿流向做「源色 → 目标色」渐变并半透明叠印，细窄节点配内层白底药丸标签。三套柔和配色、浅色 / 深色底图与 PNG / SVG 导出。
双色对冲收支流桑基图在线生成工具
基于 ECharts 标准桑基布局的左→右分层双色收支桑基图：收入侧青色自左侧一层层汇入，越过中央那根青转品的枢纽竖条后，支出侧以品红向右逐级发散去。同族按节点吞吐量排名映射七档明暗，色越深、带越粗代表金额越大，细成一条线的浅色细带是占比极小的科目；标签按列分级并自动避让。三套双色方案、浅色 / 深色底图与 PNG / SVG 导出。
能源流向桑基图在线生成工具
自由深度的能源流向桑基图，把「能源来源 → 转换载体 → 终端用途」的逐级流动一次画完：每个节点独立大地色配色，流带沿流向做「源色 → 目标色」渐变并以约 0.2 极低不透明度叠印，所有节点标签统一置于竖条右侧且无底色遮挡。三套配色、浅色 / 深色底图与 PNG / SVG 导出。
代谢物通路富集桑基图在线生成工具
把「代谢物 → 通路」的两列富集桑基图与右侧富集气泡面板一次画完：流带统一浅灰色并以约 0.6 半透明度叠印，交叠处自然加深；所有节点标签统一置于竖条左侧、右对齐并垂直居中对齐，不带药丸底色遮挡流带；左列约 50 个代谢物取淡彩多色相、右列通路取宝石大地色；气泡面板与通路逐行对齐，x 为 -Log(Pvalue)、面积映射 Count、红色深浅映射 Hit Ratio。支持浅色 / 深色底图与 PNG / SVG 导出。
四列分阶段裁决桑基图在线生成工具
四阶段决策桑基图，把「来源 → 目的地 → 裁决结果 → 按来源分解」的漏斗一次画完：总量从左侧分层流入，右侧按来源拆出被接受与拒绝的对比条，附年份徽章与三套配色，适合审稿、审批、招生等决策流数据。支持深浅色底图与 PNG / SVG 导出。
三列影响力流向桑基图在线生成工具
把「情境类型 → 场景 → 角色」三段串成一张影响力流向图：流带粗细直接等于数值大小，越粗的场景对结局影响越大。右列节点颜色自动继承其最大来源分类，底部图例直接读取你 CSV 里的节点名，换成自己的数据即刻改头换面。附图内标题与说明文字，支持浅色 / 深色底图与 PNG / SVG 导出。
三角阶梯式分布矩阵热图在线生成工具
把「每个类别落在各数值区间多少天」的频率矩阵排成阶梯式三角形热图：颜色即频次深浅，四分位区间自动框出、中位数圆点与均值叉号自动叠加，一眼看到整组分布的形态与离散。3 套配色、浅色 / 深色底图与 PNG / SVG 导出。
冷暖撞色渐变彩带连线弦图生成工具
Circos 风格冷暖撞色弦图：暖色节点与冷色节点各自连成连续弧段，节点之间的连线渲染成从一端暖色渐变到另一端冷色的双色丝带，阵营流动一眼分明。适合基因、网络、生态等成对矩阵数据，支持深色模式与 PNG / SVG 导出。
圆形气泡弦图在线生成工具
气泡弦图把成对关系数据摆上一个大圆：每个节点是一颗气泡，气泡越大代表节点规模越大，颜色沿青蓝连续色带由浅到深代表强度越高；节点间的弦线以向心曲线相连，粗细代表关系强弱，节点名沿大圆外侧辐射排布。适合科研合作网络、供应链依赖、部门往来等「关系 + 节点指标」场景，30 个节点左右依然清爽，支持深色模式与 PNG / SVG 导出。
径向弧形流向图在线生成工具
径向弧形流向图：把「国家 → 组织」的流向摆在同心布局里，上方拱形弧按大洲分段、国家刻度沿弧排布，流线从刻度出发向下收束到按总流量缩放的组织节点。适合全球贸易、援助、移民等流向叙事，支持深色模式与 PNG / SVG 导出。
双色半环二分流向弦图在线生成工具
双色半环二分流向弦图：把「源 → 目标」的二分流向摆在双层半环上——上环 slate 蓝灰源扇区、下环粉红目标扇区，节点宽度按总流量加权，贝塞尔流线穿心直指目标并带方向箭头。适合威胁建模、能力映射、需求追溯等两组角色关系，支持深色模式与 PNG / SVG 导出。
双扇形彩色弦图生成工具
双扇形彩色弦图把二分流量摆成沙漏：顶部五个实色扇区、底部五个同色系浅色扇区各自沿同一圆弧展开成对置扇形，3 点与 9 点方向留出开口；半透明彩色弦带穿过中心收腰相连，每个扇区自带 0 起的刻度轴（主刻度每 10 单位）。适合渠道流转、成本分摊、需求覆盖等两组角色的矩阵数据，支持深浅色与 PNG / SVG 导出。
Circos 共线性弦图
Circos 共线性弦图不是把节点当离散分类，而是把圆环分段当作带一维坐标的连续轨道：外侧刻度显示区间位置，中心细曲线表示“这一段区间对应那一段区间”的映射 / 共线性关系。适合基因组共线性、块迁移、地址区间映射、批次重组与地层对比，支持深浅色与 PNG / SVG 导出。
分组流向弦图在线生成工具
把「很多来源汇入少数分组」画成一个圆环：左半圈的小弧是各个来源（统一紫色），右半圈的大弧是分组（每组一色，配右侧竖排图例），弧宽等于节点总量，中间彩带按目标分组着色。分组弧内还有白色分隔线，一眼看清每组由几个来源构成。适合样本归类、渠道归因、主题归属与批次去向，支持深浅色与 PNG / SVG 导出。
光谱编号弦图在线生成工具
把两两关系矩阵画成一个光谱圆环：节点按总量从大到小顺时针排列，弧色沿连续色带采样，色相即排名（最红最大、最蓝最小）；每条关系是等宽青绿细线，从两端弧段中点向圆心收拢并交叉，弧内白色分隔线即该节点的连接清单，中心另有半透明粉色圆环。支持深浅色与 PNG / SVG 导出。
弧线图在线生成工具
经典弧线图（Arc Diagram）：把共现关系压到一条水平基线上，带分组的彩色刻度块贴线排列、竖排分组色标在左侧，关系强度由上方半圆弧线的粗细与高低表达，最多 400 条关系依然清爽。适合时序叙事与关系对排序，支持深色模式与 PNG / SVG 导出。
分组配色玫瑰图在线生成工具
按分组给每一瓣着色、组与组之间色相自然衔接的南丁格尔玫瑰图生成器。把类别、数值与分组拖成 CSV 即可排版出整环花图，支持标签开关、浅色 / 深色底图与 PNG / SVG 导出。
Excalidraw 在线白板
基于 Excalidraw 的在线手绘白板，支持流程图、草图、线框图与图形标注，浏览器本地编辑并可导出 PNG、SVG 与 .excalidraw 文件。