PowerBI 的自定义图表是怎么做出来的？

本文链接：https://blog.youkuaiyun.com/cda2024/article/details/148164322

大家好，今天来聊聊一个让很多数据爱好者和商业智能（BI）开发者都感到兴奋的话题——PowerBI 的自定义图表。对于那些希望在可视化方面做出创新、展示独特见解的人来说，自定义图表无疑是一把利器。那么，究竟如何制作出这些独特的自定义图表呢？让我们一步步揭开它的神秘面纱。

什么是自定义图表？

首先，我们需要明确一下“自定义图表”的概念。PowerBI 默认提供了多种常见的图表类型，如柱状图、折线图、饼图等，但有时候这些默认的图表并不能完全满足我们对数据展示的需求。这时，自定义图表就派上了用场。自定义图表允许用户根据自己的业务需求和创意，创建出独一无二的数据可视化效果。

想象一下，你是一位市场分析师，正在为公司的新产品发布会准备一份报告。传统的柱状图可能无法生动地传达产品特点与市场需求之间的关系。这时候，如果你能设计出一个带有动画效果或者交互功能的图表，不仅能让观众眼前一亮，更能准确地传递信息。这就是自定义图表的魅力所在！

制作自定义图表的前提条件

在深入探讨具体的制作方法之前，我们需要先了解一下制作自定义图表需要具备哪些前提条件：

掌握基本的 PowerBI 使用技能：虽然自定义图表看起来很酷炫，但它仍然是基于 PowerBI 平台开发的。因此，你需要熟悉 PowerBI 的基本操作，包括数据导入、清洗、建模以及常见图表的使用。
了解前端开发技术：自定义图表通常是由 JavaScript 或 TypeScript 编写而成，并且会涉及到 HTML 和 CSS 等前端技术。如果你对这些编程语言有一定的了解，将会大大提升你制作自定义图表的成功率。
安装 Visual Studio Code：这是一款非常流行的代码编辑器，它支持多种编程语言，并且拥有丰富的插件生态。我们将使用它来编写和调试自定义图表代码。
注册 Microsoft AppSource 开发者账户：这是发布自定义图表到 PowerBI 社区的必要步骤。通过这个平台，你可以与其他用户分享你的作品，甚至还能获得一些收入。

CDA（Certified Data Analyst），是指在金融、电信、零售、制造、能源、医疗医药、旅游、咨询等行业从事数据的采集、清洗、处理、分析并能制作业务报告、提供数字化决策的新型数据人才。CDA 持证者由于其强大的数据分析能力和工具应用能力，在制作自定义图表时，往往能够更加得心应手。

自定义图表的开发流程

接下来，我们详细讲解一下制作自定义图表的具体步骤。整个过程可以分为以下几个阶段：

1. 规划与设计

在开始编码之前，最重要的是要有一个清晰的设计思路。你需要思考以下几个问题：

我想要表达什么样的数据？
这个图表应该具备哪些特性（例如：静态/动态、二维/三维）？
用户将如何与之互动？

以电商行业为例，假设你想创建一个用于展示商品销售趋势的热力地图。此时，你就需要考虑是否要在地图上添加颜色渐变来表示不同地区的销售额；是否支持鼠标悬停显示详细信息；是否可以点击某个区域查看更详细的统计数据等等。这些问题的答案将直接影响到后续的开发工作。

2. 创建项目结构

确定了设计方案后，接下来就要搭建项目的框架了。打开 Visual Studio Code ，按照官方文档指引创建一个新的 PowerBI Custom Visual 项目。在这个过程中，你会看到类似如下的文件夹结构：

my-custom-visual
├── .vscode
├── dist
├── node_modules
├── src
│   ├── assets
│   ├── capabilities.json
│   ├── customVisual.ts
│   └── visual.ts
├── tsconfig.json
└── package.json

其中，src 文件夹是我们主要关注的地方。它包含了所有与图表绘制相关的源代码文件。特别要注意的是 capabilities.json 文件，它定义了图表的基本属性，比如名称、描述、参数配置等。而 customVisual.ts 和 visual.ts 则是实现图表逻辑的核心文件。

3. 编写核心逻辑

有了项目结构之后，就可以正式进入编码环节了。这里以绘制一个简单的折线图为例，向大家展示如何编写图表的核心逻辑。

首先，在 visual.ts 中定义数据视图模型（Data View Model）。这部分代码负责从 PowerBI 获取原始数据，并将其转换成适合绘图的形式。例如：

private static convertData(dataView: DataView): ILineChartModel {
    if (!dataView || !dataView.categorical) {
        return null;
    }

    const categorical = dataView.categorical;
    const categories = categorical.categories[0].values;
    const values = categorical.values.groups.map(group => group.values);

    return {
        categories,
        values
    };
}

然后，在 render 方法中调用第三方库（如 D3.js 或 Three.js）进行实际的图形绘制。这里需要注意的是，为了确保兼容性和性能，最好选择轻量级且成熟的库来进行开发。例如，使用 D3.js 绘制折线图：

private render(model: ILineChartModel) {
    const svg = d3.select(this.svgElement)
        .attr("width", this.viewport.width)
        .attr("height", this.viewport.height);

    // Define scales and axes here...

    svg.selectAll("path.line")
        .data([model.values])
        .enter().append("path")
        .attr("class", "line")
        .attr("d", d3.line()
            .x((d, i) => xScale(model.categories[i]))
            .y(d => yScale(d))
        )
        .style("stroke", "steelblue");
}

除了上述基础功能外，还可以根据需求添加交互元素，如工具提示（Tooltip）、缩放和平移（Zoom & Pan）等功能，使图表更加友好易用。

4. 测试与优化

完成初步编码后，不要急于提交成果，而是要反复测试和优化。可以通过 PowerBI Desktop 内置的调试模式快速验证图表的效果。如果发现问题，则及时修改代码并重新编译。此外，还要注意以下几点：

性能优化：随着数据量的增长，图表可能会出现卡顿现象。这时就需要对算法进行优化，减少不必要的计算开销。
样式调整：尽管图表的功能已经实现，但如果视觉效果不佳，也会让用户产生反感。因此，合理运用 CSS 样式表美化界面是非常重要的。
兼容性检查：确保图表能在各种设备和浏览器环境下正常运行，避免出现兼容性问题。

5. 发布与分享

经过多次迭代改进后，终于到了最后一步——发布自定义图表！按照微软提供的指南，将打包好的文件上传至 Microsoft AppSource 平台。成功发布后，其他 PowerBI 用户就能下载并使用你的作品啦！

当然，如果你想让更多人知道你的成就，不妨撰写一篇博客文章介绍整个开发过程，或者录制一段教学视频放到 YouTube 上。相信我，当你看到自己的劳动成果被越来越多的人认可时，那种成就感是无与伦比的！

结束语

好了，以上就是关于如何制作 PowerBI 自定义图表的全部内容。从最初的概念构思到最后的作品发布，每一个环节都充满了挑战与乐趣。正如 CDA 持证者们所秉持的理念一样，在不断探索的过程中积累经验，最终才能创作出真正有价值的可视化作品。希望这篇文章能够帮助到每一位有志于成为优秀 BI 开发者的朋友们。如果你也想尝试一下，不妨现在就开始行动吧！