與靜態(tài)圖相比，動(dòng)態(tài)圖更能夠吸引他人注意，更好地呈現(xiàn)所需要表達(dá)的內(nèi)容。本文介紹了動(dòng)態(tài)圖表在數(shù)據(jù)可視化中的作用，并以柱狀圖為例，分享了通過(guò)輸入框控制調(diào)用外部的js圖表的制作教程，希望對(duì)你有所幫助。

(相關(guān)資料圖)

與靜態(tài)圖表相比，動(dòng)態(tài)圖表更能吸引觀(guān)眾的眼球并提供更好的視覺(jué)效果。動(dòng)態(tài)元素可以吸引觀(guān)眾的注意力，使數(shù)據(jù)更生動(dòng)、更具交互性。

這有助于提高信息傳達(dá)的效果，并能夠引起觀(guān)眾的興趣和參與。所以今天作者就教大家，如果通過(guò)輸入框元件，動(dòng)態(tài)維護(hù)可視化圖表里的數(shù)據(jù)，實(shí)現(xiàn)圖表跟隨數(shù)據(jù)變化而變化的效果。

下面我們會(huì)以柱狀圖為案例：

一、效果展示

可以在輸入框里修改項(xiàng)目名或數(shù)據(jù)，修改后自動(dòng)生成對(duì)應(yīng)的柱狀圖。可以在輸入框里增加或刪除數(shù)據(jù)，自動(dòng)生成對(duì)應(yīng)的柱狀圖。可以通過(guò)復(fù)制粘貼的方式，批量添加新的數(shù)據(jù)，自動(dòng)生成對(duì)應(yīng)的柱狀圖。

原型預(yù)覽地址：https://9ancyh.axshare.com/#g=1

二、制作教程

像案例中的柱狀圖，我們主要有兩種方法制作：一種是用Axure原生元件制作的，另外一種是通過(guò)調(diào)用外部js圖表來(lái)制作的。

前者的好處是通過(guò)原生元件制作，無(wú)需聯(lián)網(wǎng)，而且后續(xù)交互都可以自由添加，缺點(diǎn)是首次制作時(shí)間較長(zhǎng)；

后者的好處是，通過(guò)調(diào)用代碼來(lái)實(shí)現(xiàn)，基本復(fù)制粘貼就可以搞定；缺點(diǎn)是后續(xù)如果要制作交互會(huì)比較麻煩，需要聯(lián)網(wǎng)或者js本地化，自身也需要懂一點(diǎn)點(diǎn)代碼。

那今天我就教大家用輸入框控制調(diào)用外部的js圖表，用Axure原生元件制作的以前的教程也有分享過(guò)，有需要的同學(xué)可以查看歷史文章。

1、Axure調(diào)用echarts圖表的原理講解

我們?cè)贏xure里面調(diào)用echarts的基礎(chǔ)圖表，只需在echarts里面找到你需要的圖表，這里是基礎(chǔ)的圖表，那些什么3D的這里不適用。

然后點(diǎn)擊下載示例按鈕，就可以下載這個(gè)圖表的html代碼。

如下圖所示：

我們也可以在紅色框那里填寫(xiě)好具體的數(shù)據(jù)或樣式，調(diào)整好之后在下載就會(huì)得到html文件。那這個(gè)文件怎么應(yīng)用在axure里面呢？

這里有很多種方法，之前在調(diào)用echarts圖表的教程里也有詳細(xì)介紹，這里就簡(jiǎn)單的說(shuō)明一下：

通過(guò)內(nèi)聯(lián)框架，里面填寫(xiě)這個(gè)html文件的本地地址，但是因?yàn)閍xure預(yù)覽是不能打開(kāi)本地文件的，所以我們要生成html文件之后才能看到，如果需要在預(yù)覽就看到，就需要用地址轉(zhuǎn)換工具才行。將html文件放在服務(wù)器或者云存儲(chǔ)的環(huán)境，生成一個(gè)在線(xiàn)的地址，這樣就可以通過(guò)內(nèi)聯(lián)框架直接打開(kāi)對(duì)應(yīng)的地址從而看到圖片了。我們將html文件轉(zhuǎn)為txt，就可以看到里面的html代碼，通過(guò)js調(diào)用的方式，或者將html轉(zhuǎn)成js代碼，將圖表通過(guò)指定元件或者內(nèi)聯(lián)框架來(lái)實(shí)現(xiàn)。

如果前兩種的話(huà)，代碼在文件里面，就很難實(shí)現(xiàn)輸入框控制圖表數(shù)據(jù)了；如果用第三種方法，代碼在axure里面，就可以通過(guò)修改代碼里數(shù)據(jù)的值，從而控制生成對(duì)應(yīng)的圖表。

