前些天，做背景的資料子系統的時候，需要用到一些可視化的資料圖表，我用到了一個自認為效果比較好，而且比較友善的方式來實作。
在網上巴拉巴拉地找了一番，目前用到這種方法來做資料圖表的人并不多，我給身邊的朋友介紹了一番，在這裡也給大家分享一下。
做産品經理的過程中，背景的産品做了不少，畫可視化圖表總共經曆了三個不同的階段，分别是：①表格截圖；②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原型的檔案夾中；
4、在原型中，拖入一個【内聯架構】-選擇架構目标-連結到URL或者檔案-選擇上一步所儲存的.htm路徑檔案；
5、生成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的庫檔案來渲染圖表）。
工具隻是為了提高效率而已，在使用的過程中，不必想着花大量的時間去将原型做得多好多炫，當然，如果自己非常熟練了，或者很多東西都已經元件化了，在不影響效率和進度的情況下，把原型做得更完美一些也不是不可以的。
以上是關于背景産品的資料可視化圖表産品設計的一些方法以及工具，需要Axhub Charts圖表元件的童鞋，可以到公衆号（zuopmcom）中回複“圖表”擷取下載下傳連結。