图表生成器

使用说明

数据一行一个点，格式是「标签, 数值」，逗号和制表符都当分隔符，从表格软件里直接复制的制表符内容粘进来就能用。一行给两列以上数值就是多组数据，比如「季度, 线上, 线下」，这时会按分组柱状图或折线图画出来；柱状图勾上「多组数据堆叠」就把同一类目的柱子摞起来。首行除第一列外一个数字都读不出来时会被当成系列名的表头，「季度, 线上, 线下」正好命中；而「一月, 10」这种只有一列数字的行不会被误判，仍然当数据读。单元格空着按 0 处理，写不出数字的内容也按 0 处理并给出提示，并附上所在行号，方便回去改。

图片里的坐标全靠刻度决定，所以刻度算得好不好直接决定图能不能读。这里用的是 nice numbers 算法：先把数据范围按 1、2、5 乘 10 的整数次幂向上取整，再把区间切成大约五段、把步长也归到 1、2、5 的整数上，最后按步长逐个生成刻度。好处是刻度天然落在 0、40、80 这种数字上，而不是 0、33.6、67.2。柱状图必须把 0 包进量程——柱子的高度就是数值，从 0 起算才对得上；折线图画的是趋势，用数据的最小值到最大值当量程，否则一条在 99 到 103 之间波动的曲线会被压成一条直线。多组数据堆叠时量程要另算：一根柱子的高度是同一类目下各段之和，所以要按「每类目累计值」的最大值取刻度，拿单段的最大值当上限的话，最高的那根柱子会直接顶出绘图区。页面上会把算出来的量程、步长和刻度全部列出来，可以直接对着核对。

饼图和环形图按各段占总和的角度来画，所以只取第一组数据：两组数据各有各的 100%，混在一个圆里就变成两份占比叠在一起，读数必错，页面上会写明其余几组没有画进来。总和为 0 时没有可分配的角，会直接提示检查数据；出现负数时取绝对值再画，并给出提示，因为负值在「占比」这个语义下没有意义，真要比较正负应该改用柱状图。图例关掉时会把标签直接写在扇形上，太小的扇区不写，免得字压在一起；只剩一段有值时圆弧首尾重合画不出路径，这里退化成画一个整圆，颜色和图例仍然对得上。

这一页没有引入任何图表库，图形是自己用 SVG 元素拼出来的。原因是这里只要四种基础图形，不需要拖拽缩放、选区联动这类交互，而图表库体积动辄几百 KB；更要紧的是自己拼出来的是纯字符串，同一条数据源可以同时喂给三个出口——直接插进页面预览、包成 Blob 存成 .svg 文件、交给浏览器的渲染器光栅化成 PNG，三者永远一致，不会出现「预览好看、导出走样」。导出 PNG 时是把 SVG 串包成 Blob 交给 Image 元素，再画到 canvas 上编码，光栅化尺寸靠改写 SVG 根元素的 width 和 height 指定，viewBox 不动，所以浏览器是按目标像素重新渲染，2 倍、3 倍导出都不会糊。这里刻意不按设备的 devicePixelRatio 导出：导出文件是给文档和聊天窗口用的，跟着导出机器的屏幕像素比走，同一份图表在不同机器上导出的像素尺寸会不一样。

两个出口各有各的适用场景。SVG 保存的是坐标和文字，任何分辨率下都清晰，文件小，可以用文本编辑器改颜色和文案，适合还要继续改、要放进网页或打印的场合；代价是文字用的是你本机的字体，换一台机器打开可能字形和宽度略有差别。PNG 是固定像素的位图，任何软件都能显示，适合发到聊天软件、插进 PPT 和文档、当作头像或封面；代价是尺寸在导出时就定死了，后面要放大只能重新导。想要矢量图但需要别的格式，可以拿导出的 SVG 到SVG 转 PNG里换尺寸再转；数据来源是 CSV 文件的话，用CSV 列处理先把列整理好更省事；配色想自己定可以去颜色转换调好再填进来。

常见问题