使用Component Library制作一个Bar类型的图表

Posted 2022-08-16 luoyong0201

我是微软Dynamics 365 & Power Platform方面的工程师/顾问罗勇，也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的微软最有价值专家(Microsoft MVP)，这是我的第475篇原创文章，写于2022年8月15日。

Component library，就是组件库的意思，可以自己开发一些组件库，里面可以包含多个组件，这些组件支持输入输出参数，可以在组件库所在的Microsoft Dataverse环境（environment）中的Canvas App中使用，关于它的官方文档请参考：​​Component library​​ 。

今天我就利用Component Library来开发一个Bar类型的图表，可以在 ​​https://make.powerapps.com/​​ 的 Apps 中通过点击 New component library进行创建。

为了方便布署，我直接在解决方案中创建。打开现有解决方案或者新建解决方案后点击 New > More > Component Library。

打开新建窗口后，默认名字是Component1，一般先改成有意义的名字，比如我这里改成BarComponent。

可以复用的组件当然少不了输入参数，我这里新增输入参数，新增参数的地方如下所示：

我先增加一个Property type为Input，Data type为Text的参数，用来做图表的标题。

再增加一个Data type为Color的输入参数，用来做标题文字的颜色，可以看到数据类型可以为颜色。

还增加一个Data type为Table的输入参数，用来展示图表的每一个bar。可以看到能使用Table类型的输入参数，这种数据用Gallery来展示比较方便。

为了方便后面的展示效果，我这里先设置下这些输入参数的默认值如下：在右边的COMPONENT的Advanced界面可以设置。我设置的BarData的默认值是 Table(BarTitle: "预算", BarValue: 10000, BarColor: "Red",BarTitle: "预计", BarValue: 9000, BarColor: "Green",BarTitle: "已使用", BarValue: 5000, BarColor: "Yellow") ，可以看到Table类型的参数的赋值。至于Bar的颜色，我用的是文本，支持的颜色名称可以参考 ​​Color enumeration and ColorFade, ColorValue, and RGBA functions in Power Apps​​ 。

首先我插入一个Label控件，将其文字居中，将其Text属性的值设置为 BarComponent.ChartTitle ，这样会显示为输入参数的值，注意使用参数值的方法是用Component的名称加上小数点加上参数的名称。

因为是设计阶段没有传递值进来，所有使用的是改参数的默认值。然后我将这个Label控件的Color属性设置为

然后我将这个Label控件的Color属性设置为 BarComponent.ChartTitleColor ，可以看到颜色变了，变成这个参数的默认值了。

我还设置了这个Label控件的Display mode为View，将其Width属性设置为 Parent.Width ，这样是为了让这个文本的宽度可以随着屏幕或者组件的大小变化，且文本始终居中，当然也可以设置字段大小(Size属性)为公式，根据组件大小来调节，我这里也将Size属性设置为 Parent.Width * 0.03 。

然后我插入一个Vertical类型的Gallery：

因为大部分要自己来做，所以我将layout设置为简单的Title.

然后我设置这个Gallery的Items属性的值设置为 BarComponent.BarData ，这样可以看到初步的样子了。

然后我整理下，大致的初稿效果如下：Bar我用的是Rectangle这种Shape来做的，需要通过点击左边的加号，然后在Shapes这个分组中找到Rectangle来插入到Gallery中。

有些属性的设置提下。因为要不同的bar显示不同颜色，且根据参数来设置，所以我这里将Bar的Fill属性设置为了 ColorValue(ThisItem.BarColor) 。

然后Bar的Width我设置为了：Parent.Width * 0.68 * (ThisItem.BarValue / Max(BarComponent.BarData,BarValue)) ，这里我让这个bar的长度可以随着这个组件的宽度而缩放。

为了让值可以挨着Bar显示，我设置了他的X属性为：lblBarTtitle.Width + Rectangle1.Width + 20

为了让值显示好看点，我设置下格式添加千分位符号，也就是将Text属性设置为 Text(ThisItem.BarValue,"#,###") .

做好后大致样子如下：

点击 File > Save 按钮进行保存，取个名字为Chart Library，然后点击右下角的Save按钮。

然后我们到Canvas App中来使用，在一个Screen中点击左侧的加号按钮，然后点击左下角的 Get more components 链接。

选中要导入的组件，然后点击 Import 按钮，没问题的话一会儿会提示导入成功。

也在Library components中可以看到新导入的这个组件。

点击新导入的这个组件就会添加到屏幕(Screen)上。

可以在右边设置输入参数的值可以i立即看到效果。

我点击右上角的Print文字 (该文字的OnSelect属性值为 Print()，Visible属性的值为Not(Parent.Printing))，打印效果如下，还可以：