目前Mendix开发报表的极致(仅限个人水平):
本文案例最终效果:
图表由一组折线图,两组柱状图组成,每一组数据都是不同的维度,可以看右上角的系列标注。
数据格式:
合格物料数量 | 不合格物料数量 | 物料需求数量 |
目录
4.1 APP Store导入MicroFlow Timer
1. 准备工作
1.1 从APP store 导入 AnyChart
1.2 阅读文档
1.2.1 AnyChart 文档
Any Chart Widgets | Mendix Documentation
可以通过右下角切换语言
1.2.2 如何使用 AnyChart
Any Chart Cheat Sheet | Mendix Documentation使用任何图表 | Mendix文档Any Chart Cheat Sheet | Mendix Documentation
1.2.3 备忘单
Any Chart Cheat Sheet | Mendix Documentation
读完之后也差不多了解了大致的流程:
(1)确定图表类型 (备忘单中有相关类型名称)
(2)准备Json数据
(3)创建Json数据导出的映射
(4)获取数据
(5)绘制并设置图表
2. AnyChart 操刀
2.1 创建柱状图
2.1.1 Json数据准备
从备忘单拷贝出来我们需要的JSON数据:
[
{
"x": [
"giraffe",
"elephant"
],
"y": [
2.0,
4.0
],
"type": "bar",
"orientation": "v",
"name": "serial-name"
}
]
JSON数据里面是什么内容并不重要,重要的是格式。
这里如果需要设置图表的相关属性可以参考:
Chart Advanced Cheat Sheet | Mendix Documentation
2.1.2 创建JSON Structure
创建JsonStructure, 拷贝Json数据过来,点击Format以及Refresh刷新数据。
检查数据,没有问题最后点击OK即可。
2.1.3 创建Export Mapping
选择上一步的JSON Structure,展开所有层级并选中,最后点击OK。
点击自动映射按钮,
设置完成后,
完成这一步后,检查Domain Model里面是不是自动创建了Entity。
如果没有,清除映射关系或者重复以上操作。
2.1.4 View创建
(1)拖一个data view,并把AnyChart拖进来。
(2)Data view的数据源直接选择创建MicroFlow的方式。
2.1.5 MF设置
微流1:获取数据并转换为JSON格式反馈给页面。
微流2:迭代List,返回JSON,输入参数是List。
坐标数据设置:X轴为我们的订单,Y轴为物料需求数量。
返回的数据类型JSONData 实体类手动创建。
测试:
折线图已经出来。
2.1.6 设置x,y轴Label等属性
这里我们用到另外一个Entity
JsonData用来绘制图表区域的数据,而JsonDataLayOut则是用来控制图表的其他属性。
具体可以参见:Chart Advanced Cheat Sheet | Mendix Documentation
在得到JSON后,我们设置一下JSONDataLayout。
'{
"layout": {
},
"xaxis": {
"title": "Order Number",
"titlefont": {
"family": "Droid Sans, Droid Serif, sans-serif",
"size": 18,
"color": "#777676"
}
},
"yaxis": {
"title": "Material Count",
"titlefont": {
"family": "Droid Sans, Droid Serif, sans-serif",
"size": 18,
"color": "#777676"
}
}
}'
最重要的一步:将Layout设置绑定到AnyChart。
测试效果:
图表的标题我通过其他方式设置了,这里不通过JSON。
3. 叠加其他系列数据
在做的过程中我们发现,其实就是不同系列的JSON数据就是一个系列。想到这一点就简单了。
我们只需要在返回JSON数据前(End point 前),增加查询其他系列数据的功能即可。废话不多说上图:
测试一下:
4. MicroFlow Timer定时器的使用
AnyChart是不带定时刷新的,需要通过MicroFlow Timer来设置
4.1 APP Store导入MicroFlow Timer
4.2 MicroFlow Timer设置
4.3 MicroFlow Timer 微流设置
原理就是将你图表的微流定时执行一次,将新的结果返回页面。
5. 总结
- AnyChart能够实现不同类型图表的叠加展示,每一个系列就是一组JSON数据,需要在MF中定义。Anychart可以通过JSON来设置图标格式。
- 如果需要对整体样式设置(修改theme 目录下 com.mendix.charts.json文件)
- Anychart不支持自动刷新,需要定时器配合。
6. 备注显示图表数据
texttemplate: "%{label}: %{value} (%{percent})",
textposition: "inside", {
"mode": "lines+markers+text",
"texttemplate": "%{y}%",
"textposition": "top center" }