amcharts cover

Amcharts 是一個強大的 Javascript 圖表函式庫,但他不只是一個函式庫而已;他同時提供了一個線上製作圖表的工具 - live.amcharts.com -這是小編目前看過的線上工具中個人評價最高的一個,他除了多樣性的圖表類型外,客製化空間也相當大,繪製成果也十分美觀。今天我們就簡單的介紹一下這個線上圖表工具。

Amcharts Library 分成三個部份,Javascript Charts - 提供網頁圖表繪製需求的解決方案; Javascript Stock Chart - 提供時間序列相關資料 ( 主要是財務相關的資料,如股票 ) 的視覺化方案;Interactive Javascript Maps - 互動式地圖函式庫,以及剛剛所提到的線上圖表製作工具 - live.amcharts.com

與 plot.ly 不同的是,Amcharts 把圖表 + 資料視為一個單位,所以在製作圖表的時候,我們會先選擇圖表類型,然後將資料填到該圖表中。圖表類型分為七類,長條圖(橫的+直的),線圖, 區域圖,圓餅圖,散佈圖,其它類型等等,而各類型又有許多種變化,比方說 3D 、 Stacked 、 100% Stacked 等等,圖表選定了之後要再改就沒有辦法了,所以一開始要慎重決定。

Amcharts Chart Type選定圖表之後便會進到 Amcharts 的線上編輯器,一個還蠻複雜的介面 - 畫面左方有各式各樣的分類設定項,中間則用來修改特定分類的屬性,最重要的圖表與資料則是塞在右方分上下顯示,基本上會需要大一點的螢幕以利編輯。雖然編輯介面乍看之下很複雜,這也提供了一個蠻大的設定彈性,比方說所有文字的字體與大小,彈出式資訊 ( Balloon,滑鼠移到圖表上時顯示各項數據的對話框 ) 的位置、動畫效果,數字格式 ( 比方說 1000 顯示為 1K 、 1000000 顯示為 1M ) , 3D 效果的角度與深度等等,可以玩的設定非常的多,他甚至提供了一個手繪風格的設定,讓圖表變得像是徒手畫出來的,當然這點也可以調整其細節 ( 手繪的厚度與亂度 )。又或者像是圓餅圖,我們可以設定把太小的餅的文字隱藏,避免做出過於擁擠的圖。

Amcharts Editor

hand-drawn styleAmcharts 把圖表中的元素當做是一個個元件來繪製,例如若我們想要在長條圖中多增加一筆資料,可以在左方分類的「Graph」中新增一個 Graph ,並在其「Data Fields」選單中設定其 Value field 至對應的 Data Column。Data Field 選單中有非常多的項目可以設定,例如 Alpha 、 Bullet Size 、 Color Field 等等,全都是用來微調圖表中對應項目的參數 ( 透明度、顏色等等 ) 。

下圖是一個實際上嵌入 Amchart Live Editor 製作出來的圖表的範例:

優缺點總結

Amcharts 線上編輯器嚴格來說並不比 plot.ly 強大,又或者我們可以把 Amcharts 線上編輯器當做是 Amcharts Javascript Library 的 Styling Wizard,用以節省在設定圖表時所花費的時間。Amcharts 線上編輯器可以產生圖表對應的 JSON Object,讓你直接塞到 Amcharts Javascript Library 裡使用,以這個角度來看,這個線上編輯工具主要還是輔助 Library 使用。

不過, 相對於 plot.ly 較為生硬的圖表來說, Amcharts 很容易就可以做出不錯看的圖表,而他相當具彈性的設定項讓你可以針對各別網站做樣式的調整,而這個設定只要利用同一個 JSON 物件就可以跨圖表做設定,相當的方便。

製作資料視覺化 - 尤其是資訊圖表 -視覺性是一個很重要的因素,無論在資訊的傳遞或是在行銷手段上來看,一個賞心閱目的圖表都是必須的,而這就牽涉到圖表客製化的空間是否夠大。我覺得 Amchart 在這個層面上來說做得還算是不錯。

但是說到缺點也不是沒有,這邊條列如下:

  • 中文支援不好。填寫資料時可能會因為中文而造成表格移位,無法正確填表
  • 即便不是填表而是匯入,中文仍然無法正確處理
  • 資料表捲動不太對勁,填資料時可能會有點困難
  • 太多設定項可以填,入門讓人有點頭痛
  • 有些動作可以 Undo 有些不行,例如刪除資料欄列無法 Undo

最後,由於Amcharts 線上編輯器等價於 Javascript Library Styling Wizard ,若是碰到不清楚的部份可以查閱函式庫文件深入了解 。 做為函式庫使用在某些情況下是需要付費的,有需要可以參考 Amcharts 的付費標準 。


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *