画布

画布是 Dashboardx 设计器设计透视图的核心 —— 一个灵活直观的工作空间，您可以在这里排列组件、创建布局，并将数据可视化变为现实。本章将帮助您掌握画布操作，实现专业的仪表板设计。

什么是画布？

画布是一个无限的工作空间，您可以：

• 选中组件进行旋转、缩放和平移
• 排列组件成您想象的任何布局
• 使用智能参考线进行精确对齐
• 启用网格吸附进行组件的智能吸附对齐
• 使用多组件对齐进行水平左对齐、居中对齐和右对齐，或者进行垂直上对齐、居中和下对齐，或者进行水平均匀分布和垂直均匀分布
• 锁定组件以避免布局时误触
• 切换主题以在整个仪表板上应用一致的样式

画布基础

• 进入画布

  1. 点击左侧边栏中的 设计透视图 图标
  2. 画布将作为主要视图显示为基于网格的工作空间，顶部为全局工具栏

• 画布导航

  • 缩放: 使用 ⌘+ 和 ⌘-
  • 平移: 鼠标单击画布空白区域后拖动
  • 适应窗口: 在全局工具栏中可以选择画布“适应窗口”，“适应高度”和“适应宽度”
  • 重置窗口: 点击选择缩放控件中的100%

💡 提示

当画布被选中时，可以在属性列表面板中设置分辨率、背景颜色和背景图片等属性。

工具和功能

1. 选择工具

   • 单选: 点击任意组件进行选择
   • 多选: Shift+点击 多个组件
   • 取消选择: 点击空白画布区域或按 Esc

2. 对齐和分布

   Dashboardx 设计器提供智能对齐工具：

   1. 对齐指示线：单击水平或垂直标尺并拖动到画布生成对齐指示线
   2. 智能参考线: 拖动组件时自动显示对齐参考线
   3. 手动对齐: 使用全局工具栏中的对齐工具栏进行精确控制
   4. 分布: 进行多个选定组件之间的等间距调整
   5. 网格吸附: 在全局工具栏里启用网格吸附，组件可以精确的吸附在固定的网格上

主题操作

系统内置了明暗两种类型的主题，每种类型下各提供八个主题，用户可以根据需要通过全局工具栏上的主题切换选择器进行切换。

组件管理

1. 添加组件

   1. 从组件列表面板拖动任何组件到画布
   2. 复制现有: ⌘C 复制选定的组件，点击画布上的空白处，⌘V完成粘贴

2. 定位组件

   • 拖放: 点击并将组件拖动到所需位置
   • 属性列表面板: 在坐标标签下输入精确的 X/Y 坐标以实现精准定位

3. 调整组件大小

   • 拖动把手: 使用角把手按比例调整大小
   • 边把手: 仅水平或垂直调整大小

4. 锁定和图层管理

   • 锁定组件: 选择组件并点击全局工具栏上的锁定按钮，或者在组件上单击右键唤醒上下文菜单，再点击锁定菜单项
   • 取消锁定: 选择已锁定的组件，可以点击全局工具栏上的解锁按钮，或者在组件上单击右键唤醒上下文菜单，再点击解锁菜单项
   • 图层管理: 右键点击组件 > "置于顶层"，“上移一层”、“下移一层” 或 "置于底层"

布局策略

以下为几种典型的布局策略，在设计仪表板时可以参考。

1. 网格布局

┌───────┬───────┬───────┐
│   A   │   B   │   C   │
├───────┼───────┼───────┤
│   D   │   E   │   F   │
└───────┴───────┴───────┘

• 用于平衡、对称的设计
• 适用于具有同等重要性组件的仪表板

2. 焦点布局

┌───────────────┬───────┐
│               │   B   │
│               ├───────┤
│      A        │   C   │
│               ├───────┤
│               │   D   │
└───────────────┴───────┘

• 强调主要可视化（A）
• 侧边栏用于支持指标（B、C、D）

3. 层次布局

┌───────────────────────┐
│          A            │
├───────────┬───────────┤
│     B     │     C     │
├─────┬─────┼─────┬─────┤
│  D  │  E  │  F  │  G  │
└─────┴─────┴─────┴─────┘

• 可视化显示数据层次结构
• 适用于向下钻取场景

高级画布功能

1. 模板

   • 应用模板: 将模板应用到新仪表板，点击菜单文件>从模板新建，然后选择合适的模板新建仪表板。

2. 画布背景

   • 纯色: 选择任何背景颜色
   • 图像: 上传自定义背景图像
   • 透明度: 调整画布透明度以实现叠加效果

3. 指示线和标尺

   • 自定义指示线: 从标尺拖动创建自定义对齐指示线
   • 清除指示线: 将指示线拖拽回标尺以删除指示线
   • 隐藏指示线: 点击水平标尺和垂直标尺连接处的图像按钮，隐藏或者显示所有指示线

处理大型仪表板

导航辅助

• 缩放滑块: 工具栏中的快速缩放控件

组织工具

• 布局大纲面板: 所有画布组件的视觉层次结构
• 组件列表面板: 可折叠列表中的所有组件
• 搜索组件: 按名称查找组件，布局大纲面板和组件列表面板均支持对组件的搜索

画布设计最佳实践

1. 从线框图开始

   • 在纸上或使用数字线框图工具绘制布局草图
   • 考虑用户流和信息层次结构

2. 使用一致的间距

   • 建立间距系统（例如，8px网格），在全局工具栏启用网格吸附
   • 使用分布工具实现等间距
   • 保持组件周围一致的内边距

3. 分组相关内容

   • 分组讲述相关故事的组件
   • 使用视觉分隔区分不相关的组
   • 考虑使用容器或背景颜色进行分组

4. 考虑阅读模式

   • 大部分观众会从左到右、从上到下阅读
   • 将最重要的信息放在左上象限
   • 使用视觉权重引导注意力

5. 留出空白空间

   • 不要过度拥挤画布
   • 空白空间提高可读性和焦点
   • 有效使用边距和内边距

常见画布问题与解决方案

1. 问题：组件无法对齐

   解决方案：

   • 检查是否启用了"网格吸附"
   • 使用工具栏中的对齐工具
   • 确保组件没有意外锁定

2. 问题：画布性能缓慢

   解决方案：

   • 减少画布上的组件数量
   • 简化复杂的可视化
   • 对重复元素使用符号
   • 关闭其他应用程序以释放内存

3. 问题：意外移动了背景元素

   解决方案：

   • 锁定背景元素（右键点击 > "锁定"）
   • 使用布局大纲面板管理元素层次结构
   • ⌘Z 撤销意外移动

4. 问题: 组件没有数据显示

   解决方案：

   • 检查数据绑定和数据集的过滤是否正确

与其他透视图集成

从数据透视图到画布

1. 在数据透视图中创建数据集
2. 切换到设计透视图
3. 在数据绑定面板将数据集字段和组件进行绑定

从画布到演示透视图

1. 在画布中设计布局
2. 在全局工具栏中点击演示按钮进入演示透视图
3. 测试交互性和用户体验
4. 返回画布进行调整

后续步骤

现在您了解了画布，您可以：

1. 探索组件: 在 组件 章节了解不同的可视化元素类型
2. 掌握数据绑定: 在 数据绑定 章节查看如何将数据连接到组件
3. 测试交互性: 在 演示透视图 中查看您的画布设计如何工作

---

记住：画布是您的创意游乐场。不要害怕尝试不同的布局和排列。撤销按钮（⌘Z）总是在那里将您从任何设计失误中拯救出来！

祝您设计愉快！🎨