網頁開發常需要使用到各種圖表，今天介紹一款網頁繪圖工具：highchart.js ，點進去連結觀看你可以發現裡面有各式各樣的圖表功能，幾乎什麼圖表都有了，今天我們來用範例講解最基本的直條圖( column chart )。
進入程式範例之前先前情提要一下，highchart 基本上是透過 svg 來繪圖，等於是說他提供你 javascript 的語法控制，然後幫你使用 svg 繪圖在網頁上，所以你的成品會是一個 svg 圖檔，當然他也是會有基本的 RWD 各項功能。
最近剛結束九合一選舉，就讓我們使用最時事的選舉開票來做例子吧！以號稱台灣章魚哥的台北市天母天玉里來說(投開票所編號0281-0285)，單以編號0281投開票所來看，我們查詢中選會網站的各候選人的得票數資料為：
- 吳萼洋：2
- 丁守中：390
- 姚文智：180
- 柯文哲：418
- 李錫錕：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。