Highchart - Cover

使用現成圖表,卻常覺得做不到想要的效果嗎? Highchart 身為一個圖表函式庫,它同時也提供了線上的圖表編輯器,讓你在使用工具快速做圖的同時也保留了客製化的彈性喔!那就讓我們一起來看看如何使用 Highchart 吧!

如果你有看過聯合報新媒體部的數位報導,你可能已經看過 Highchart 的成品了。在聯合報新媒體實驗部的線上數位專輯之中,有不少圖表使用了 Highchart 來製作,比方說在「致命撞擊 — 被低估的死亡車禍數據」中、「統計的魔鬼細節」下方的線圖即是利用 Highchart 製作。

Highchart 是個 JavaScript 圖表函式庫,這代表我們可以使用它搭配 JavaScript 在網頁上來建立統計圖表。要利用 Highchart ,首先在網頁中引入 JQuery 與 Highchart 的程式庫:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>

接著,參考 Highchart 使用文件以建立函式庫所需的對應資料:

  var data = {
    chart: {type: "bar"},
    series: [{name: "Jane", data: [3,1,4,1,5,9]}]
  }

再利用 Highchart 函式在選定的節點上建立圖表即可:

  $("body").highcharts(data);

上面建立的圖表是長條圖,大概會有類似下面這樣的結果:

Bar Chart by Highchart

 

可是,我不會寫程式?

從上面的例子可以了解到 Highchart 接收一個「圖表設定」( 上例中的 data 變數 ) 來繪製圖表,所以我們要做圖表,首先要知道的就是該怎麼產生那個設定。 為了讓這件事更容易辦到, Highchart 提供了圖表線上編輯器「Highchart Cloud」,讓我們可以透過圖形介面直接產生圖表。

首先連至 cloud.highcharts.com 註冊,完成後點擊右上角的「CREATE CHART」:

Create Chart in Highchart

接下來便會進到 Highchart 的圖表編輯畫面。不得不說他的編輯器製作得真的還不錯,具響應式功能又不會太擁擠:

Editor Highchart

從圖中我們可以看到 Highchart 的圖表製作類似 Datawrapper 分成四個步驟:「匯入」、「樣板」、「客製」與「分享」。在這個階段我們可以手動貼上資料到輸入框中,也可以直接使用他所提供的範例資料快速嘗鮮。一但資料填入完成,圖表甚至立刻就出來了:

Line chart with Highchart

完成資料匯入後,我們可以在第二個步驟選擇我們想用的圖表,下圖為可用的圖表類型的參考畫面,可以看到這裡有十種的圖表類型,各種圖表類型 ( 如圖中的「Bar Type」) 還有莫約十種的變化,可說選擇性相當高:

Chart Types in Highchart

任何圖表的選擇都會即時反應到右方的圖表預覽窗,速度非常快。除此之外,我們的資料所不適用的圖表則會以灰色的方式呈現,上圖中的長度圖 ( 中央下方兩張 ) 即為無法使用的圖表類型。若自動套用圖表時資料對應到錯誤的維度上,我們也可以用圖表下方的資料編輯表調整資料的格式,以符合我們想要的資料呈現。

在客製化的部份,則有 11 種不同類別的設定可以調整,它們事實上大多對應到不同的程式設定項;在這邊呈現的選項並不是所有我們可以設定的項目,雖然犧牲了這層彈性,但大大降低了設定複雜度。若我們真的想要進入硬漢模式,點擊設定框上方的「ADVANCED」,會看到一個資料夾架構的屬性編輯窗,它讓我們可以填入幾乎大部份的圖表設定。下圖為「SIMPLE」與「ADVANCED」框的比較:

config and customization

「ADVANCED」硬漢版設定比較詳細,但每個設定項的功能可能還得參考  Highchart 說明文件來了解,若初步想製作一個簡單的圖表,「SIMPLE」模式的表單大多自我解釋了每個項目的用途,我們可以邊看邊設定。

設定完成後,圖表也大致上完成了,這時我們可以點選「ADVANCED」旁的「CODE」將設定項目輸出成程式碼設定,又或者直接進入下一個步驟「SHARE」。

在這個步驟, Highchart 提供了最基本的分享連結、嵌入程式碼以及直接下載圖表為圖檔的選項:

Share with Highchart

若使用連結分享,該連結的 OG ( Open Graph,請參考「Open Graph?跟資料視覺化有什麼關係?」一文 ) 已經是我們所做的視覺化;我們也可以直接使用圖片網址來引用圖片 ( 上圖左下的「Or hotlink to an image!」 ),相當方便。最後的成品如下:

Final Result

到此為止,我們使用線上編輯器做好了一個圖表;如果有任何需要進階客製化的地方,我們可以再接著參考 Highcart 說明文件後進到硬漢版設定項來調整,或者直接將完整的設定碼取出,自行修改。這裡 Highchart 提供了相當的彈性讓我們做各式的客製化,同時也可以在我們自己的網站中以程式碼直接繪製圖表,不再需要依靠嵌入碼或外部連結。真的是相當方便!

結語

雖然說 Highchart 並不是第一個附帶編輯器的圖表函式庫,像先前我們介紹過的 Amchart ( 請參考:「不寫程式也能有強大彈性 - Amcharts 圖表工具」) 也有一個線上圖表編輯器,不過 Highchart 附帶的線上編輯器非常容易使用,不僅使用步驟式引導來帶我們製作圖表,設定項目也將過於複雜的部份分開;編輯畫面也不至於過於複雜。從使用性的角度來看, Highchart 是比 Amchart 更容易上手的。

即便如此,一旦我們想要客製化更多東西,再容易使用的介面也會開始變得複雜;那是因為我們本來就要做很複雜的調整。 Amchart 將所有的設定製作成一個旁大的選單,而 Highchart 則需要我們自行透過說明文件去發掘用法,小編覺得如果我們真的要很彈性、客製的圖表的話,也許使用 D3.js 還是最好的手段;只是當我們不具備程式技能的時候, Highchart 還是可以讓我們做到很多其它圖表工具不容易做到的事情囉。

最後, Highchart 是免費圖表工具,但你可以付費來將他的商標從產生的圖表上移除,在 Highchart 首頁下方即表列了付費之後可以取得的功能,若你們是需要利用圖表的公司或企業,不妨考慮 Highchart 的付費功能喔!


Written by infographics.tw

發表迴響

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