如何在 Microsoft Power BI 中创建自定义视觉

已编辑 6 几天前 通过 ExtremeHow 编辑团队

Microsoft Power BI商业智能工具自定义视觉效果数据可视化视窗苹果电脑PythonR语言高级商业智能开发自定义

Microsoft Power BI 是一个用于数据可视化和创建报告的强大工具。它提供了广泛的默认视觉效果，但在某些情况下，您可能希望微调视觉效果以满足您的需求。在 Power BI 中创建自定义视觉效果允许您超越标准的视觉效果并自定义数据的可视化表示。本指南将逐步引导您完成在 Power BI 中创建自定义视觉效果的过程。

启动

在创建自定义视觉效果之前，我们先了解设置过程所需的先决条件。Power BI 自定义视觉效果是使用包括 TypeScript、D3.js、Node.js 及其他相关工具的技术栈构建的。以下是您需要遵循的步骤和要求：

先决条件

• 安装 Node.js：Power BI 自定义视觉效果是使用 Node.js 构建的，因此请确保您的计算机上安装了 Node.js（版本 10 或更高）。
• 安装 Power BI Visuals Tools：这是一个命令行界面 (CLI)，可帮助您创建和管理 Power BI 视觉效果。您可以在命令提示符或终端中运行命令 npm install -g powerbi-visuals-tools 进行安装。
• 基本了解 TypeScript 和 D3.js：这些是构建 Power BI 自定义视觉效果的主要技术。熟悉这些技术有助于理解和自定义您的视觉效果。
• 安装 Power BI Desktop：这是您测试和发布自定义视觉效果的地方。

安装开发环境

首先，您需要设置开发环境。在计算机上打开命令行界面，并创建一个计划用于创建自定义视觉效果的目录。使用 cd 命令导航到此目录。在您的目录中，您将使用 Power BI Visuals Tools 创建一个新的自定义视觉项目：

pbiviz new <your-visual-name>

此命令创建一个带有默认结构的新 Power BI 自定义视觉项目。它创建您的自定义视觉所需的文件和目录。

了解项目结构

新创建的项目包含一组文件和文件夹。以下是您可以预期的内容的基本描述：

• Visual.ts：此文件包含您的自定义视觉的主逻辑。在这里，您将编写 TypeScript 代码以创建可视化效果。
• Capabilities.json：此 JSON 文件定义您的自定义视觉的功能，包括数据角色、数据视图映射和格式选项。
• VisualSettings.ts：此文件定义用户在配置您的视觉时可访问的设置和属性。
• Package.json：此文件跟踪项目配置和依赖关系。
• Resources：此文件夹包含图标和本地化文件等资源。

创建自定义视觉

现在您的项目已设置好，让我们继续创建自定义视觉。自定义视觉的开发涉及几个主要步骤：

1. 定义功能

capabilities.json 文件非常重要，因为它定义了您的视觉可以执行的功能。以下是此文件可能的一个非常简单的示例：

{ "dataRoles": [ { "name": "category", "kind": "Grouping" }, { "name": "measure", "kind": "Measure" } ], "dataViewMappings": [ { "conditions": [ { "category": { "max": 1 }, "measure": { "max": 1 } } ], "categorical": { "categories": { "for": { "in": "category" } }, "values": { "for": { "in": "measure" } } } } ], "objects": { "general": { "displayName": "General", "properties": { "formatString": { "type": { "formatting": { "formatString": true } } } } } } }

在此示例中，自定义视觉设置为使用类别和度量，并使用层次结构映射将它们链接在一起。自定义此文件可让您定义视觉将理解的字段和格式。

2. 编写可视化逻辑

大部分工作发生在 Visual.ts 中。以下是您的 TypeScript 类可能的一个非常基本的模板：

export class Visual implements IVisual { private target: HTMLElement; constructor(options: VisualConstructorOptions) { this.target = options.element; this.target.innerHTML = '<div>这是我的自定义视觉！</div>'; } public update(options: VisualUpdateOptions) { // 您的数据处理和渲染逻辑在这里 } }

在 constructor 中，我们初始化了视觉的 HTML 元素。update 方法是您在此处处理与获取新数据和在视觉中绘制相关的逻辑。使用 D3.js 或您选择的任何其他库来创建您的视觉。

3. 设置您的视觉样式

自定义视觉的样式放在一个 CSS 文件中，通常命名为 visual.less。例如：

.myVisual { color: #333; background-color: #f5f5f5; padding: 10px; }

这将为您的自定义视觉应用 CSS 样式。您可以将这种样式作为模块导入到您的 Visual.ts 中，或直接通过代码应用。

4. 可自定义的设置

您可以为视觉添加自定义选项，这些选项会显示在 Power BI 的“格式”窗格中。这涉及编辑 VisualSettings.ts 和功能文件。

class VisualSettings extends DataViewObjectsParser { public general: GeneralSettings = new GeneralSettings(); } class GeneralSettings { public transparency: number = 70; }

"general": { "displayName": "General Settings", "properties": { "transparency": { "displayName": "Transparency", "type": { "numeric": true } } } }

这包括绑定自定义属性（例如透明度）并在 capabilities.json 中定义。

测试和调试

在将您的视觉开发到稳定状态后，就该进行测试和调试了。运行命令：

pbiviz start

这将启动一个本地服务器，并在您的默认浏览器中打开一个实时测试工具。您可以使用数据集测试视觉效果以查看其表现。实时重载功能会在您保存更改时自动更新可视化效果。

要调试，请使用 Web 浏览器的调试工具（例如控制台、网络和源选项卡）来隔离和修复代码中的问题。

打包和部署

一旦您对自定义视觉满意，就可以打包它用于 Power BI Desktop 或与组织中的其他人共享。使用以下命令：

pbiviz package

上述命令创建一个 .pbiviz 文件，这是一个打包好的视觉效果。要在 Power BI Desktop 中使用此视觉效果，请转到“开发者”选项卡并选择“导入自定义视觉”以上传您的 .pbiviz 文件。

共享和发布

要在组织内部共享，请发布到 Power BI 的组织视觉库。这使组织内的用户可以从其 Power BI 界面访问视觉。在这里，您可以一致地处理管理、分发和版本控制。

总结

在 Power BI 中创建自定义视觉可以显著改善您在报告中传达和解释数据的方式。它为自由定制打开了广阔的空间，可以帮助您的见解更加直观和引人入胜。从想法到实施需要理解一些开发概念，但由此产生的视觉可以在独特地表示复杂数据场景方面提供巨大的价值。

从小处开始，逐步探索更复杂的图表和图形。使用社区论坛和 Power BI 视觉库作为额外的资源和灵感来源。享受可视化的过程吧！

  分享本文

如果你发现文章内容有误, 您可以 请求更新