个性化体验Power BI 嵌入式分析操场(预览版)中展示的顶级见解 使用自定义布局 API 让用户在其报表查看会话期间选择要查看的可视化效果和布局。
Power BI 嵌入式 自定义报表布局 控制报表页上视觉对象的大小、位置和可见性。 使用自定义布局向不同用户呈现不同的视图,或让用户个性化自己的视图。 自定义布局可帮助用户专注于他们最重要的可视化效果和见解。
还可以使用自定义布局在窗口大小更改时调整视觉对象的大小,或者为桌面、平板电脑或移动屏幕显示不同的布局。
自定义布局展示体验
在 个性化体验 展示中,名为 Contoso 的虚构集团使用 Power BI 嵌入式报表向利益干系人显示业务数据。 嵌入的报表加载了所有 9 个可用可视化效果,这些可视化效果显示在两列布局中。
选择视觉对象
若要仅选择他们最希望看到的视觉对象,报表用户请选择 选择视觉对象 按钮。 “选择视觉对象” 下拉列表框随即打开,其中所有 9 个可用视觉对象都处于选中状态。
用户可以清除他们不想查看的视觉对象旁边的复选框。 只有所选视觉对象显示在报表中,该查看会话的其余部分。
选择 再次选择视觉对象 关闭下拉列表框。 用户可以选择 再次选择视觉对象 选择不同的视觉对象或所有 9 个视觉对象。
选择布局
用户还可以选择 “选择布局” 下拉列表,选择五种不同的可视化效果布局选项。 选择布局选项将应用所选布局并关闭调色板。
视觉对象和布局交互
选择视觉对象 和 选择应用程序代码中的布局 控件是独立的,但它们交互。 例如,如果仅显示一个视觉对象,则单列布局显示大小大于三列布局的视觉对象。
自定义布局展示代码
实现展示应用程序的代码位于 PowerBI-Embedded-Showcases GitHub 存储库中。
应用程序 HTML 代码 生成报表容器,选择视觉对象 按钮和下拉列表,选择布局 按钮和下拉列表。
报表 JavaScript 嵌入报表、计算和配置自定义布局对象,并实现默认和个性化自定义布局。
若要创建自定义报表布局,请将 自定义布局对象 传递给报表 嵌入配置settings
属性。 若要启用自定义布局,报表 JavaScript 使用具有值 models.LayoutType.Custom
的 layoutType
属性。
customLayout
对象指定报表画布页面大小、画布缩放和页面布局。 页面布局为报表指定默认视觉布局,以及每个视觉对象的视觉布局。
let settings = {
...
layoutType: models.LayoutType.Custom,
customLayout: {
pageSize: {
type: models.PageSizeType.Custom,
width: reportWidth - 10,
height: reportHeight - 20
},
displayOption: models.DisplayOption.FitToPage,
pagesLayout: pagesLayout
}
};
为了显示选定的可视化效果和布局,展示 JavaScript 动态创建 settings
对象并更新嵌入配置。 报表加载了显示和实现的自定义布局的选定视觉对象。