国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

一個真正“會動”的餅圖，不只是視覺上的酷炫，而是交互背后的思維表達(dá)。在本系列第3篇中，我們繼續(xù)探索如何通過 Axure9 實現(xiàn)數(shù)據(jù)可動態(tài)增刪改的餅圖組件。

最近無聊，在網(wǎng)上閑逛，看到一篇教程《能增刪改數(shù)據(jù)的動態(tài)餅圖》，故仿照實踐。

因信息量較大，分三篇完成，如下：

1. 通過JavaScript代碼，集成eCharts圖表
2. 使用中繼器來代替eCharts圖表數(shù)據(jù)源
3. 使用中繼器動態(tài)修改數(shù)據(jù)源，讓餅圖動起來

在上一章內(nèi)容之上繼續(xù)，步驟如下：

1.美化一下中繼器表格

* 添加4個矩形元件排列一行當(dāng)作表格頭部，分別輸入文本“序號”、“品牌”、“銷量”、“操作”

* 雙擊中繼器“chartDataSource”進(jìn)入內(nèi)部，同樣添加4個矩形元件作為表格內(nèi)容的背景，將之前添加的lblNo、txtBrands、txtSales置于矩形之上，添加3個圖形作為操作按鈕，分別為“前插一行”、“后插一行”、“刪除當(dāng)前行”

2.中繼器更新行

修改文本框的數(shù)據(jù)，更新當(dāng)前行的值，同時餅圖數(shù)據(jù)也在變化，我們可以通過文本框失去焦點去代表輸入完成。

* 雙擊中繼器“chartDataSource”進(jìn)入內(nèi)部

* 點擊文本框“txtBrands”添加事件“失去焦點時”

* 添加動作“設(shè)置文本”，將“l(fā)blShowData”設(shè)置為空，就是清空lblShowData顯示內(nèi)容，避免數(shù)據(jù)重復(fù)

* 添加中繼器動作“更新行”，將“chartDataSource”當(dāng)前行的列“Brands”的值設(shè)置為[[This.text]]

* 添加動作“觸發(fā)事件”，讓“chartContainer”重新載入，以更新echarts圖表

相同的操作，給文本框“txtSales”也來一套

這樣就可以實現(xiàn)更新中繼器當(dāng)前行的數(shù)據(jù)，同時餅圖也可以跟著變化

3.中繼器新增行

點擊按鈕“前插一行”，在表格當(dāng)前行前插入一個新行，同時將其他行的序號列進(jìn)行更新。

* 雙擊中繼器“chartDataSource”進(jìn)入內(nèi)部

* 點擊圖片“前插一行”，添加事件“單擊時”

* 添加動作“設(shè)置文本”，將“l(fā)blShowData”設(shè)置為空，就是清空lblShowData顯示內(nèi)容，避免數(shù)據(jù)重復(fù)

* 添加中繼器動作“更新行”，當(dāng)前行及以下的行序號都要加1

* 添加中繼器動作“新增行”，新加空白行的序號為當(dāng)前行的值減一

相同的操作，給圖片“后插一行”也來一套，稍微的區(qū)別是更新行的規(guī)則

預(yù)覽之后發(fā)現(xiàn)，在新增行之后，序號沒有排序，我們對排序做一下處理

* 點擊中繼器“chartDataSource”

* 添加事件“載入時”，添加中繼器動作“添加排序”，按照no列進(jìn)行升序排列

這樣就可以實現(xiàn)中繼器新增行，同時餅圖也可以跟著變化

4.中繼器刪除行

點擊按鈕“刪除當(dāng)前行”，在表格當(dāng)前行前插入一個新行，同時將其他行的序號列進(jìn)行更新。

* 雙擊中繼器“chartDataSource”進(jìn)入內(nèi)部

* 點擊圖片“刪除當(dāng)前行”，添加事件“單擊時”

* 添加動作“設(shè)置文本”，將“l(fā)blShowData”設(shè)置為空，就是清空lblShowData顯示內(nèi)容，避免數(shù)據(jù)重復(fù)

* 添加中繼器動作“更新行”，當(dāng)前行以下的行序號都要減1

* 添加中繼器動作“刪除行”，刪除當(dāng)前行

* 添加動作“觸發(fā)事件”，讓“chartContainer”重新載入，以更新echarts圖表

這樣就可以實現(xiàn)中繼器刪除行，同時餅圖也可以跟著變化

最后，把元件“l(fā)blShowData”隱藏起來

5.完整版預(yù)覽效果

–end

我也是在跟著老師的教程一步步走下來，只不過原文有些細(xì)節(jié)沒有說出來，所以借此補充。

感謝

http://zhangjingwei.cn/rp/5687731.html

http://zhangjingwei.cn/rp/5054935.html