台灣開發 PlotDB 製作百種動態視覺圖表,不需寫程式也能上手
你有時候會在網路文章中看到一些讓人驚艷的圖表,例如可以互動旋轉的地球上顯示各地區資料。或者你會在一些精緻的<a href="http://www.playpcesor.com/2015/12/47-ppt-google-slide.html" target="_blank">簡報</a>中看到設計很有特色的長條圖、折線圖、趨勢圖。問題是,這些圖表要怎麼做出來呢?一般的<a href="http://www.playpcesor.com/2015/12/excel-google-templates-download.html" target="_blank"> Excel 或 Google 試算表</a>似乎無法解決這個問題?這時候,「 plotDB 」就派上用場了。<p><strong>「 PlotDB 」是由台灣的「<a href="http://blog.infographics.tw/2016/11/plotdb-the-data-visualization-service/" target="_blank">資料視覺化</a>」團隊開發的線上動態圖表製作工具</strong>,它提供了上百種動態圖表樣式,用戶只要上傳資料表格,就能套用樣式,製作出吸睛且多樣化的圖表,不需懂寫程式,也不需懂設計,都能快速上手。</p> <p>我之前在電腦玩物也介紹過不少線上圖表工具:<br /> <a></a></p> <ul> <li><a href="http://www.playpcesor.com/2015/02/chartblocks.html" target="_blank">ChartBlocks 線上製作統計圖表,讓圖表不再千篇一律</a></li> <li><a href="http://www.playpcesor.com/2015/09/timelinejs.html" target="_blank">免費開源時間軸製作 TimelineJS 視覺化歷史免程式碼</a></li> <li><a href="http://www.playpcesor.com/2015/09/10.html" target="_blank">看圖才能說故事!做簡報必備 10 個資訊圖表圖示資源</a></li> <li><a href="http://www.playpcesor.com/2016/10/excel-google-sheet-auto-chart.html" target="_blank">做報表一秒生出各種類統計圖表教學! Excel Google 試算表通用</a></li> </ul> <p><br /> 而「 PlotDB 」無論在視覺圖表的高品質、多樣性,和製作的簡易程度上,確實都有其獨特的特色,非常值得推薦給需要繪製視覺圖表的朋友。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-iEp0K8XTEyY/WC-lIK1oeWI/AAAAAAAFLEo/yr9GtzS3-EEPAk-mR2OE6zVA-AFsW5bEwCLcB/s1600/PlotDB-02.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://4.bp.blogspot.com/-iEp0K8XTEyY/WC-lIK1oeWI/AAAAAAAFLEo/yr9GtzS3-EEPAk-mR2OE6zVA-AFsW5bEwCLcB/s640/PlotDB-02.png" border="0" alt="" width="640" height="324" /></a></div> <p>&nbsp;</p> <h3>1. 選圖表樣式</h3> <p><br /> 「 PlotDB 」在操作上<strong><span style="color: red;">可簡單,可複雜</span></strong>。簡單的話,對像我這樣沒有程式與設計功力的人,也可以輕鬆上手。但其複雜的一面又讓懂得寫程式與設計的人可以自由調整。</p> <p>這篇文章,我就從簡單的一面講。</p> <p>進入「 <a href="https://plotdb.com/" target="_blank">PlotDB </a>」網站,針對自己想要的資訊圖表樣式,選擇一張首頁的圖表模板,進入其中。看到有很多功能先別害怕,大多數都不一定要用到。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-Nv8VN3Cksa8/WC-lIGS1DXI/AAAAAAAFLEk/wv7e44SoAz8rf3Mwg3ynZyz-_3cNZ662QCLcB/s1600/PlotDB-03.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://4.bp.blogspot.com/-Nv8VN3Cksa8/WC-lIGS1DXI/AAAAAAAFLEk/wv7e44SoAz8rf3Mwg3ynZyz-_3cNZ662QCLcB/s640/PlotDB-03.png" border="0" alt="" width="640" height="352" /></a></div> <p>&nbsp;</p> <h3>2. 匯入需要的資料</h3> <p>接著先拉到網頁下半部的「 Data Binding 」,從「 New Dataset 」按鈕,上傳你的表格資料。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-pE0CxUoaxOY/WC-lIrVXi8I/AAAAAAAFLE0/pKPz3wSLOLEzJoTl1nkigh1pVc8BIuUkACLcB/s1600/PlotDB-04.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://4.bp.blogspot.com/-pE0CxUoaxOY/WC-lIrVXi8I/AAAAAAAFLE0/pKPz3wSLOLEzJoTl1nkigh1pVc8BIuUkACLcB/s640/PlotDB-04.png" border="0" alt="" width="640" height="348" /></a></div> <p><br /> 你也可以透過「 PlotDB 」網站直接建立表格資料。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-fzOSNKpT0G8/WC-lIj5BRSI/AAAAAAAFLEw/XHzQ3ClA92caRVNpGnqQ3OEuI2kvWRBPgCLcB/s1600/PlotDB-05.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://2.bp.blogspot.com/-fzOSNKpT0G8/WC-lIj5BRSI/AAAAAAAFLEw/XHzQ3ClA92caRVNpGnqQ3OEuI2kvWRBPgCLcB/s640/PlotDB-05.png" border="0" alt="" width="640" height="382" /></a></div> <p>&nbsp;</p> <h3>3. 拖曳填入資料欄位</h3> <p>點選左方表格清單裡自己的表格資料,然後會看到右方自動拆解出表格裡的各個欄位,每個欄位用一張卡片來表示。</p> <p>把上方「待用」的卡片,<strong><span style="color: red;">拖曳到下方</span></strong>的「圖表所需列表」中即可。</p> <p>例如下圖中,我把「單位」欄位拖曳到圖表的「 Order 」,把「每年份欄位」拖曳到「 Values 」列表。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-h8ONdcPdPFQ/WC-lIoiL-PI/AAAAAAAFLE4/R7uv3EqQeMca8d6A-ZtesYrSkNorkXZBwCLcB/s1600/PlotDB-06.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://4.bp.blogspot.com/-h8ONdcPdPFQ/WC-lIoiL-PI/AAAAAAAFLE4/R7uv3EqQeMca8d6A-ZtesYrSkNorkXZBwCLcB/s640/PlotDB-06.png" border="0" alt="" width="640" height="346" /></a></div> <p><br /> 這樣一來,上方的視覺圖表,就會根據我拖曳的卡片數值,自動產生新的圖表內容了。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-ppVGoYcVQw8/WC-lJLqQx5I/AAAAAAAFLE8/NxH1fAuPessOL6hYw7Xzv6opC5fTxPzggCLcB/s1600/PlotDB-07.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://4.bp.blogspot.com/-ppVGoYcVQw8/WC-lJLqQx5I/AAAAAAAFLE8/NxH1fAuPessOL6hYw7Xzv6opC5fTxPzggCLcB/s640/PlotDB-07.png" border="0" alt="" width="640" height="350" /></a></div> <p>&nbsp;</p> <h3>4. 可查看每個圖表的資料類型如何建立</h3> <p>你可能會問,每個圖表的資料類型都不太一樣,如果我沒有概念,不知道怎麼建立資料表格麼辦?</p> <p>放心,「 PlotDB 」有一個很貼心的設計,捲動到最下方,會有一個「 <strong><span style="color: red;">Check the Sample Data </span></strong>」連結,點擊後,可以看到「針對這個視覺圖表的資料表格範本」,從範本中你就知道怎麼建立適合的資料表了。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-7Vpr7UOH4bw/WC-lJF2GCJI/AAAAAAAFLFA/W3M3-JSSeDsWQEe3mhUVMZ39Nh0qiVM9QCLcB/s1600/PlotDB-08.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://2.bp.blogspot.com/-7Vpr7UOH4bw/WC-lJF2GCJI/AAAAAAAFLFA/W3M3-JSSeDsWQEe3mhUVMZ39Nh0qiVM9QCLcB/s1600/PlotDB-08.png" border="0" alt="" /></a></div> <p>&nbsp;</p> <h3>5. 線上產生圖表</h3> <div></div> <div>完成我需要的視覺圖表後,「 PlotDB 」提供了下載按鈕,我可以把圖表下載成 PNG 或向量圖檔。</div> <div></div> <div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-1ZtNbvXblCg/WC-lJKjEG1I/AAAAAAAFLFE/fxTnf5QXhWAru2MMchIa8KSQIMUAQW7IgCLcB/s1600/PlotDB-09.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://3.bp.blogspot.com/-1ZtNbvXblCg/WC-lJKjEG1I/AAAAAAAFLFE/fxTnf5QXhWAru2MMchIa8KSQIMUAQW7IgCLcB/s640/PlotDB-09.png" border="0" alt="" width="640" height="380" /></a></div> <p><br /> 例如下圖就是我透過「 PlotDB 」製作完成的視覺圖表。<br /> <br /></p> <div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-x39R5BQFgHM/WC-oQ4YAvjI/AAAAAAAFLFU/KtPBiT9JbFQFxunUMuMdieCtiKEN_-d-QCLcB/s1600/Nightingale%2527s%2BRose.png" style="margin-left: 1em; margin-right: 1em;"><img src="https://2.bp.blogspot.com/-x39R5BQFgHM/WC-oQ4YAvjI/AAAAAAAFLFU/KtPBiT9JbFQFxunUMuMdieCtiKEN_-d-QCLcB/s640/Nightingale%2527s%2BRose.png" border="0" alt="" width="640" height="320" /></a></div> <p><br /> 另外因為「 PlotDB 」有許多動態的視覺圖表,這些動態圖可以透過「 Share 」按鈕獲得嵌入其他網頁的語法,就能在你的網站中顯示動態視覺圖囉!</p> <p>這個由台灣團隊製作的「 PlotDB 」線上視覺圖表工具非常強大,目前 Beta 期間開放免費測試,未來應該會採取部分免費、部分收費的形式,推薦大家試試看。</p> <p><br /> <a href="https://plotdb.com/" target="_blank"><span style="background-color: yellow; font-size: x-large;">「 PlotDB 」網站</span></a><br /> <br /></p> <ul> <li> 本文來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:<a href="http://www.playpcesor.com/2016/11/plotdb.html" target="_blank">台灣製造 PlotDB 製作百種動態視覺圖表,不需寫程式也能上手</a></li> </ul><a href="http://www.facebook.com/TKbang">加入T客邦Facebook粉絲團</a><img src="http://feeds.feedburner.com/~r/techbang/~4/5RXnkHl8MsA" height="1" width="1" alt=""/>