Axure 教程:利用圖表前端插件實現高級可視化圖表

11 評論 9552 瀏覽 40 收藏 5 分鐘

如何通過圖標前端插件完成高級可視化圖表?筆者在此給出了詳細教程,與大家分享~~

后臺開發中避免不了實現一些可視化的圖表,主要制作的方法有四種:Excel表格截圖、Axure圖形繪制、Axure網頁框架和Axure第三方圖表元件。

第三個“Axure網頁框架”需要結合antv、echarts、HighCharts等前端可視化插件代碼。

第四個“Axure第三方圖表元件”,是由技術大佬開發的Axhub Charts圖表元件。但是圖表的元件數有限,適合快速搭建簡單的圖表,但是無法滿足我們更復雜的圖表設計。

因此,想要更高級的可視化圖表還是需要通過第三種方法實現。接下來,給大家詳細講解具體方法(此教程以echarts為例):

ECharts是一款由百度前端技術部開發的,基于Javascript的數據可視化圖表庫,提供直觀,生動,可交互,可個性化定制的數據可視化圖表。

具體實現方法

第一步

從左側【元件庫】拉入一個【內聯框架】作為可視化圖表的載體。如下所示:

第二步

1. 瀏覽器打開echarts的可視化圖表官網鏈接地址:https://www.echartsjs.com/examples/zh/index.html

2. 選擇符合你要求的可視化圖表,點擊進入編輯運行頁面:此教程以這個復雜的可視化案例講解,鏈接如下:https://www.echartsjs.com/examples/zh/editor.html?c=pie-nest

圖形如下所示:

點擊右下角的【Download】將圖表的前端代碼下載下來,文件為pie-nest.html。再將此文件放在Axure源文件之前發布生成文件夾里面,如下所示:

你可以在代碼編輯器中修改成自己想要的數據指標以及數據項;

3. 雙擊【內聯框架】,選擇下面的【鏈接到url或文件】的選項,并將pie-nest.html鏈接輸入進去。如下所示:

第三步

雙擊文件夾中的index代碼文件,即可查看到剛才鏈接的可視化圖表效果。如下所示:

只能打開生成的文件夾中的對應頁面html文件,才能看到圖表。

如果從Axure源文件直接點擊右上角的【預覽】按鈕,是無法看到的。出現如下的情況:

教程源文件

百度云教程源文件:https://pan.baidu.com/s/1RRbsnVCp-CstfNL7iG5ILw

提取碼: ei5r

 

作者:火星人~艾斯,公眾號:艾斯的Axure峽谷

本文由 @火星人~艾斯 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大屏可視化組件:https://axhub.im/pro/2b260d89135ec5a1/#g=1

    來自廣東 回復
  2. 可視化圖表官網鏈接地址:https://www.echartsjs.com/examples/zh/index.html 這個網址貌似都是顯示要授權

    來自重慶 回復
    1. 大屏可視化組件:https://axhub.im/pro/2b260d89135ec5a1/#g=1

      來自廣東 回復
  3. 您好請教一個問題,我按照您的教程操作,沒有顯示報表,彈框提示我:百度未授權使用地圖API,可能是因為您提供的秘鑰不是有效的百度LBS開發平臺秘鑰。如果輸入其他網址是可以打開的。不知道作者和其他同學是否也遇到過同樣問題

    來自北京 回復
    1. 斷網狀態或者關掉彈窗后,可以正常顯示

      來自福建 回復
    2. 主要是因為代碼里面引用了百度地圖API,但是未授權或者秘鑰ak失效。解決方法,可以直接刪掉可視化圖表里面的引用百度地圖API的代碼字段。如:

      來自福建 回復
    3. 刪除掉那部分字段呢,這個例子沒舉完呢

      來自重慶 回復
    4. 把這段引用百度地圖的api代碼去掉就行

      來自福建 回復
    5. 來自福建 回復
    6. 百度地圖API的這個‘pie-nest.html’,怎么刪除‘引用百度地圖的api代碼’呢?我打開‘pie-nest.html‘,也是啥都不顯示

      來自陜西 回復
    7. 大屏可視化組件:https://axhub.im/pro/2b260d89135ec5a1/#g=1

      來自廣東 回復