Mendix 前端如何使用Anychart

最新推荐文章于 2022-04-23 10:46:33 发布

可爱的刘三岁

最新推荐文章于 2022-04-23 10:46:33 发布

阅读量690

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/qq_38162116/article/details/117291046

版权

如何使用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是否被修改。