如何使用Mendix组件Any Chart
介绍
基本图表小部件提供了一组易于配置的图表,如线、条、列、饼状图等。这些图表可以通过advanced (高级)选项进行微调。
当advanced (高级)选项不够时,可以使用Any Chart小部件。
使用任何图表,你可以构建所有的图表类型,可以使用Plotly.js以及动态配置图表的选项。所以,如果你想建立一个3D图表或有一个动态系列,Any chart是你的朋友。
图1:Any Chart 部分图展示
这篇指南将教你如何做以下事情:
- 创建一个带有示例数据的折线图
- 导出图表的数据
- 使用运行时游乐场微调图表
学习先决条件
在开始本指南之前,请确保您具备以下先决条件:
- 最新的Any Chart模块
- 对JSON数据结构的理解
Any Chart配置结构
Any Chart widget(部件)可以通过配置JSON 数据数组和Layout布局对象。
这些配置属性可以被设置为静态的(statically),或者通过数据源属性(Source Attribute)或者通过样本数据(Sample Data)。
图2:Any Chart Data 设置
图3:Any Chart Layout 设置
Source属性中的配置将合并到静态设置中,并将覆盖所有公共属性。 当未选择Source属性或在Mendix Studio Pro预览中呈现示例数据时,示例数据在运行时用于演示目的。详细解释请看图2,图3。
创建Anychart
使用“任意图表”窗口小部件创建折线图,请按照下列步骤操作:
- 创建一个带有data view(Chart context图表上下文)的页面。
- 在data view中添加“Anychart”widget 。
- 从“Anychart”cheat sheet(备忘单)中选择折线图示例:
[ { "x": [ 1, 2 ], "y": [ 1, 2 ], "type": "scatter" } ]
- 在Studio Pro中,将数据复制到“Anychart” widget属性选项卡的“Data”字段中,然后选择“Static”。
- 运行应用程序以确认图表正确呈现。
- 将数据分为static(静态)和dynamic (动态)部分,这些部分将根据领域模型生成。
static :
[{
"type":
"scatter"
}
]
Sample data :
[{
"x":
[
1,
2
],
"y":
[
1,
2
]
}
]
- 运行该应用程序以预览图表。
利用映射生成JSON数据
生成Any Chart需要的JSON数据,需要以下几个步骤:
- 创建Entity模型Graph实体,添加attributes属性名称Name: Data(可以自定义名字)和Layout(可以自定义名字)都设置为String Unlimited。
- 添加Data String Unlimited属性到 Source Attribute 。
- 创建JSON Structure 并且使用 Sample data 作为数据片段。
- 创建导出对于JSON Structure 的 Export Mapping
- 创建微流获得data。
- 使用Export Mapping 去生成一个String类型的变量。存储值value到选定为Source attribute的Object属性中。
如果需要的话,layout 数据可以以同样的方式 生成静态Layout。
微小的调整
考虑到每次在Mendix Studio Pro中调整Data对于JSON配置可能会很麻烦。Any chart提供了Toggle Editor。
Toggle Editor不会对更改的数据进行存储,如果希望在下次运行项目时看到展示图表更改了还是要重新修改Any chart数据在Mendix Studio Pro 中。
对于微调Any Chart,需要一下几个步骤。
- 在Mendix Studio Pro中打开拖入的Any chart控件,选择Data标签页 设置Mode选项为Development。
- Run project,启动项目,打开到拥有Any chart的页面。
- 点击Toggle Editor按钮,在右上方去调优你的图表。
- 在Toggle Editor 选择Data 或者layout在下拉菜单中。
- 编辑静态的Data或者Layout。
- 复制Copy新的设置数据,到Mendix Studio Pro 中Anychart中。
- 重新运行项目确定Any Chart是否被修改。
更多资源
- Anychart属性: Any Chart https://docs.mendix.com/refguide/charts-any-configuration
- 最常用的Any chart 类型: Any Chart Cheat Sheet
- 最常用的Any chart 设置: Configuration Cheat Sheet
- 完整的Plotly的JSON 参考: https://plot.ly/javascript/reference/
- JSON Structures
- Export Mappings