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

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

這有助于提高信息的有效性并引起受眾的興趣和參與。 那么昨晚筆者教大家如果通過(guò)輸入框設(shè)備動(dòng)態(tài)維護(hù)可視化圖表中的數(shù)據(jù)，就實(shí)現(xiàn)了圖表隨著數(shù)據(jù)變化而變化的療效。

下面我們以直方圖為例：

1.效果展示可以更改輸入框中的項(xiàng)目名稱或數(shù)據(jù)，更改后手動(dòng)生成對(duì)應(yīng)的直方圖。 您可以減少或刪除輸入框中的數(shù)據(jù)，并手動(dòng)生成相應(yīng)的直方圖。 您可以通過(guò)復(fù)制粘貼的方式批量添加新數(shù)據(jù)，并手動(dòng)生成相應(yīng)的柱狀圖。

原型預(yù)覽地址：#g=1

2. 制作教程

像案例中的直方圖，我們主要有兩種制作方式：一種是使用Axure原生設(shè)備制作，另一種是調(diào)用外部js圖表制作。

后者的用處在于，它是由原生設(shè)備產(chǎn)生的，無(wú)需聯(lián)網(wǎng)，后續(xù)交互可以自由添加。 缺點(diǎn)是第一次生產(chǎn)時(shí)間較長(zhǎng)；

前者的用處在于可以通過(guò)調(diào)用代碼來(lái)實(shí)現(xiàn)intellij idea替換所有文本，基本上通過(guò)復(fù)制粘貼即可完成； 缺點(diǎn)是以后如果要做交互的話會(huì)比較麻煩，需要網(wǎng)絡(luò)或者js本地化，還需要懂一點(diǎn)代碼。

那明天我就教大家用輸入框來(lái)控制和調(diào)用外部js圖表。 之前用Axure原生設(shè)備做的教程也已經(jīng)分享了。 有需要的朋友可以查看歷史文章。

1.Axure調(diào)用圖原理講解

我們?cè)贏xure上調(diào)用的基本圖表，只要在上面找到你需要的圖表就可以了intellij idea替換所有文本，這里是基本圖表，哪些3D的在這里不適用。

然后點(diǎn)擊下載示例按鈕下載該圖表的html代碼。

如右圖所示：

我們也可以在白框中填寫具體的數(shù)據(jù)或者樣式，調(diào)整后下載后就得到html文件了。 那么這個(gè)文件如何應(yīng)用到axure上呢？

這里的方法有很多，之前調(diào)用圖的教程中也詳細(xì)介紹過(guò)。 這里有一個(gè)簡(jiǎn)單的解釋：

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

2. 代碼的反匯編

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

可以看到xAxis中的數(shù)據(jù)是控制直方圖的項(xiàng)，格式為'', '', 'March', 'April', 'May', 'June', yAxis中的數(shù)據(jù)是控制直方圖值，格式為1234,2468,3579,5678,6666,3333。

3.輸入框中文字的變換

我們正在查看輸入框中的文字，如右圖：

所以我們要把左邊破折號(hào)的item值的格式轉(zhuǎn)換為'','','March','April','May','June'; 引號(hào)右邊的數(shù)據(jù)格式轉(zhuǎn)換為1234, 2468, 3579, 5678, 6666, 3333

在這里我們將處理文本。 首先，我們需要將第一行設(shè)置為如右圖所示：

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

之后我們對(duì)提取出來(lái)的文本:1234進(jìn)行處理。這里我們同樣使用了切片函數(shù)，可以找到引號(hào)的位置，然后使用切片函數(shù)提取引號(hào)之前的item值和之后的數(shù)據(jù)逗號(hào)。 價(jià)值。

之后，我們創(chuàng)建兩個(gè)新文本來(lái)分別保存兩個(gè)值。 默認(rèn)情況下文本為空，文本降低到原始值并降低到新值。 這里注意：item值的格式‘text’需要用引號(hào)冒號(hào)括起來(lái)，并用引號(hào)冒號(hào)分隔； 數(shù)據(jù)值的格式只需要用英文冒號(hào)分隔即可。

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

3. 何時(shí)執(zhí)行交互

最后，我們什么時(shí)候觸發(fā)這種交互？ 通常當(dāng)我們失去輸入框的焦點(diǎn)時(shí)，通常默認(rèn)圖表中都會(huì)有基礎(chǔ)數(shù)據(jù)，所以我們會(huì)在加載時(shí)開始執(zhí)行。

我們需要先將xy的記錄文本設(shè)置為空，因?yàn)檫@是在開始之前，并且值是在其原始文本的基礎(chǔ)上添加的。 如果不清除，當(dāng)之前改變值時(shí)，上面不會(huì)被重置，導(dǎo)致數(shù)據(jù)越來(lái)越多。

后來(lái)我們考慮到有的人可以打中文破折號(hào)，有的人可以打英文逗號(hào)，所以我們用一個(gè)函數(shù)將英文逗號(hào)統(tǒng)一轉(zhuǎn)換為中文破折號(hào)。

然后我們觸發(fā)里面的文本轉(zhuǎn)換。

如果后面數(shù)據(jù)發(fā)生改變，我們也需要觸發(fā)這個(gè)交互。 我們以輸入框失去焦點(diǎn)的時(shí)候作為完成改變的依據(jù)。 這里不需要重寫事件，因?yàn)樯厦婕虞d的時(shí)候已經(jīng)寫好了。 我們只需要使用觸發(fā)交互來(lái)觸發(fā)輸入框加載即可。

這樣，我們就完成了通過(guò)輸入框動(dòng)態(tài)維護(hù)可視化圖表的原型模板。 上次使用時(shí)，我們只需要復(fù)制粘貼并更改輸入框中的選項(xiàng)文本，即可手動(dòng)生成柱狀圖的療效。 不是很好嗎？ 方便性怎么樣？

其實(shí)以后你還可以根據(jù)自己的需要減少一些常見(jiàn)的圖表，比如條形圖、餅圖、環(huán)形圖等，都是同樣的方法。

以上就是本教程的全部?jī)?nèi)容。 有興趣的朋友可以嘗試一下。 感謝您的閱讀。 上一期見(jiàn)。

如有侵權(quán)請(qǐng)聯(lián)系刪除！