Mendix开发不卡壳之 AnyChart 复合图表+定时器的使用

佐佑不分

已于 2023-08-04 10:27:48 修改

阅读量853

点赞数

分类专栏： Mendix 文章标签：其他

于 2022-04-23 10:46:33 首次发布

本文链接：https://blog.csdn.net/Java_cai_2011/article/details/124358951

版权

Mendix 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

最终效果：

图表由一组折线图，两组柱状图组成，每一组数据都是不同的维度，可以看右上角的系列标注。

数据格式：

合格物料数量	不合格物料数量	物料需求数量

1. 准备工作

1.1 从APP store 导入 AnyChart

2.1.2 创建JSON Structure

2.1.3 创建Export Mapping

4. MicroFlow Timer定时器的使用

4.1 APP Store导入MicroFlow Timer

4.2 MicroFlow Timer设置

4.3 MicroFlow Timer 微流设置

5. 总结

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。