个性化体验热门见解展示

个性化体验Power BI 嵌入式分析操场(预览版)中展示的顶级见解 使用自定义布局 API 让用户在其报表查看会话期间选择要查看的可视化效果和布局。

Power BI 嵌入式 自定义报表布局 控制报表页上视觉对象的大小、位置和可见性。 使用自定义布局向不同用户呈现不同的视图,或让用户个性化自己的视图。 自定义布局可帮助用户专注于他们最重要的可视化效果和见解。

还可以使用自定义布局在窗口大小更改时调整视觉对象的大小,或者为桌面、平板电脑或移动屏幕显示不同的布局。

自定义布局展示体验

个性化体验 展示中,名为 Contoso 的虚构集团使用 Power BI 嵌入式报表向利益干系人显示业务数据。 嵌入的报表加载了所有 9 个可用可视化效果,这些可视化效果显示在两列布局中。

选择视觉对象

若要仅选择他们最希望看到的视觉对象,报表用户请选择 选择视觉对象 按钮。 “选择视觉对象” 下拉列表框随即打开,其中所有 9 个可用视觉对象都处于选中状态。

用户可以清除他们不想查看的视觉对象旁边的复选框。 只有所选视觉对象显示在报表中,该查看会话的其余部分。

显示“选择视觉对象”对话框的屏幕截图,其中选择了三个视觉对象并显示。

选择 再次选择视觉对象 关闭下拉列表框。 用户可以选择 再次选择视觉对象 选择不同的视觉对象或所有 9 个视觉对象。

选择布局

用户还可以选择 “选择布局” 下拉列表,选择五种不同的可视化效果布局选项。 选择布局选项将应用所选布局并关闭调色板。

显示布局面板的屏幕截图,其中选择了三列布局并应用。

视觉对象和布局交互

选择视觉对象选择应用程序代码中的布局 控件是独立的,但它们交互。 例如,如果仅显示一个视觉对象,则单列布局显示大小大于三列布局的视觉对象。

显示单列布局中的单个视觉对象的屏幕截图。

显示三列布局中的单个视觉对象的屏幕截图。

自定义布局展示代码

实现展示应用程序的代码位于 PowerBI-Embedded-Showcases GitHub 存储库中。

  • 应用程序 HTML 代码 生成报表容器,选择视觉对象 按钮和下拉列表,选择布局 按钮和下拉列表。

  • 报表 JavaScript 嵌入报表、计算和配置自定义布局对象,并实现默认和个性化自定义布局。

若要创建自定义报表布局,请将 自定义布局对象 传递给报表 嵌入配置settings 属性。 若要启用自定义布局,报表 JavaScript 使用具有值 models.LayoutType.CustomlayoutType 属性。

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 对象并更新嵌入配置。 报表加载了显示和实现的自定义布局的选定视觉对象。