只需一個(gè)網(wǎng)站，快速制作任意角度的玫瑰圖！

時(shí)間：2023-07-03 16:09:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 16:09:02 來源：網(wǎng)站運(yùn)營(yíng)

只需一個(gè)網(wǎng)站，快速制作任意角度的玫瑰圖?。涸谏弦黄恼轮?，給大家?guī)砹送ㄟ^AI制作360°變種柱狀圖（玫瑰圖）！

這一篇，我將和大家說一個(gè)網(wǎng)站，通過這個(gè)網(wǎng)站你可以在2分鐘內(nèi)做出任意角度的玫瑰圖！


一 這個(gè)網(wǎng)站到底是誰？

這個(gè)網(wǎng)站叫做Charticulator，它是微軟研究院的一個(gè)數(shù)據(jù)可視化產(chǎn)品，無需代碼，無需設(shè)計(jì)功底，直接通過拖拽數(shù)據(jù)的方式，就可以快速生成定制化的可視化圖表，大家會(huì)上網(wǎng)、會(huì)用鼠標(biāo)就行。英語不夠好的小朋友也不要怯場(chǎng)，用用瀏覽器自帶的“翻譯成中文”功能，基本就可以無障礙操作了。

Home | Charticulator↑ Charticulator網(wǎng)站首頁(yè)（https://charticulator.com/）

這個(gè)網(wǎng)站和RAWGraphs很類似，但是我覺得它的靈活性、創(chuàng)新性、自定義性，要遠(yuǎn)遠(yuǎn)的大于RAWGraphs。

二 上傳數(shù)據(jù)到Charticulator網(wǎng)站

首先，我們將一份數(shù)據(jù)另存為CSV,這里已《李國(guó)慶在微博上最?；?dòng)的人》的源數(shù)據(jù)為例，只保留2列數(shù)據(jù)列就行。

接著我們打開Charticulator網(wǎng)站，將我們的數(shù)據(jù)，通過拖拽或選擇文件的形式上傳到這個(gè)網(wǎng)站。


三 Charticulator網(wǎng)站操作步驟

數(shù)據(jù)上傳完成后，會(huì)出現(xiàn)下圖中的這個(gè)操作界面，主要由數(shù)據(jù)區(qū)、視圖區(qū)、功能區(qū)、圖層區(qū)、屬性區(qū)、圖表生成區(qū) 6個(gè)區(qū)構(gòu)成，接下來的步驟操作會(huì)在這6個(gè)區(qū)中來回切換，大家可將這張圖保存下來，跟著我操作時(shí)對(duì)應(yīng)著看。

↑ Charticulator的操作界面

和用AI操作的思路一樣，我們首先先創(chuàng)建一個(gè)基礎(chǔ)的柱狀圖。

選擇功能區(qū)中的【矩形形狀】（第一個(gè)圖標(biāo)），將形狀拖拽到視圖區(qū)中，然后將數(shù)據(jù)區(qū)中的【次數(shù)】列拖拽到屬性區(qū)中柱子的【Height】選項(xiàng)（或者拖拽到視圖區(qū)中矩形的【Height】），這樣基礎(chǔ)的柱狀圖就生成了。

基本的柱狀圖生成后，那我們?cè)撊绾紊?60°的變種柱狀圖呢？

其實(shí)我們只需要用到功能區(qū)中的一個(gè)功能就能實(shí)現(xiàn)。

我們選擇功能區(qū)中的【極坐標(biāo)】，也就是右上方倒數(shù)第二個(gè)圖標(biāo)，拖拽到圖表生成區(qū)，這時(shí)我們會(huì)發(fā)現(xiàn)360°的變種柱狀圖，立馬就生成了。你還可以通過鼠標(biāo)調(diào)整內(nèi)圓的大小。

數(shù)據(jù)上傳完成后，會(huì)出現(xiàn)下圖中的這個(gè)操作界面，主要由數(shù)據(jù)區(qū)、視圖區(qū)、功能區(qū)、圖層區(qū)、屬性區(qū)、圖表生成區(qū) 6個(gè)區(qū)構(gòu)成，接下來的步驟操作會(huì)在這6個(gè)區(qū)中來回切換，大家可將這張圖保存下來，跟著表哥操作時(shí)對(duì)應(yīng)著看。

是不是感覺很不可思議！

