三角阶梯式分布矩阵热图在线生成工具
开始使用 三角阶梯式分布矩阵热图在线生成工具
Gotokit所有工具可直接在线使用，无需下载，无需登录。
上传宽表 CSV 模板，一键生成三角阶梯式分布矩阵热图：颜色看频次（天数），方框看四分位区间，圆点看中位数，叉号看均值。三套配色、浅色 / 深色底图，支持 PNG / SVG 导出。
关于这个工具
SCI 论文里常见的"天数 × 数值区间"矩阵图，把每个类别落在每个区间的天数铺成阶梯三角：颜色是频次深浅，同时自动框出四分位区间、点出中位数、叉出均值——分布的集中趋势与离散一次给全。区间列宽可不相等（如 0-50、50-100、100-250），三类配色与浅深底图可用。
- 导出高清 PNG / SVG，可继续编辑
- 内置多套配色主题，一键切换
- 支持浅色 / 深色画布
- 免费无水印，无次数限制
与通用制图方式对比
| 维度 | Gotokit 工具 | 常见替代方式 |
|---|---|---|
| 视觉方向 | 面向特定图法与风格快速出图 | 更通用，但前期配置更多 |
| 导出 | 更强调快速导出 PNG/SVG | 格式更多，但步骤更重 |
| 适合场景 | 汇报、专题页、社媒视觉 | 从零构建复杂分析图表 |
说明文档
什么是三角阶梯式分布矩阵热图？
三角阶梯式分布矩阵热图（Triangular Distribution Matrix Heatmap）是一种常见于城市能源、建筑能耗等 SCI 论文的复合统计图表。它把普通热图「每格一个数字」的能力扩展为「每格一个完整分布」：每一行是一个类别（如门店、城市），每一列是一个数值区间，单元格颜色表示落入该区间的样本频次（如天数）；同时图上自动叠加三个统计标记——方框表示四分位区间 IQR（中间 50% 数据的范围）、圆点表示中位数、叉号表示均值。由于各类别的分布区间沿横轴依次平移，整张图自然呈现三角阶梯形态，兼顾频次、离散程度与偏态信息。
功能特点
- 模板驱动，统计全自动：只需按宽表 CSV 模板填入各类别在每个区间的计数，Q1 / Q3 / 中位数 / 均值全部由工具按直方图加权自动推导，并按中位数自动排序成行
- 三角阶梯形态：行按中位数升序排列，各类别分布沿横轴逐级平移，自动形成论文级的阶梯构图
- 三重统计标记：四分位区间方框（看波动）、中位数圆点（看中间水平）、均值叉号（看平均水平）；圆点与叉号分离越远说明数据越偏态
- 三套配色方案：学术经典（蓝黄红，还原 SCI 原图）、商务蓝调（单色蓝阶）、暖阳热力（橙红暖调），一键切换
- 低 / 中 / 高三档分区：自动把区间列三等分并标注分区名称与覆盖范围
- 浅色 / 深色双模式：一键切换底图风格，适配论文、PPT、报告与网页场景
- 多格式导出：支持高清 PNG（2x 像素比）与矢量 SVG 两种格式下载
- 本地隐私处理：所有数据均在浏览器本地解析和渲染，不会上传至服务器
适用领域
- 经营分析：对比各门店 / 分公司日订单量、日销售额的分布、波动与偏态，识别「稳定型」与「促销拉动型」业务
- 科研论文：城市能耗、气候、生态、基因组等多组样本的分布矩阵对比，复刻 SCI 经典复合热图
- 人力资源：各部门 / 员工月度业绩分布对比，看中位数与均值偏离程度
- 互联网产品：各城市 / 渠道日活跃用户数分布矩阵，定位高波动渠道
- 质量与运营：各产线日均产量分布、各客服工单量分布的并行对比
使用步骤
- 点击「下载 CSV 模板」获取示例文件
- 按模板格式填入数据：首行表头为
store+ 各数值区间列（如"0-50"），首列为类别名，单元格为该区间内的天数 / 次数 - 点击上传区域或拖拽 CSV 文件到页面中
- 自动生成三角阶梯热图，可切换配色方案与浅色 / 深色模式预览
- 可选：在输入框修改图内标题
- 满意后点击「下载 PNG」或「下载 SVG」保存图片
数据格式说明
| 字段 | 必填 | 说明 |
|---|---|---|
| 首行表头 | 是 | 第一列为类别字段名（如 store），其后每列为一个数值区间标签（如 “0-50”、“50-100”），区间宽度可以不相等 |
| 首列 | 是 | 类别名称（门店、城市、部门等） |
| 单元格 | 是 | 该类别的样本落入此区间的次数 / 天数，非负数字，可留空（视为 0） |
限制：最多 40 行类别、30 个区间列，至少需要 3 个区间列；每行至少有一个正数。区间标签能解析为数值范围（如 “0-50”）时，统计值按真实数值插值计算；否则按区间序号近似计算。四分位区间、中位数、均值与行排序均由工具自动推导，无需手工计算。
这张图怎么读
每行是一个类别的分布：颜色越深表示落在该区间的天数越多，深色连成的带状区域就是数据的密集区。自动框出的四分位范围与中位数点告诉你典型区间，均值叉号若明显偏离中位点说明分布偏斜。行间对比看哪行更集中、哪行更散。
关于 Gotokit
Gotokit 致力于提供简洁、高效、美观的在线工具。这款三角阶梯式分布矩阵热图生成器采用 ECharts 渲染引擎，无需注册登录，打开即用，数据完全本地处理，保障您的隐私安全。
常见问题
区间宽表怎么组织：首行表头、首列类别、中间填天数？
宽表矩阵格式：首行表头为类别字段名（如 store）+ 各数值区间列（如 "0-50"、"50-100"，区间宽度可以不相等），首列为类别名，单元格为该区间内的天数 / 次数。最多 40 行类别、20 个区间列，至少 3 个区间列。
四分位区间、中位数、均值需要我自己计算吗？
不需要。工具按直方图加权自动推导每行的 Q1 / Q3 / 中位数 / 均值：区间标签能解析为数值范围（如 "0-50"）时按真实数值插值计算，否则按区间序号近似计算。行排序（形成三角阶梯）也按中位数自动完成。
这个图表适合做汇报、论文还是社媒图片？
都适合，但重点不同。汇报更看重可读性，论文更看重结构与注释，社媒更看重风格和画面密度。建议根据场景调整配色、标签和导出尺寸。
导出 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 导出。
表格型热力图在线生成工具 - 带数值标注的矩阵热力图
矩阵热力图的“数字版”：每个单元格既着色又直接印出数值，发散色带以 0 为界向正负两端渐变，右侧竖条色标自带刻度，适合看正负不对称与离群格。经典、彩虹、莫兰迪三套配色，浅色 / 深色底图，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 导出。
冷暖撞色渐变彩带连线弦图生成工具
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 文件。