使用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 引入檔案。

<script src="https://code.highcharts.com/highcharts.js"></script>

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

<div id="container" style="width:100%; height:400px;"></div>

接下來就是寫 js 代碼了：

$(function () { 
          var myChart = Highcharts.chart('container', {
              chart: {
                  type: 'column'
              },
              title: {
                  text: '2018 台北市長選舉 0281投開票所選舉資料'
              },
              xAxis: {  
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: '單位：張',
                  },
              },
              series: [
                  {
                      name: '得票數',
                      colorByPoint: true,
                      data: [
                          {
                              name: '吳萼洋',
                              y: 2,
                          },
                          {
                              name: '丁守中',
                              y: 390,
                              color: "#031195",
                          },
                          {
                              name: '姚文智',
                              y: 180,
                              color: "#159818",
                          },
                          {
                              name: '柯文哲',
                              y: 418,
                              color: "#24d7d6",
                          },
                          {
                              name: '李錫錕',
                              y: 1,
                          },
                      ]
                  },   
              ],
          });
      });

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