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

(相關資料圖)

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

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

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

一、效果展示

可以在輸入框里修改項目名或數據，修改后自動生成對應的柱狀圖?？梢栽谳斎肟蚶镌黾踊騽h除數據，自動生成對應的柱狀圖。可以通過復制粘貼的方式，批量添加新的數據，自動生成對應的柱狀圖。

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

二、制作教程

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

前者的好處是通過原生元件制作，無需聯網，而且后續交互都可以自由添加，缺點是首次制作時間較長；

后者的好處是，通過調用代碼來實現，基本復制粘貼就可以搞定；缺點是后續如果要制作交互會比較麻煩，需要聯網或者js本地化，自身也需要懂一點點代碼。

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

1、Axure調用echarts圖表的原理講解

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

然后點擊下載示例按鈕，就可以下載這個圖表的html代碼。

如下圖所示：

我們也可以在紅色框那里填寫好具體的數據或樣式，調整好之后在下載就會得到html文件。那這個文件怎么應用在axure里面呢？

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

通過內聯框架，里面填寫這個html文件的本地地址，但是因為axure預覽是不能打開本地文件的，所以我們要生成html文件之后才能看到，如果需要在預覽就看到，就需要用地址轉換工具才行。將html文件放在服務器或者云存儲的環境，生成一個在線的地址，這樣就可以通過內聯框架直接打開對應的地址從而看到圖片了。我們將html文件轉為txt，就可以看到里面的html代碼，通過js調用的方式，或者將html轉成js代碼，將圖表通過指定元件或者內聯框架來實現。

如果前兩種的話，代碼在文件里面，就很難實現輸入框控制圖表數據了；如果用第三種方法，代碼在axure里面，就可以通過修改代碼里數據的值，從而控制生成對應的圖表。

2. 代碼的拆解

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

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

3. 輸入框里文本的變換

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

所以我們就要將冒號左變的項目值的格式轉變成’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’；冒號右邊的的數據格式轉變成1234, 2468, 3579, 5678, 6666, 3333

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

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

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

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

這樣處理完第一行之后，我們接著處理第二行、第三行數據，這里我們只需要做一個循環即可，判斷它里面的還有沒有內容行，如果有內容，我們就繼續上面的循環；如果沒有內容了，我們就可以可以結束循環，觸發調用js圖表，這樣就可以調用圖表了。

三、交互什么時候執行

最后，我們什么時候觸發這個交互呢？一般我們在輸入框失去焦點的時候，但是一般默認圖表里會有基礎數據，所以我們在載入時就要開始執行了。

我們要先將xy的記錄文本先設置為空，因為這是開始前，后面都是在他們原來文本的基礎上增加值。如果不清空，在后面修改值的時候，前面的就不會重置，變成越來越多數據了。

然后我們考慮到有些人會打英文冒號，有些人會打中文冒號，所以我們用replace函數統一將中文冒號轉為英文冒號。

然后我們觸發上面文本轉換即可。

然后如果修改了數據，我們也要觸發這個交互。我們以輸入框失去焦點時，作為修改完成的依據，這里不需要重新寫一遍事件，因為前面載入時已經寫好了，我們只需要用觸發交互，觸發輸入框載入時即可。

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

當然，后續你們也可以根據需要，增加一些常用圖表，例如條形圖、餅圖、環形圖等，都是一樣的方法哦。

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

本文由 @AI產品人 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。