用 MAUI 在Windows 和 Linux 绘制 PPT 图表

我在做一个图表工具软件，这个软件使用 MAUI 开发。我的需求是图表的内容需要和 PPT 的图表对接，需要用到 OpenXML 解析 PPT 内容，读取到 PPT 图表元素的内容，接着使用 MAUI 渲染层绘制图表元素。图表工具软件需要在 Windows 平台和 Linux 平台上运行。在 Windows 下，我采用 WPF 应用，用来辟谣说 MAUI 不支持 WPF 应用。在 Linux 选用 Ubuntu 系统，采用 GTKSharp 应用加上 Skia 渲染对接 MAUI 框架

图表工具软件的开发架构如下，可以看到只有和具体平台对接的一层不相同

本文将包含两个部分，一个是解析渲染面积图图表，另一个是使用 MAUI 开发跨平台应用。解析面积图图表是用到 OpenXML 解析 PPT 的知识，本文只包含很少量的 OpenXML 的知识，我将详细的使用 OpenXML 解析 PPT 的面积图的方法放在了 dotnet OpenXML 解析 PPT 图表 面积图入门 博客里。本文的用到的解析 PPT 的代码也是从此博客里面抄的，这部分代码将不会在本文上贴出。如对 OpenXML 解析 PPT 毫无概念的伙伴，阅读本文也不会存在问题，只需要假定本文的解析 PPT 的代码是通过某个方式获取到了图表的相关信息即可，请将重点放在图表的绘制渲染，以及如何做跨平台对接上

本文使用的代码只能用来做例子，本文的解析 PPT 图表的代码只能支持本文例子里的测试文件，本文的测试文件和代码可以从本文最后获取

在开始之前，先看一下本文实现的效果

效果

这是在 PPT 的图表：

在 Windows 下，使用 Skia 绘制为图片文件，然后使用 Image 控件显示图片，界面效果如下：

以上只是将 MAUI 接入 WPF 的一个方法。不代表只能通过图片文件的方式接入，其他绘制方法请看 WPF 使用 MAUI 的自绘制逻辑

在 Linux 下，使用 Skia 对接 Gtk 框架，界面效果如下：

动态运行效果如下

接下来将告诉大家如何实现

解析绘制面积图图表

开始实现绘制 PPT 的图表之前，需要先解析图表的内容

图表的解析部分需要用到 OpenXML 知识，这部分解析的内容，在 dotnet OpenXML 解析 PPT 图表 面积图入门 博客里面有详细说明。使用 dotnet OpenXML 解析 PPT 图表 面积图入门 的方法解析出图表的内容将获取到的内容放入到 AreaChartRenderContext 类型，此类型用来提供渲染绘制使用的上下文，包括以下属性

上面代码的 ChartSpace 属性是图表元素，通过 dotnet OpenXML 解析 PPT 图表 面积图入门 博客可以了解到里面包含图表的信息。上面代码的 SlideContext 属性是我所在的团队开源的 OpenXml 解析辅助库提供的包含元素所在页面的类型，详细请看: https://github.com/dotnet-campus/DocumentFormat.OpenXml.Extensions

图表关键的信息包含类别轴上的数据，也称为横坐标轴上的数据，放在 CategoryAxisValueList 属性。系列信息集合，放在 AreaChartSeriesInfoList 属性。这两个属性是从 ChartSpace 读取，读取的方法请看 dotnet OpenXML 解析 PPT 图表 面积图入门 博客或者阅读本文用到的代码

在获取到了图表的各个信息之后，即可进行绘制图表。开始进行绘制之前，还请先了解图表的各个组成部分

• 横坐标轴 类别坐标轴数据：

• 纵坐标轴：

• 数据系列：

在图表里面有数据系列的概念，每个系列的数据组成一个个的数据系列。对于大部分图表来说，数据层都是由一个个数据系列组成的

每个数据系列可以有自己的系列名称

系列名称大部分时候都放在图例里面，也就是图例里面的内容就是由系列名称提供的

在图表里面，核心就是对数据的处理，系列的数据内容就是核心的

如图，面积图有两个数据系列，通过上面的 Excel 内容可以了解到两个系列的数据分别如下

系列 1：32,32,28,12,15
系列 2：12,12,12,21,28

为了让绘制逻辑更方便阅读，定义 AreaChartRender 类用来绘制图表

图表绘制 AreaChartRender 需要两个参数，一个是 AreaChartRenderContext 用来提供信息，一个是 Microsoft.