Axure高保真教程:透過輸入框動態維護視覺化圖表

首頁 > 科技

Axure高保真教程:透過輸入框動態維護視覺化圖表

來源:音樂大燴菜 釋出時間:2023-06-10 00:10

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

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

這有助於提高資訊傳達的效果,並能夠引起觀眾的興趣和參與。所以今天作者就教大家,如果透過輸入框元件,動態維護視覺化圖表裡的資料,實現圖表跟隨資料變化而變化的效果。

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

一、效果展示

  1. 可以在輸入框裡修改專案名或資料,修改後自動生成對應的柱狀圖。
  2. 可以在輸入框裡增加或刪除資料,自動生成對應的柱狀圖。
  3. 可以透過複製貼上的方式,批次新增新的資料,自動生成對應的柱狀圖。

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

二、製作教程

像案例中的柱狀圖,我們主要有兩種方法制作:一種是用Axure原生元件製作的,另外一種是透過呼叫外部js圖表來製作的。

前者的好處是透過原生元件製作,無需聯網,而且後續互動都可以自由新增,缺點是首次製作時間較長;

後者的好處是,透過呼叫程式碼來實現,基本複製貼上就可以搞定;缺點是後續如果要製作互動會比較麻煩,需要聯網或者js本地化,自身也需要懂一點點程式碼。

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

1、Axure呼叫echarts圖表的原理講解

我們在Axure裡面呼叫echarts的基礎圖表,只需在echarts裡面找到你需要的圖表,這裡是基礎的圖表,那些什麼3D的這裡分歧用。

然後點選下載示例按鈕,就可以下載這個圖表的html程式碼。

如下圖所示:

我們也可以在紅色框那裡填寫好具體的資料或樣式,調整好之後在下載就會得到html檔案。那這個檔案怎麼應用在axure裡面呢?

這裡有很多種方法,之前在呼叫echarts圖表的教程裡也有詳細介紹,這裡就簡單的說明一下:

如果前兩種的話,程式碼在檔案裡面,就很難實現輸入框控制圖表資料了;如果用第三種方法,程式碼在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

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

上一篇:我的 AI - AI... 下一篇:瞭解春天的句...
猜你喜歡
熱門閱讀
同類推薦