後台產品的數據可視化圖表產品設計
前些天，做後台的數據子系統的時候，需要用到一些可視化的數據圖表，我用到了一個自認為效果比較好，而且比較方便的方式來實現。
在網上巴拉巴拉地找了一番，目前用到這種方法來做數據圖表的人並不多，我給身邊的朋友介紹了一番，在這裡也給大家分享一下。
做產品經理的過程中，後台的產品做了不少，畫可視化圖表總共經歷了三個不同的階段，分別是：①表格截圖；②Axure鋼筆工具；③Axure元件（文末附下載方式）。
一、使用鋼筆工具製作數據可視化圖表
Excel表格基本上每個人必備的基本計算機操作，在這裡就不啰嗦了。在講Axure元件實現數據可視化之前，先簡單說說通過Axure鋼筆工具來實現的方式。
會PS的人應該都會知道Photoshop裡面有個鋼筆工具，主要用來勾勒一些不規則的輪廓以及勾勒線條或者摳圖。Axure從8.0版本開始，也加入了鋼筆工具以及切圖等功能，我用得最多的就是使用鋼筆工具來畫各種線條（曲線圖）。Axure的鋼筆工具其實和PS裡面的鋼筆工具有比較多的相似之處。
說幾個使用Axure鋼筆工具的時候需要注意的點：
1、使用鋼筆工具時，在完成最後的點的描繪的時候，需要按鍵盤左上角的【Esc鍵】完成繪製；
2、完成繪製的時候，可能很多朋友還看不到線條，那是因為鋼筆工具的線條粗細默認是None的，也即是沒有線條的，因此在線條粗細那裡設置一下即可。
二、利用Axure框架嵌入可視化頁面
折線圖以及柱形圖直接在Axure上完成也並不難，但是如果要用到圓餅圖、環形圖、漏斗圖等更加多樣化的數據可是圖表，那就比較麻煩了。
有些人會使用antv、echarts、HighCharts等可視化工具來製作可視化數據圖表。
使用這種方法來實現數據可視化的步驟如下：
1、進入antv、echarts、HighCharts等任意一個可視化工具的官網，找到對應的可視化圖表；
2、將數據可視化圖表的前端代碼拷貝下來，在代碼編輯器中修改成自己想要的數據指標以及數據項，並保存為.html文件；
3、將生產的.html文件放到要生成Html原型的文件夾中；
3、在原型中，拖入一個【內聯框架】-選擇框架目標-鏈接到URL或者文件-選擇上一步所保存的.htm路徑文件；
4、生成Html原型。
如果對代碼非常頭疼的產品經理，使用這種方法來做的話，無疑是增加負擔。
三、使用Axure元件快速製作可視化圖表
有那麼一些人，已經將Axure用得非常熟練了，加上懂點技術，於是一個數據可視化圖表製作的元件就誕生了——Axhub Charts圖表元件。這個元件的使用方法和我們常用的元件差不多，都是直接拖拽到內容區域進行處理即可。不過該元件比其他普通的元件稍微複雜一些。元件使用了1個矩形+2個中繼器來實現，並且還需要在原型中載入JS代碼（說到代碼的時候不用方，元件的作者已經把需要代碼處理的地方處理好了，使用者不需要懂代碼）。我大致猜測一下這個元件的實現原理，如果不對，歡迎拍磚。矩形的作用是設置圖表的寬高尺寸的，第一個中繼器的作用是設置橫坐標以及統計指標（曲線、柱形、扇區等），因為中繼器的列名不能夠使用中文命名，元件的作者為了能夠滿足大家的個性化需求，因此用第二個中繼器來設置是否顯示坐標軸、圖例標記、主題顏色等。第一個中繼器做了一個用例，使用的是JS的方式載入作者放在伺服器上的資源（html代碼和JS代碼）——javascript:{$axure.utils.loadJS("https://static.axhub.im/charts/axhub.0.1.0.js");}。
元件中有詳細的說明以及常見問題解釋，元件是結合了阿里的Antv數據可視化工具來做的，使用的時候，步驟如下：
1、將元件拖拽到Axure的內容區，並根據需要調整元件的寬高尺寸，圖表顯示出來的大小就是元件的寬高尺寸；
2、修改axhub-line-data這個中繼器的數據集，修改前可預覽看看預設的數據是怎麼顯示的再作修改，一般況下，列名和行分別表示著柱形或者線條和橫坐標內容（列名只能夠是英文或者拼音，不能夠輸入中文）；
3、基本上完成以上兩步即可，如果有其他的個性化需要，可在axhub-line-config中設置。
4、生成Html原型或者預覽，都可以看到動態的圖表（必須在有網路的情況下才能夠看到圖表，因為原型需要載入在線的antv或echarts的庫文件來渲染圖表）。
具只是為了提高效率而已，在使用的過程中，不必想著花大量的時間去將原型做得多好多炫，當然，如果自己非常熟練了，或者很多東西都已經元件化了，在不影響效率和進度的情況下，把原型做得更完美一些也是可以的。
TAG:做產品經理 |