接著我們?cè)诿扛拥纳戏郊尤胛淖郑?br>
選擇功能區(qū)中的【文字工具（T）】(第四個(gè)圖標(biāo)）并拖拽到視圖區(qū)中柱子的上方，并將數(shù)據(jù)區(qū)中的【微博用戶名】列，拖拽到剛剛生成的【文字（Text）】中。

這時(shí)我們便發(fā)現(xiàn)文字很快速的就出現(xiàn)在了每根柱子的上方，因?yàn)樾枰淖重Q排并和和柱子的角度保持一致，我們可在視圖區(qū)中旋轉(zhuǎn)文字，那么圖表生成區(qū)中的所有文字也相對(duì)應(yīng)的同步進(jìn)行了旋轉(zhuǎn)。

柱子和文字都生成后，我們可以直接在這個(gè)網(wǎng)站上根據(jù)數(shù)值賦予柱子顏色。

在圖層區(qū)中選中【Shape1】,將數(shù)據(jù)區(qū)中的【次數(shù)】列拖拽到屬性區(qū)中的【Fill】，會(huì)發(fā)現(xiàn)柱子立馬就生成了一個(gè)黑色的漸變色，如果要對(duì)配色進(jìn)行調(diào)整，可點(diǎn)擊右側(cè)【鏈接 】按鈕對(duì)配色進(jìn)行調(diào)整，這里有兩種方案，一種是選擇系統(tǒng)默認(rèn)自帶的配色，另一種可點(diǎn)擊【Custom】上傳顏色代碼來自定義顏色。

這里我粘貼了5個(gè)漸變色上去，來自定義柱子的顏色，大家喜歡這個(gè)紅色漸變的話，照著敲一下就好。

到這一步，在網(wǎng)站中生成的360°的變種柱狀圖的大框架，基本上已經(jīng)完成了。

剩下的細(xì)節(jié)元素的添加調(diào)整，在這個(gè)網(wǎng)站上進(jìn)行并不是很友好，我們可以導(dǎo)出SVG，移步到AI中加工。

點(diǎn)擊左上方的【導(dǎo)出圖表】（第四個(gè)圖標(biāo)），選擇導(dǎo)出【SVG】格式。

四 AI中添加細(xì)節(jié)

我們用AI打開導(dǎo)出的svg文件。

將svg文件，復(fù)制粘貼到一個(gè)空白畫板上，點(diǎn)擊工具欄中的【直接選擇工具】或者按鍵盤快捷鍵【A】將標(biāo)題選中刪除，在選擇【編組選擇工具】選中其中的一個(gè)文字，點(diǎn)擊兩下，這時(shí)所有的文字就全部選中了，字體選擇可自定義，文字大小調(diào)整為22pt。

同時(shí)還可在【字符】選項(xiàng)中將字符間距調(diào)整為【視覺】，字距調(diào)整為【-25】（ 將文字在字符選項(xiàng)中調(diào)整為視覺，會(huì)讓文字在視覺的觀感上更緊湊，同時(shí)也可壓縮字體）。

接下來舉一反三，加入細(xì)節(jié)元素的操作和上篇介紹的用AI添加細(xì)節(jié)的步驟一樣，這里就不一一介紹了！

最后加入【標(biāo)題】、【注】、【圖例】和其他元素，再根據(jù)版面安排調(diào)整下間距，那么這張結(jié)合工具制作完成的360°變種柱狀圖（玫瑰圖）就完成了。

五 總結(jié)

charticulator非常的靈活，只需鼠標(biāo)的拖拽，你就可以創(chuàng)建不只是360°、180°、90°的柱狀圖變種，任何的角度你都可以創(chuàng)建。

甚至你還還可以通過功能區(qū)的【自定義曲線】（右側(cè)最后一個(gè)圖標(biāo)）將柱狀圖變種成曲線波浪圖形，在這個(gè)網(wǎng)站上可以創(chuàng)新的形式非常的多，大家可在官網(wǎng)的Gallery、Getting Started中進(jìn)行學(xué)習(xí)。

還是我在上篇文章中說的方法論理念：不要局限于工具、軟件本身，任何的工具、軟件都是為你的作品服務(wù)的!

只要是能夠提升效率，完成作品，我們就可以在多種工具、軟件、網(wǎng)站中進(jìn)行跨界的結(jié)合使用！

什么樣的數(shù)據(jù)，結(jié)合什么樣的工具、軟件，可以做出什么樣的形式，這些都需要慢慢的學(xué)習(xí)和積累，而你可以跟著我學(xué)，可以快速的學(xué)習(xí)到這些組合的技能，提高你的工作效率！

比如，基于charticulator網(wǎng)站，我們還可以這么玩：創(chuàng)建出以下這些DT文章中出現(xiàn)過的可視化圖表！

<br> (二維碼自動(dòng)識(shí)別)

如果你覺得我分享的這篇不錯(cuò)，歡迎點(diǎn)贊、評(píng)論、和轉(zhuǎn)發(fā)！

我們下期見！