中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在系統分析中，可視化視圖是一個相對重要的模塊，那么，你知道如何才能在Axure中制作可以增刪改數據的動態餅圖嗎？本篇文章里，作者便進行了流程展示，一起來看一下吧。

可視化視圖是系統分析中非常重要的一個環節，今天作者就教大家在Axure中如何用中繼器表格結合echarts圖片，制作出一個能夠動態增刪改數據餅圖的原型模板。需要制作的效果如下圖所示：

1. 自動生成餅圖：通過修改中繼器表格中的數據，自動生成對應的餅圖；
2. 移入餅圖可以查看對應的詳細數據；
3. 演示時可以添加、修改或者刪除表格里的數據，餅圖自動調整。

制作教程

1. 表格的制作

1）制作材料

制作材料包含表頭，中繼器和矩形。

① 表頭

表頭由四個矩形組成，如下圖所示擺放。

② 中繼器

中繼器內部元件包括矩形，輸入框、三個圖標按鈕（上方插入行，下方插入行、刪除），如下圖所示擺放。

中繼器表格里面共三列：

no列是后續用于計算上方或下方插入行的邏輯，按照123456……順序填寫即可。

text列是餅圖的項目文字，data列是項目數據。

③ 矩形

這個矩形我們通過js調用echarts的餅圖，讓餅圖出現在矩形內部，具體代碼可以在echarts里找到，找到之后我們需要做的就是通過交互，下圖紅色框里面的內容，換成中繼器里面的數據。具體怎么操作，在之前的文章中繼器結合echarts生成可視化圖表里有詳細的介紹，你們可以先參考該文章，完成中繼器餅圖的制作。

2. 交互制作

1）中繼器載入時的交互

在中繼器載入時，我們要對no列進行排序，為了后續插入行的交互準備。

2）中繼器每項加載時的交互

在中繼器每項加載時，我們需要把中繼器表格里的數據設置到中繼器內部的元件上，我們用設置文本的交互，將no列的值設置到中繼器里第一個矩形（序號），將text列的值設置到第一個輸入框里（項目名稱），將data列的值設置到第二個輸入框里（項目數據）。

3）輸入框失去焦點時

項目名稱輸入框和數據輸入框失去焦點時，代表了輸入已完成，這是我們要通過更新行的交互，更新當前行的值，如果是項目名稱輸入框失去焦點，我們就更新當前行text列的值為輸入框里的值；如果是數據輸入框失去焦點，就更新當前行data列的值為輸入框里的值。

完成之后，我們用觸發事件，觸發餅圖里調用echarts的代碼重新加載，得出新的餅圖。

4）鼠標單擊在上方插入行按鈕的交互

鼠標單擊上方插入行按鈕時，我們要在該行的上一行插入一行空行，那在我們用添加行的交互之前，我們要先用更新行的交互，更新一下序號，因為在上方插入，所以當前行及一下的行序號都要加1，例如，當前行是第三行，如果在上面插入一行，那么原來的第三行就變成第四行，原來的第四行就變成第五行……所以更新的條件為目標行no列的值大于或等于當前行no列的值。

更新完之后，我們用添加行的操作，添加一個空行，no列的值為，當前行的值減一，因為上面我們先做更新行的交互，所以原來是3的行，序號已經變成4，所以我們在4-1等于3的位置插入，所以序號就是4-1=3.

5）鼠標單擊在下方插入行按鈕的交互

鼠標單擊下方插入行按鈕時，其實交互邏輯和上面基本一致，只不過我們需要更新的變成了更新當前行下方行的序號，例如我要在3下面插入一行，原來的第四行就變成第五行，原來的第五行就要變成第六行……所以更新的條件為目標行no列的值大于當前行no列的值，這里條件只是少了一個等于。

然后我們在用添加行的操作，添加一個空行，no列的值為，當前行的值加一，例如在第三行下面增加一行，那他的序號就是3+1=4。

6）鼠標單擊刪除按鈕的交互

鼠標點擊刪除行按鈕時，我們用刪除行的交互刪除當前行就可以了。不過為了序號的連續，我們可以先用更新行的交互，例如我要刪除第三行，原來的第四行就變成第3行，原來的第五行就要變成第4行……所以更新的條件為目標行no列的值大于當前行no列的值，更新序號列，將符合條件的序號都減一。

然后我們就刪除當前行，刪除之后因為數據有變動，我們用觸發事件，觸發餅圖里調用echarts的代碼重新加載，得出新的餅圖。

這樣我們就完成了能增刪改數據的動態餅圖的原型模板了，后續使用也是很方便，初始數據在中繼器表格中填寫后，即可自動生成交互效果。

以上就是本期教程的全部內容，感興趣的同學們可以動手試試哦，感謝您的閱讀，我們下期見。