「資視」指的是資料視覺化，請原諒我使用諧音雙關的爛梗 XD

從第四次工業革命（工業4.0）開始，大數據成為產業發展的顯學，各種產業不斷在收集與歸納龐大的使用者資料，運用在行銷策略、製造生產等領域。不過數據在經過「機器」進行演算與整理後，最終要閱讀的仍然是「人類」，因此有效的資料視覺化能幫助用戶分析和推理。

也因為如此，現在越來越多網站運用所謂的「儀表板」來做數據監控、分析的應用，進而使得圖表繪製逐漸成為前端工程師的必備技能之一。

當然，要是圖表一個一個手刻，那網站還沒做好你可能都想轉職了，不過幸虧 JavaScript 的視覺化函式庫五花八門，像是龐大的 D3.js 或小巧簡單的 Chart.js，都可以幫助我們快速將資料轉換成易讀性高的圖表。

如果你感興趣的話，這裡 可以看到所有知名的 JavaScript 圖表庫及它們之間的比較。

Highcharts

而這次想跟大家介紹的是 Highcharts，它是一套純 JavaScript 的圖表庫，採用 SVG 渲染。

不過似乎是使用人數較少的關係，國內的相關文章寥寥可數，加上官方文件的中翻文本也是較舊的版號，所以這次希望能以一個使用過 Highcharts 的開發者角度來跟各位介紹它，希望以我的使用經驗可以讓大家認識 Highcharts 的強大功能與應用，那就先來看看它的優點與特性吧！

# 優點及特性

1. 支援 iOS / Android 以及各家主流瀏覽器，甚至能兼容到 IE6
2. 採用 SVG 的關係，可操作元素進行事件監聽及互動，並使用 CSS 修改樣式
3. SVG 不依賴解析度，在大畫面上圖表能避免失真
4. 擁有豐富的圖表種類及 API 接口，可做到極具交互性的客製化圖表
5. 在非商業使用上完全免費
6. 文件完善好閱讀(希望D3.js學習一下)

# SVG & Canvas

SVG 與 Canvas 時常被拿來比較，而圖表庫也就很自然的分成兩大派，各自都有其優缺點。

部分說法是 Canvas 的效能較好，但其實這樣的說法是比較偏頗的，在效能部分其實要看使用情境，Canvas 的效能會因為畫布大小受影響，SVG 則是受到物件的數量受到影響。另外在小數據大畫布的情況下，SVG 所佔的記憶體更小，畫面操作上更滑順，在行動裝置使用上會有較好的表現。

所以到底要用 Canvas 還是 SVG 主要還是看情境，而一般基本的折線圖、長條圖為了有更好的可讀性，數據都不會太多，但點散圖、熱力圖這種觀看龐大數據分佈的圖形可能就更適合用 Canvas。

系列內容

這次的系列文章將會從頭介紹 Highcharts 的使用方式及功能，並且透夠簡單的範例來幫助大家加速理解 Highcharts 的應用，大致上會分成四個部分：

1. 初次使用及基礎 API
Highcharts 的圖表有多個元素區塊，我會跟各位介紹各區塊的用途以及屬性設定，未來才能運用它們繪製圖表。

2. 事件交互及進階 API
除了基本 API，還有更多的進階功能可以幫助我們設定或管理圖表，並且透過事件監聽做到更多的互動操作。

3. 進階圖表與特殊技巧
認識絕大多數的 API 後，我們要融會貫通並嘗試製作一些比較進階的圖表類型，同時會和大家分享一些我在實作上的小技巧。

4. 框架的配合
由於現在前端框架的盛行，所以在詳細認識 Highcharts 後，要跟大家分享如何在 Vue.js 的環境中使用 Highcharts 來作為系列的結尾。

這系列提到的都是網頁前端的技術，也有少部分的章節會提到 Vue.js，所以比較適合熟悉 JavaScript 的朋友閱讀，如果沒什麼問題的話...
那就讓我們在接下來的 30 天裡好好認識 Highcharts 吧！

本次鐵人賽文章也會同步到個人部落格：https://maxleebk.com/