使用highchart.js來協助網頁繪圖: column chart

網頁開發常需要使用到各種圖表,今天介紹一款網頁繪圖工具:highchart.js ,點進去連結觀看你可以發現裡面有各式各樣的圖表功能,幾乎什麼圖表都有了,今天我們來用範例講解最基本的直條圖( column chart )。

進入程式範例之前先前情提要一下,highchart 基本上是透過 svg 來繪圖,等於是說他提供你 javascript 的語法控制,然後幫你使用 svg 繪圖在網頁上,所以你的成品會是一個 svg 圖檔,當然他也是會有基本的 RWD 各項功能。

最近剛結束九合一選舉,就讓我們使用最時事的選舉開票來做例子吧!以號稱台灣章魚哥的台北市天母天玉里來說(投開票所編號0281-0285),單以編號0281投開票所來看,我們查詢中選會網站的各候選人的得票數資料為:

  1. 吳萼洋:2
  2. 丁守中:390
  3. 姚文智:180
  4. 柯文哲:418
  5. 李錫錕:1

使用highchart起手式很簡單,就是將它提供的js file給引入即可,你可以使用 <script> 引入cdn,可以使用 npm install,這邊範例簡單起見使用 <script> 從 cdn 引入檔案。

在頁面上提供一個畫圖的區域 div 並給它一個 id:

接下來就是寫 js 代碼了:

首先我們指定 chart type 為 column,此圖表形態為直條圖,指定x軸以及y軸類別以及標題,並在series裡放上我們從中選會網站得到的資料,如此一來highchart就會協助我們製圖,同時可以客製化每個候選人的顏色,成果如下,方便起見我在codepen中引入了 jQuery。