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

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

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

下面我們會以柱狀圖為案例：

一、效果展示

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

二、制作教程

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

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

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

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

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

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

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

如下圖所示：

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

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

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

如果前兩種的話，代碼在文件里面，就很難實(shí)現(xiàn)輸入框控制圖表數(shù)據(jù)了；如果用第三種方法，代碼在axure里面，就可以通過修改代碼里數(shù)據(jù)的值，從而控制生成對應(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. 輸入框里文本的變換

我們在看一下輸入框里的文本，如下圖所示：

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

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

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

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

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

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

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

最后，我們什么時(shí)候觸發(fā)這個(gè)交互呢？一般我們在輸入框失去焦點(diǎn)的時(shí)候，但是一般默認(rèn)圖表里會有基礎(chǔ)數(shù)據(jù)，所以我們在載入時(shí)就要開始執(zhí)行了。

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

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

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

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

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

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

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