如何使用mendix组件Anychart
红猪
2021.05.26 14:26发布于技术 - 前端与UI
3185

如何使用Mendix组件Any Chart

介绍

基本图表小部件提供了一组易于配置的图表,如线、条、列、饼状图等。这些图表可以通过advanced (高级)选项进行微调。 当advanced (高级)选项不够时,可以使用Any Chart小部件。 使用任何图表,你可以构建所有的图表类型,可以使用Plotly.js以及动态配置图表的选项。所以,如果你想建立一个3D图表或有一个动态系列,Any chart是你的朋友。 image.png ::: hljs-center

图1:Any Chart 部分图展示

:::

这篇指南将教你如何做以下事情:
  1. 创建一个带有示例数据的折线图
  2. 导出图表的数据
  3. 使用运行时游乐场微调图表 学习先决条件
在开始本指南之前,请确保您具备以下先决条件:
  • 最新的Any Chart模块
  • 对JSON数据结构的理解

Any Chart配置结构

Any Chart widget(部件)可以通过配置 JSON 数据数组和 Layout 布局对象。 这些配置属性可以被设置为静态的(statically),或者通过数据源属性(Source Attribute)或者通过样本数据(Sample Data)。 image.png ::: hljs-center

图2:Any Chart Data 设置

:::

image.png ::: hljs-center

图3:Any Chart Layout 设置

:::

Source属性中的配置将合并到静态设置中,并将覆盖所有公共属性。 当未选择Source属性或在Mendix Studio Pro预览中呈现示例数据时,示例数据在运行时用于演示目的。详细解释请看图2,图3。

创建Anychart

使用“Anychart”widget小部件创建折线图,请按照下列步骤操作:

  1. 创建一个带有data view(Chart context图表上下文)的页面。
  2. 在data view中添加 “Anychart” widget 。
  3. 从“Anychart”cheat sheet(备忘单)中选择折线图示例: [ { "x": [ 1, 2 ], "y": [ 1, 2 ], "type": "scatter" } ]
  4. 在Studio Pro中,将数据复制到“Anychart” widget属性选项卡的“Data”字段中,然后选择“Static”。
  5. 运行应用程序以确认图表正确呈现。
  6. 将数据分为static(静态)和 dynamic (动态)部分,这些部分将根据领域模型生成。

static : [ { "type": "scatter" } ] Sample data : [ { "x": [ 1, 2 ], "y": [ 1, 2 ] } ] image.png 7. 运行该应用程序以预览图表。 image.png

利用映射生成JSON数据

生成Any Chart需要的JSON数据,需要以下几个步骤:

  1. 创建 Entity 模型 Graph 实体,添加attributes属性名称Name: Data(可以自定义名字)和 Layout(可以自定义名字)都设置为**String Unlimited** 。 image.png
  2. 添加 Data String Unlimited 属性到 Source Attributeimage.png
  3. 创建JSON Structure 并且使用 Sample data 作为数据片段。 image.png
  4. 创建导出对于JSON StructureExport Mapping image.png image.png
  5. 创建微流获得data
  6. 使用 Export Mapping 去生成一个String类型的变量。存储值value到选定为Source attributeObject 属性中。 image.png image.png 如果需要的话,layout 数据可以以同样的方式 生成静态 Layout

微小的调整

考虑到每次在Mendix Studio Pro中调整Data对于JSON配置可能会很麻烦。Any chart提供了Toggle Editor。 Toggle Editor不会对更改的数据进行存储,如果希望在下次运行项目时看到展示图表更改了还是要重新修改Any chart数据在Mendix Studio Pro 中。 对于微调Any Chart,需要一下几个步骤。

  1. 在Mendix Studio Pro中打开拖入的Any chart控件,选择Data标签页 设置Mode选项为 Development
  2. Run project,启动项目,打开到拥有Any chart的页面。
  3. 点击 Toggle Editor 按钮,在右上方去调优你的图表。 image.png
  4. 在Toggle Editor 选择Data 或者layout在下拉菜单中。
  5. 编辑静态的Data或者Layout。
  6. 复制Copy新的设置数据,到Mendix Studio Pro 中Anychart中。
  7. 重新运行项目确定Any Chart是否被修改。

更多资源

Simon
点赞
收藏
手机查看
举报
5个回复
倒序看帖
仅看楼主
楼层直达
    zhangguangxu
    2021.05.26 15:04 发布
    #1

    请问从第5步开始创建微流是怎么处理的,没有看到详细的步骤,谢谢~

    首赞
    回复
    举报
    hill
    2021.06.04 21:24 发布
    #2

    很不错

    首赞
    回复
    举报
    kyle
    2021.06.04 21:34 发布
    #3

    实用的教程

    首赞
    回复
    举报
    红猪
    2021.06.30 12:49 发布
    #4

    Demo下载 链接:https://pan.baidu.com/s/1PdDCfBZV5BXZgvKVWeGDgg 提取码:hmrk

    首赞
    回复
    举报
    u-infor-lzq
    回复
    红猪
    2021.07.14 09:26 发布

    谢谢

    首赞
    回复
    举报