產(chǎn)品經(jīng)理日常工作中，課e課避免不了(′_｀)需要去設計后臺，程有程在后臺中需要去實(shí)現一些可(ke)視化的大方圖表，那么這些可視化圖表如何制作呢？課e課

產(chǎn)品經(jīng)理日常工作中，避免不了需要去設計后臺，程有程在后臺中需要去實(shí)現一些可視化的大方圖表，那么這些可視化(hua)圖表如何制作呢？課e課

可以通過(guò)四種個(gè)不同的方式，分別是程有程：表格截圖、Axure圖形繪制、大方Axure網(wǎng)頁(yè)框架和Axure第三方元件。課e課

一、程有程使用Axure圖形繪制可視化圖表

Excel表(biao)格基本上每個(gè)人必備的大方基??本計算機操作，在這里就不??做演示了，課e課先簡(jiǎn)單說(shuō)說(shuō)Axure圖形繪制可視化圖表。程有程

通過(guò)axure自??帶一些圖形控件，(′▽?zhuān)?大方??可以輕松地通過(guò)改變形狀、大小、顏色來(lái)調整需要實(shí)現一些簡(jiǎn)單的圖表樣式，如柱狀圖。

用過(guò)PS的人應該(O_O)都會(huì )知道Photoshop里面有個(gè)鋼筆工具，主要用來(lái)勾勒一些不規則的輪廓以及勾勒線(xiàn)條或者摳圖。Axure從8.0版本開(kāi)始，也加入了(le)鋼筆工具以及切圖(tu)等功能，Axu(╯°□°）╯re的鋼筆工具其實(shí)和??P??S里面的鋼??筆工具有比較多的相似之處。所以當繪制一些折線(xiàn)圖時(shí)，可以通過(guò)Axure的鋼筆工具完成。

說(shuō)幾個(gè)使用Axure鋼筆工具的時(shí)候需要注意的點(diǎn)：

使用鋼筆工?具時(shí)，在完成最后的點(diǎn)的描(′_ゝ`)繪的時(shí)候，需要按鍵盤(pán)左上角的【Esc鍵】或【雙擊鼠標】完成繪制；繪制時(shí)可以添加一些輔助線(xiàn)，幫助定位點(diǎn)不偏移。完(O_O)成繪制的時(shí)候，可(╬?益?)能很多(′；ω；`)朋友還看不到線(xiàn)條，那是因為鋼筆工具的線(xiàn)條粗細默認是none的，也即是沒(méi)有線(xiàn)條的，因此在線(xiàn)條粗細(⊙_⊙)那里設置一下即可。二、利用Axure框架嵌入可視化頁(yè)面

以上是一些簡(jiǎn)單的可視化圖表繪制，簡(jiǎn)??易輕便，但如果要實(shí)現一些比較麻煩的圖表，如(╯°□°）╯︵ ┻━┻(ru)圓餅圖、環(huán)形圖、漏斗圖等更加多樣化的數據可視化圖表或是給圖表加上一些特效，該怎么辦呢？

可以使用antv、echarts、HighCharts等可視化工具來(lái)幫你制作可視化數據圖表。

使用這種方法(fa)來(lái)實(shí)現數據可視化的步驟如下：

進(jìn)入antv、echarts、HighCharts等任意一個(gè)可視化工具的官網(wǎng)（百度以上關(guān)鍵詞即可）找到對應的可視化圖表；將數據可視化圖表的前端代碼拷貝下來(lái)，在代碼編輯器中修改成自己想要的數據指標以及數據項，復制到文本文件中并保存為.hヽ(′▽?zhuān)?ノtml文件(′?｀*)；將生產(chǎn)的.html文件放到要生成Html原型的文件夾中(zhong)；在原型中，拖入一個(gè)【內聯(lián)框架】-選擇框架目標-鏈接到URL或者文件-選擇上一步所保存的.htm路徑文件；

生成Html原型：

相對來(lái)說(shuō)這種方式可以實(shí)現非常多的效果(guo)和樣式，實(shí)現起來(lái)也比較方便快速，但如果對代碼非常頭疼的產(chǎn)品經(jīng)(jing)理，無(wú)疑是增加負擔。加上每增加、修改一個(gè)圖表都需要來(lái)回復制代碼，生成文件使用這種方法來(lái)制作，在后期的維護和修改上，并不靈活和方便，這種情況，可以考慮下面一種方法。

三、使用Axure元件快速制??作可視化圖表

感謝那些??技術(shù)大佬，貢獻了這個(gè)Axure組件庫——Axhub Charts圖表元件(jian)。這個(gè)元件的使用方法和我們常用的元?件差不多，直接拖拽到內容區域進(jìn)行處理即可。

不過(guò)該元件比其他普通的元件稍微復雜一些，元件使用了1個(gè)矩形+2個(gè)中繼器來(lái)實(shí)現??，通過(guò)加載組件庫中的JS(′▽?zhuān)?)代碼，呈現圖表效果，（說(shuō)到(′?｀)代碼，元件的作者已經(jīng)把需要代碼處理(li)的地方處理(li)好了，使用者不需要懂代碼）。

矩形的作用是設置圖表的寬高尺寸的，第一個(gè)中繼器的作用是設置橫坐標以及ヾ(′▽?zhuān)??統計指(′_｀)標（曲線(xiàn)、柱形(xing)、扇區等），因為(wei)中繼器的列名(′ω｀*)不能夠使用中文命名，元件的作者為了能夠滿(mǎn)足大家的個(gè)性化需求，因此用第二(╯°□°）╯個(gè)中繼器來(lái)設置是否顯示坐標軸、圖例標記、主題顏色等。

元件中(zhong)有詳細的說(shuō)明以及常見(jiàn)問(wèn)題解釋?zhuān)Y合了阿里的An( ???)tv數據可視化工具來(lái)做的，使用的時(shí)候，步驟如下：

將元件拖拽到Axure的內容區，并根據需要調整元件的寬高尺寸，圖表顯示出來(lái)的大小就是元件的寬高尺??寸；修改axhub-li(′ω｀*)ne-data這個(gè)中繼器的數據集，修改前可預覽看看預設的數據?是怎么顯示的再作修改，一???般況下，列名和行分別表示著(zhù)柱形或者線(xiàn)條和橫坐標內容；基本上完成以上兩步即可，如果有其他的個(gè)性化需要，可在axhub-line-config中設置??，非常方便！

生成Html原型或者預覽，都可以看到動(dòng)態(tài)的圖表，必須在有網(wǎng)絡(luò )的情況下才能夠看到圖表(biao)，因為原型需要加載在線(xiàn)的antv或echarts的庫文件來(lái)渲染圖表，當然你也可以把渲染庫下載到本地，修(xiu)改圖表元件(jian)庫的指向鏈接就可以了。

只是為了提高效率而已，在使用的過(guò)程中，不必想著(zhù)花大量的時(shí)間去將原型做得多好多炫，??當然，如果自己非常熟練了，或者很多東西都已(yi)經(jīng)元件化了，在不影響效率和進(jìn)度的情況下，把原型做得更完美一些也是可以的。

組件庫作者介紹的非常詳細，可以自己下載使用，鏈接地址：