Skip to content

图表

图表以普通对象的身份存在于画布上。你可以像操作任意图片或形状那样移动、缩放、分层和导出它们,并随时编辑其数据。

快速概览

  1. 打开左侧面板的 Charts 标签。
  2. 单击某个图表类型,即可将其居中插入画布并附带示例数据。
  3. 选中图表,在属性面板中编辑它的数据、标签和颜色。
  4. 随着你的数字变化,增删数据行。
  5. 拖动控制柄来缩放。图表会按新的分辨率重新渲染,而不是被拉伸。

详细参考

图表类型

类型默认尺寸形状
Pie400x400圆形
Doughnut400x400圆形
Bar400x300矩形
Horizontal bar400x300矩形
Line400x300矩形
Radar400x400圆形
Polar area400x400圆形

之后切换图表类型会保留你的数据,并按需补充额外的颜色。圆形类型会自动将宽度和高度取为相等。

工作原理

每个图表都以 4 倍分辨率渲染到一块隐藏的画布上以获得清晰的输出,然后烘焙成画布上的单个图像对象。编辑数据、标签或颜色会立即重新渲染该图像,因此你看到的始终与当前数字一致,而不是一张被拉伸的位图。

控件

控件说明
Type selector切换类型且不丢失数据
Dataset label显示为图表的标题
Title font size图表标题文字的大小
Legend显示或隐藏、位置(top、bottom、left、right)、字号
Axis label font size仅限 bar 和 line 类型
Background纯色,或用透明开关将图表叠加在其他元素之上
Width / height100-2000 px,改动任一项都会立即重新渲染
Re-render当图像看起来过时时,强制重新渲染

数据行

每个数据点都是一行,包含一个颜色色块、一个标签、一个数值和一个删除按钮。Add Row 会用默认调色板中的下一个颜色追加一个新数据点。

默认调色板在七种颜色间循环:柔粉、蓝、黄、青、紫红、桃色和薰衣草紫。

缩放与重新加载

拖动图表的控制柄会更新它存储的宽度和高度,并触发一次全新的高分辨率渲染,而不是拉伸已有的图像,因此图表在任何尺寸下都保持清晰。图表类型、数据、标签和尺寸会随设计一起保存,并在下次项目加载时自动重建。

图表表现为一个不可分割的整体对象:裁剪、抠除背景等图像编辑工具会跳过它,而不会作用于其底层渲染出的图像。

分步操作

用你自己的数字制作柱状图

  1. 打开 Charts 标签并单击 Bar。它会居中落下,附带五根示例柱子。
  2. 保持它处于选中状态并打开属性面板。每个数据点都是一行,含颜色色块、标签和数值。
  3. 就地编辑标签和数值。图表会在每次按键时重新渲染,因此柱子会随你输入而更新。
  4. 单击 Add Row 添加一个数据点(它会取调色板的下一个颜色),或点击某一行的 X 移除一个。
  5. 在样式控件下,设置 Dataset label(它会成为图表标题),切换 Legend 及其位置,如果标签不易辨认,就调高 Axis label font size

饼图或环形图

  1. 在 Charts 标签中单击 PieDoughnut。圆形类型会以 400x400 的正方形插入。
  2. 编辑各行,让每一块扇区都有清晰的标签、数值和颜色。
  3. Legend 移到右侧或底部,或将其隐藏,让扇区不至于拥挤。
  4. 想让图表叠在照片或彩色面板之上,请打开 transparent background 开关。

把两种图表类型并排比较

  1. 制作一个图表并设置好它的数据。
  2. Ctrl+D 复制它。
  3. 选中副本,在属性面板里改变它的 Type(例如 bar 改成 line)。你的数据会沿用过来,缺少的颜色会从调色板补齐。
  4. 把两个图表并排摆放,就能用同一份数字快速比较。

缩放而不模糊

  1. 选中图表,把角上的控制柄拖到你想要的尺寸。
  2. 松手。松手时图表会按新的分辨率重新渲染,而不是拉伸旧图像,因此保持清晰。
  3. 想要精确尺寸,就在属性面板里输入 WidthHeight(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删除选中的图表

小贴士

系列越少越好读

在卡片或幻灯片上,少数几个标注清晰的分段比一张密集的图表更好读。缩小图表之前,先把数据简化。

复制以便比较

复制一个图表,把副本切换成另一种类型。用同一份数据构建的柱状图与折线图并排摆放,能形成一次快速的对照。

相关内容

  • 形状,用于其他与数据相关的可视化元素
  • 文本与排版,用于图表的说明文字和标签
  • 导出页面:图表会作为页面位图输出的一部分一同导出