中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

產(chǎn)品經(jīng)理日常工作中，避免不了需要去設(shè)計(jì)后臺(tái)，在后臺(tái)中需要去實(shí)現(xiàn)一些可視化的圖表，那么這些可視化圖表如何制作呢？

產(chǎn)品經(jīng)理日常工作中，避免不了需要去設(shè)計(jì)后臺(tái)，在后臺(tái)中需要去實(shí)現(xiàn)一些可視化的圖表，那么這些可視化圖表如何制作呢？

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

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

Excel表格基本上每個(gè)人必備的基本計(jì)算機(jī)操作，在這里就不做演示了，先簡單說說Axure圖形繪制可視化圖表。

通過axure自帶一些圖形控件，可以輕松地通過改變形狀、大小、顏色來調(diào)整需要實(shí)現(xiàn)一些簡單的圖表樣式，如柱狀圖?。

用過PS的人應(yīng)該都會(huì)知道Photoshop里面有個(gè)鋼筆工具，主要用來勾勒一些不規(guī)則的輪廓以及勾勒線條或者摳圖。Axure從8.0版本開始，也加入了鋼筆工具以及切圖等功能，Axure的鋼筆工具其實(shí)和PS里面的鋼筆工具有比較多的相似之處。所以當(dāng)繪制一些折線圖時(shí)，可以通過Axure的鋼筆工具完成。

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

• 使用鋼筆工具時(shí)，在完成最后的點(diǎn)的描繪的時(shí)候，需要按鍵盤左上角的【Esc鍵】或【雙擊鼠標(biāo)】完成繪制；繪制時(shí)可以添加一些輔助線，幫助定位點(diǎn)不偏移。
• 完成繪制的時(shí)候，可能很多朋友還看不到線條，那是因?yàn)殇摴P工具的線條粗細(xì)默認(rèn)是none的，也即是沒有線條的，因此在線條粗細(xì)那里設(shè)置一下即可。

二、利用Axure框架嵌入可視化頁面

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

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

使用這種方法來實(shí)現(xiàn)數(shù)據(jù)可視化的步驟如下：

• 進(jìn)入antv、echarts、HighCharts等任意一個(gè)可視化工具的官網(wǎng)（百度以上關(guān)鍵詞即可）找到對應(yīng)的可視化圖表；

• 將數(shù)據(jù)可視化圖表的前端代碼拷貝下來，在代碼編輯器中修改成自己想要的數(shù)據(jù)指標(biāo)以及數(shù)據(jù)項(xiàng)，復(fù)制到文本文件中并保存為.html文件；
• 將生產(chǎn)的.html文件放到要生成Html原型的文件夾中；

• 在原型中，拖入一個(gè)【內(nèi)聯(lián)框架】-選擇框架目標(biāo)-鏈接到URL或者文件-選擇上一步所保存的.htm路徑文件；

生成Html原型：

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

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

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

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

矩形的作用是設(shè)置圖表的寬高尺寸的，第一個(gè)中繼器的作用是設(shè)置橫坐標(biāo)以及統(tǒng)計(jì)指標(biāo)（曲線、柱形、扇區(qū)等），因?yàn)橹欣^器的列名不能夠使用中文命名，元件的作者為了能夠滿足大家的個(gè)性化需求，因此用第二個(gè)中繼器來設(shè)置是否顯示坐標(biāo)軸、圖例標(biāo)記、主題顏色等。

元件中有詳細(xì)的說明以及常見問題解釋，結(jié)合了阿里的Antv數(shù)據(jù)可視化工具來做的，使用的時(shí)候，步驟如下：

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

生成Html原型或者預(yù)覽，都可以看到動(dòng)態(tài)的圖表，必須在有網(wǎng)絡(luò)的情況下才能夠看到圖表，因?yàn)樵托枰虞d在線的antv或echarts的庫文件來渲染圖表，當(dāng)然你也可以把渲染庫下載到本地，修改圖表元件庫的指向鏈接就可以了。

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

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

https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about

作者：Iam產(chǎn)品人，公眾號(hào)：Iam產(chǎn)品人

本文由@Iam產(chǎn)品人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unspalsh， 基于CC0協(xié)議