第13篇：高级可视化与自定义图表

第13篇：高级可视化与自定义图表

1. 可视化设计原则

1.1 数据墨水比

核心思想：最大化数据墨水，最小化非数据墨水。

1.2 认知负荷优化

✅ 一图一信息 ✅ 突出关键数据 ✅ 使用熟悉的图表类型 ✅ 合理排序（数值/时间/字母） ❌ 过多切片器 ❌ 3D 图表 ❌ 过多颜色 ❌ 无意义的装饰

2. 高级图表类型应用

2.1 小多图（Small Multiples）

将数据按类别拆分为多个小图表：

应用场景：

• 多地区趋势对比
• 多产品线性能分析
• 时间序列分段展示

配置要点：

小多图设置： - 列：Product[Category] - 行：Region[RegionName] - 数量限制：建议 ≤ 20 个小图 - 轴范围：统一（便于对比）

2.2 子弹图（Bullet Chart）

用于展示目标达成情况：

┌─────────────────────────────┐ │ 实际值 ████████████░░ 75% │ │ 目标值 ─────────── │ │ 区域 ████████░░░░░ 60% │ └─────────────────────────────┘

DAX 实现：

目标达成率 = VAR Actual = [销售额] VAR Target = [销售目标] RETURN DIVIDE(Actual, Target) 目标差异 = [销售额] - [销售目标]

2.3 桑基图（Sankey Diagram）

展示流向与转化：

使用 Power BI 视觉对象：“Sankey Chart”（自定义视觉对象）

数据准备：

Source Destination Value --------------------------------- 访问首页 浏览商品 10000 浏览商品 加入购物车 3000 加入购物车 完成支付 1500

3. 条件格式进阶

3.1 基于度量的条件格式

// 销售状态颜色 状态颜色 = VAR Ratio = [目标达成率] RETURN SWITCH( TRUE(), Ratio >= 1, "#28A745", // 绿色 - 达成 Ratio >= 0.8, "#FFC107", // 黄色 - 接近 Ratio >= 0.6, "#FD7E14", // 橙色 - 需关注 "#DC3545" // 红色 - 未达标 )

应用方式：

1. 选择视觉对象 → 条件格式 → 背景色
2. 格式模式：字段值
3. 选择状态颜色度量

3.2 数据条和图标

数据条配置： - 最小值：0 - 最大值：[最大销售额] - 颜色：渐变或固定 图标集： - ↑ 绿色：增长 > 10% - → 黄色：增长 -10% ~ 10% - ↓ 红色：下降 > 10%

3.3 动态标题和说明

// 动态图表标题 图表标题 = VAR SelectedCategory = SELECTEDVALUE(Product[Category]) VAR SelectedRegion = SELECTEDVALUE(Region[RegionName]) RETURN "销售分析" & IF(NOT ISBLANK(SelectedCategory), " - " & SelectedCategory, "") & IF(NOT ISBLANK(SelectedRegion), " (" & SelectedRegion & ")", "")

4. 交互设计

4.1 钻取功能

配置步骤：

1. 模型视图 → 设置钻取字段
2. 报表页面 → 添加钻取目标页
3. 视觉对象 → 右键 → 钻取

钻取字段示例：

钻取层级： Date[Year] → Date[Quarter] → Date[Month] Product[Category] → Product[SubCategory] Region[Region] → Region[City]

钻取页面传递度量：

// 在钻取目标页使用 钻取产品 = SELECTEDVALUE(Product[ProductName]) 钻取金额 = [销售额]

4.2 工具提示（Tooltip）

高级工具提示配置：

1. 创建工具提示页面
2. 页面信息 → 工具提示：开启
3. 尺寸：320 x 240 像素
4. 在主页面视觉对象中关联

动态工具提示内容：

工具提示内容 = "销售额：" & FORMAT([销售额], "#,##0") & UNICHAR(10) & "环比：" & FORMAT([环比增长], "0.0%") & UNICHAR(10) & "排名：" & [排名]

4.3 书签和按钮导航

书签配置：

书签类型： 1. 数据书签 - 保存筛选状态 2. 视觉书签 - 保存视觉属性 3. 所有书签 - 保存全部状态

按钮动作：

按钮类型： - 书签导航：跳转到指定书签 - 页面导航：切换报表页面 - 切片器重置：清除所有筛选 - Q&A：打开自然语言查询

5. 高级自定义视觉对象

5.1 Deneb（Vega/Vega-Lite）

使用 JSON 语法定义图表：

{"$schema":"https://vega.github.io/schema/vega-lite/v5.json","data":{"values":[]},"mark":"bar","encoding":{"x":{"field":"Category","type":"nominal"},"y":{"field":"Amount","type":"quantitative"},"color":{"field":"Category","type":"nominal"}}}

优势：

• 高度自定义
• 性能优秀
• 支持 Vega/Vega-Lite 语法

5.2 HTML Content

自定义 HTML 渲染：

<!-- KPI 卡片 --><divstyle="text-align:center;padding:20px;"><h2style="color:#333;">{title}</h2><pstyle="font-size:36px;color:{color};">{value}</p><pstyle="color:#666;">{subtitle}</p></div>

5.3 Charticulator

交互式图表设计器，无需代码。

6. 报表布局最佳实践

6.1 页面布局规范

┌────────────────────────────────────────┐ │ 标题/Logo 筛选区域（右上） │ ├────────────────────────────────────────┤ │ │ │ 主视觉区域（关键指标） │ │ │ ├───────────────────┬────────────────────┤ │ │ │ │ 左侧详情图表 │ 右侧补充图表 │ │ │ │ ├───────────────────┴────────────────────┤ │ 底部数据表格/趋势 │ └────────────────────────────────────────┘

6.2 对齐与间距

6.3 响应式设计

配置要点：

• 使用切片器响应式布局
• 视觉对象设置：保持纵横比
• 测试不同分辨率
• 移动端布局单独设计

7. 高级交互模式

7.1 动态可见性

根据条件显示/隐藏视觉对象：

// 显示条件 显示详情 = VAR SelectedProduct = SELECTEDVALUE(Product[ProductID]) RETURN IF(NOT ISBLANK(SelectedProduct), 1, 0)

配置：选择窗格 → 视觉对象 → 条件格式 → 可见性

7.2 参数化筛选

使用 What-If 参数：

// 动态阈值筛选 高价值订单 = VAR Threshold = SELECTEDVALUE(Parameter[Threshold]) RETURN CALCULATE( COUNTROWS(Sales), Sales[Amount] >= Threshold )

7.3 跨页同步

使用书签和按钮实现：

• 页面间筛选状态同步
• 统一的筛选上下文
• 一致的视图模式

8. 可视化性能优化

8.1 减少视觉对象数量

8.2 优化视觉对象数据

// 限制显示行数 TOPN 显示 = CALCULATETABLE( TOPN(100, Sales, Sales[Amount], DESC), ALLSELECTED(Sales) )

8.3 禁用自动加载

文件 → 选项 → 数据加载： ✅ 报表视觉对象首次加载后禁用

9. 小结

本篇介绍了高级可视化技术：

下一篇，我们将深入 Power Query 高级数据处理。