ACT开发指南|自定义图表组件
- 作者优秀
- 优秀教师/独家讲师
- 平台推荐
- 主编推荐/内容稀缺/全网独家
各位朋友们好,在上一期文章中,我们了解了如何定义UI组件布局;本期我们接着上期内容,讲解一下在ACT开发中如何自定义图表组件。
在ACT向导界面中,除了可以定义如Title、Steps、Properties、Help、Submit等这些常用组件外,还支持定义:
图表(chartComponent)
表格(tabularDataComponent)
按钮(buttonsComponent)
结构树(treeComponent)
下拉菜单(popupMenuComponent)
对话框(dialogComponent)等组件。
向导界面底层实现是基于HTML模板和jQuery框架的,然后通过.NET语言进行封装,为用户提供访问的扩展接口,了解前端开发的朋友可以详细研究下。
如2020R1版本对应的向导模板的文件目录为:
<安装目录>\<v201>\Addins\ACT\html\mod
今天,我们以常用的图表组件(chartComponent)为例,讲解如何在向导界面中自定义组件。在<uidefinition>标签内,除了可以定义UI布局,也可以为向导添加或删除组件。例如,在如下示例的界面中,我们将常用的帮助组件(helpComponent)去掉,替换为图表组件(chartComponent),然后组件名称为Chart,并给定布局信息。上述操作后,我们就将预定义的组件添加到了界面中,下一步就需要对定义的图表组件进行数据初始化,进行图表绘制显示。
ACT提供五种常用的图表类型:曲线图、柱状图、饼图、气泡图和曲线与柱状图混合;对应的API方法及传入参数如下所示:
- 曲线图:绘制正弦和余弦函数,给定X、Y轴数据列表;
- 气泡图:给定X与Y轴数据列表和图例名称,可给定气泡大小及形状列表数据;
- 曲线与柱状图:两种可以放在一个画布上,纵坐标轴不同;
上面界面中,我们定义了下拉框cbxChart,实现选择不同类型显示相应的图表,对应的XML代码为:
![图片](https://public.fangzhenxiu.com/fixComment/commentContent/imgs/1607591622958_4w60ih.jpg?imageView2/0)
我们为cbxChart属性添加<onactivate>回调,挂接到changeChartType函数:根据下拉框选择不同调用不同的绘制方法。
上述回调函数实现后的效果如下:
![20201210183542-chart.gif chart.gif](https://public.fangzhenxiu.com/ueditor/20201210183542-chart.gif?imageView2/1/w/689/h/394)
当然,也可以同时定义多个图表组件,比如在如下界面中,我们将5个图表类型放在一起展示。实现的过程分为以下几个步骤:
首先,需要在<uidefinition>标签内定义图表<component>,组件的名称属性分别为PieChart、BubbleChart、LineChart、BarChart和LineBarChart,组件类型都为chartComponent,XML定义如下:
然后,创建新的步骤graphStep,然后添加<onrefresh>回调,挂接到onGraphStepRefresh方法,实现当前步骤加载刷新时执行方法。在回调函数中,参数为step,类型为UserStep,表示当前的步骤实例对象,通过调用:step.UserInterface.GetComponent方法,传入图表组件名称,可以获取图表组件的实例对象,然后进行数据初始化和绘制图表,如下:以上就是今天的全部内容,演示了如何添加和绘制图表组件,希望对大家有所帮助。在实际的开发中,上述的流程和API调用方法都是一致的,不同在于图表的数据来源,可以是材料的温度特性曲线、Path路径的变形数据,也可以是沿某方向的温度分布数据等;朋友们可以根据自己的使用需求灵活应用。