如何使用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

總結

以上是生活随笔為你收集整理的Mendix 前端如何使用Anychart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。