图表
图表以普通对象的身份存在于画布上。你可以像操作任意图片或形状那样移动、缩放、分层和导出它们,并随时编辑其数据。
快速概览
- 打开左侧面板的 Charts 标签。
- 单击某个图表类型,即可将其居中插入画布并附带示例数据。
- 选中图表,在属性面板中编辑它的数据、标签和颜色。
- 随着你的数字变化,增删数据行。
- 拖动控制柄来缩放。图表会按新的分辨率重新渲染,而不是被拉伸。
详细参考
图表类型
| 类型 | 默认尺寸 | 形状 |
|---|---|---|
| Pie | 400x400 | 圆形 |
| Doughnut | 400x400 | 圆形 |
| Bar | 400x300 | 矩形 |
| Horizontal bar | 400x300 | 矩形 |
| Line | 400x300 | 矩形 |
| Radar | 400x400 | 圆形 |
| Polar area | 400x400 | 圆形 |
之后切换图表类型会保留你的数据,并按需补充额外的颜色。圆形类型会自动将宽度和高度取为相等。
工作原理
每个图表都以 4 倍分辨率渲染到一块隐藏的画布上以获得清晰的输出,然后烘焙成画布上的单个图像对象。编辑数据、标签或颜色会立即重新渲染该图像,因此你看到的始终与当前数字一致,而不是一张被拉伸的位图。
控件
| 控件 | 说明 |
|---|---|
| Type selector | 切换类型且不丢失数据 |
| Dataset label | 显示为图表的标题 |
| Title font size | 图表标题文字的大小 |
| Legend | 显示或隐藏、位置(top、bottom、left、right)、字号 |
| Axis label font size | 仅限 bar 和 line 类型 |
| Background | 纯色,或用透明开关将图表叠加在其他元素之上 |
| Width / height | 100-2000 px,改动任一项都会立即重新渲染 |
| Re-render | 当图像看起来过时时,强制重新渲染 |
数据行
每个数据点都是一行,包含一个颜色色块、一个标签、一个数值和一个删除按钮。Add Row 会用默认调色板中的下一个颜色追加一个新数据点。
默认调色板在七种颜色间循环:柔粉、蓝、黄、青、紫红、桃色和薰衣草紫。
缩放与重新加载
拖动图表的控制柄会更新它存储的宽度和高度,并触发一次全新的高分辨率渲染,而不是拉伸已有的图像,因此图表在任何尺寸下都保持清晰。图表类型、数据、标签和尺寸会随设计一起保存,并在下次项目加载时自动重建。
图表表现为一个不可分割的整体对象:裁剪、抠除背景等图像编辑工具会跳过它,而不会作用于其底层渲染出的图像。
分步操作
用你自己的数字制作柱状图
- 打开 Charts 标签并单击 Bar。它会居中落下,附带五根示例柱子。
- 保持它处于选中状态并打开属性面板。每个数据点都是一行,含颜色色块、标签和数值。
- 就地编辑标签和数值。图表会在每次按键时重新渲染,因此柱子会随你输入而更新。
- 单击 Add Row 添加一个数据点(它会取调色板的下一个颜色),或点击某一行的 X 移除一个。
- 在样式控件下,设置 Dataset label(它会成为图表标题),切换 Legend 及其位置,如果标签不易辨认,就调高 Axis label font size。
饼图或环形图
- 在 Charts 标签中单击 Pie 或 Doughnut。圆形类型会以 400x400 的正方形插入。
- 编辑各行,让每一块扇区都有清晰的标签、数值和颜色。
- 把 Legend 移到右侧或底部,或将其隐藏,让扇区不至于拥挤。
- 想让图表叠在照片或彩色面板之上,请打开 transparent background 开关。
把两种图表类型并排比较
- 制作一个图表并设置好它的数据。
- 按
Ctrl+D复制它。 - 选中副本,在属性面板里改变它的 Type(例如 bar 改成 line)。你的数据会沿用过来,缺少的颜色会从调色板补齐。
- 把两个图表并排摆放,就能用同一份数字快速比较。
缩放而不模糊
- 选中图表,把角上的控制柄拖到你想要的尺寸。
- 松手。松手时图表会按新的分辨率重新渲染,而不是拉伸旧图像,因此保持清晰。
- 想要精确尺寸,就在属性面板里输入 Width 和 Height(100 到 2000 px)。如果数字看起来没有刷新,点击 Re-render。
常见任务
| 目标 | 怎么做 |
|---|---|
| 添加数据点 | Add Row,然后输入它的标签和数值 |
| 移除数据点 | 点击该行的 X |
| 给图表加标题 | 在 Dataset label 中输入 |
| 移动图例 | 设置图例位置(top、bottom、left、right) |
| 叠加到其他元素上 | 打开透明背景开关 |
| 放大坐标轴文字 | 调高坐标轴标签字号(仅 bar 和 line) |
| 更改某一扇区颜色 | 编辑那一行的颜色色块 |
疑难排解
空行会算作 0
空的数值输入框会被算作 0,因此它对应的柱子或扇区会缩成看不见。请删除你不再使用的行,而不要让它们空着。
切换类型后饼图看起来被压扁了
圆形类型(pie、doughnut、radar、polar area)会强制其宽度和高度相等。把一个较宽的柱状图切换为圆形类型时,它会自动取为正方形,因此占用的空间会发生变化。
坐标轴字号毫无作用
坐标轴标签字号只对 bar 和 line 图表生效。pie、doughnut、radar 和 polar area 没有坐标轴,因此这个控件对它们不起作用。
裁剪和抠除背景会跳过图表
图表是由实时渲染构建的一个不可分割的整体对象,因此裁剪、抠除背景等图像工具会绕过它。请改在属性面板里编辑数据、颜色和尺寸。
让系列数量保持精简
调色板在七种颜色循环后就会重复,而一张密集的图表在卡片或幻灯片上很难看清。少数几个标注清晰的数据点效果最好。
键盘快捷键
| 快捷键 | 操作 |
|---|---|
Ctrl+D | 复制选中的图表 |
Delete | 删除选中的图表 |
小贴士
系列越少越好读
在卡片或幻灯片上,少数几个标注清晰的分段比一张密集的图表更好读。缩小图表之前,先把数据简化。
复制以便比较
复制一个图表,把副本切换成另一种类型。用同一份数据构建的柱状图与折线图并排摆放,能形成一次快速的对照。