图表示例库
10 类常用图表,全部由同一套 原生 SVG 引擎绘制:无第三方库、无 Canvas 像素化、 可直接导出矢量图。每张卡片右上角可查看配置、导出 SVG 或 PNG。
显示 10 / 10 个示例
图表中的数值、城市与排名均为随机生成的演示数据,仅用于展示图形表现,不代表任何真实统计结果。
HOW IT WORKS
实现说明
三个文件构成全部绘图能力,可单独抽出来复用。
统一渲染入口
Chart.line(host, cfg) 负责测量容器、创建 SVG、按配置绘制,并通过 ResizeObserver 在容器变化时重绘,保证响应式下不变形。
共享视觉语言
坐标轴、网格、图例、Tooltip 与配色全部集中在引擎内,新增图表类型时只需实现绘制函数, 视觉风格自动保持一致。
可导出、可访问
SVG 可直接序列化下载,或经 Canvas 转成 2× PNG;每个图表容器带 role="img" 与中文描述,支持键盘聚焦。