2. 代碼的拆解

以echarts柱狀圖為例，以下是控制圖表的基礎(chǔ)代碼：

可以看到xAxis里的data是控制柱狀圖的項(xiàng)目，格式為’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’，yAxis里的data是控制柱狀圖數(shù)值，格式為1234, 2468, 3579, 5678, 6666, 3333 。

3. 輸入框里文本的變換

我們?cè)诳匆幌螺斎肟蚶锏奈谋荆缦聢D所示：

所以我們就要將冒號(hào)左變的項(xiàng)目值的格式轉(zhuǎn)變成’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’；冒號(hào)右邊的的數(shù)據(jù)格式轉(zhuǎn)變成1234, 2468, 3579, 5678, 6666, 3333

這里我們就要對(duì)文本進(jìn)行處理。首先我們要取第一行出來(lái)變成如下圖的形式：

這里我們主要用到兩個(gè)函數(shù)，indexof函數(shù)和slice函數(shù)。我們通過(guò)indexof函數(shù)，可以找到第一行的換行的位置，然后用slice函數(shù)可以將他提取出來(lái)，分別設(shè)置到兩個(gè)文本里。

然后我們就要對(duì)提取出來(lái)的文本1月：1234進(jìn)行處理了，這里我們也是用indexof和slice函數(shù)，indexof函數(shù)可以找到冒號(hào)的位置，然后用slice函數(shù)分別提取處冒號(hào)前的項(xiàng)目值，以及冒號(hào)后的數(shù)據(jù)值。

然后我們新建兩個(gè)文本分別保存兩個(gè)值，文本默認(rèn)為空，增加文本為它原來(lái)的值增加上新的值。這里需要注意：項(xiàng)目值的格式’text’,需要用引文引號(hào)包圍，并且用引文逗號(hào)分隔； 數(shù)據(jù)值的格式只需要用英文逗號(hào)分隔即可。

這樣處理完第一行之后，我們接著處理第二行、第三行數(shù)據(jù)，這里我們只需要做一個(gè)循環(huán)即可，判斷它里面的還有沒(méi)有內(nèi)容行，如果有內(nèi)容，我們就繼續(xù)上面的循環(huán)；如果沒(méi)有內(nèi)容了，我們就可以可以結(jié)束循環(huán)，觸發(fā)調(diào)用js圖表，這樣就可以調(diào)用圖表了。

三、交互什么時(shí)候執(zhí)行

最后，我們什么時(shí)候觸發(fā)這個(gè)交互呢？一般我們?cè)谳斎肟蚴ソ裹c(diǎn)的時(shí)候，但是一般默認(rèn)圖表里會(huì)有基礎(chǔ)數(shù)據(jù)，所以我們?cè)谳d入時(shí)就要開(kāi)始執(zhí)行了。

我們要先將xy的記錄文本先設(shè)置為空，因?yàn)檫@是開(kāi)始前，后面都是在他們?cè)瓉?lái)文本的基礎(chǔ)上增加值。如果不清空，在后面修改值的時(shí)候，前面的就不會(huì)重置，變成越來(lái)越多數(shù)據(jù)了。

然后我們考慮到有些人會(huì)打英文冒號(hào)，有些人會(huì)打中文冒號(hào)，所以我們用replace函數(shù)統(tǒng)一將中文冒號(hào)轉(zhuǎn)為英文冒號(hào)。

然后我們觸發(fā)上面文本轉(zhuǎn)換即可。

然后如果修改了數(shù)據(jù)，我們也要觸發(fā)這個(gè)交互。我們以輸入框失去焦點(diǎn)時(shí)，作為修改完成的依據(jù)，這里不需要重新寫(xiě)一遍事件，因?yàn)榍懊孑d入時(shí)已經(jīng)寫(xiě)好了，我們只需要用觸發(fā)交互，觸發(fā)輸入框載入時(shí)即可。

這樣我們就制作完成了通過(guò)輸入框動(dòng)態(tài)維護(hù)可視化圖表的原型模板了，下次使用時(shí)，只需要復(fù)制粘貼，修改輸入框里的選項(xiàng)文字，即可自動(dòng)生成柱狀圖的效果了，是不是很方便呢？

當(dāng)然，后續(xù)你們也可以根據(jù)需要，增加一些常用圖表，例如條形圖、餅圖、環(huán)形圖等，都是一樣的方法哦。

那以上就是本期教程的全部?jī)?nèi)容，感興趣的同學(xué)們可以動(dòng)手試試哦，感謝您的閱讀，我們下期見(jiàn)。

本文由 @AI產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議

該文觀(guān)點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。