Highcharts 圖表介紹
我們先來了解一下 Highcharts 可以做到哪些事，平時常見的圖表類型，譬如：曲線圖、柱狀圖、圓餅圖、區域圖、散點圖，都可以用 Highcharts 實作出來
另外，它也能做到合併圖表的功能，舉例來說，如果想在一個圖表中同時有曲線圖加上柱狀圖的樣式，也是能夠做得到的。
除了比較常見的圖表外，Highcharts 也支援其他特別的圖表類型，像是模擬車用儀表板的樣子、文字雲、時鐘、架構圖、時間軸，或是在 Google analytics 後台常看到的桑基圖（Sankey diagram，流程圖的一種）。
Highcharts 除了涵蓋到各種類型的圖表外，在操作上還可以做到無障礙瀏覽的效果，讓視障者也能夠順利操作圖表介面，並用報讀的方式報讀圖表上的資訊
以下為模擬視障者操作圖表的示意影片：
＊附註：如要實現無障礙圖表，需另外引入 Accessibility module
如何實作
大致了解 Highcharts 後，接下來我們就來把它實作出來
引入方式
1. 在 HTML 頁面上方引入 Highcharts
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>2. 在 HTML 頁面中新增一個 DIV 元素，作為放置 Highcharts 圖表的容器。為其設定 ID 值，並設定 Highcharts 圖表的寬度和高度，也可以另行用 CSS 設定寬高度。
<div id=”container” style=”width: 100％; height: 400px”></div>3. 用 JavaScript 設定參數，因設定細節較多，於文章下一段落特別做介紹
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Medium水果行收益'
},
subtitle: {
text: '2021/03/06'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: '佔總收益百分比'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},series: [
{
name: "水果",
colorByPoint: true,
data: [
{
name: "蘋果",
y: 10
},
{
name: "芭樂",
y: 7
},
{
name: "西瓜",
y: 6
}
]
}
],series: [{
data: [10, 7, 6, 5, 4]
}],});
完成以上三步驟，便可以在網頁上看到你的圖表了！
製作客製化圖表
Highcharts 提供大量參數供客製化，參數的功用為設定圖表外觀、圖表規則、調整圖表的互動方式等，數量繁多到簡直可以為了參數直接另建一個網站（參數介紹點我），所以在製作圖表時不可能逐一尋找。
因此建議在製作圖表的第一步就是要先知道元件名稱，再來從該元件底下找參數去設定元件，所以知道圖表元件就能事半功倍。
認識圖表元件
上圖包含：
Title：圖表標題
Subtitle：圖表副標題
X-Axis：X坐標軸
Y-Axis：Y坐標軸
Legend：圖例
Tooltip：文字提示框不包含在上圖但很常用的：
Series：數據列
圖表中所有的數據都來自數據列，例如上圖「蘋果、芭樂」、「10.00%、7.00%」皆是寫在Series裡
在參數的使用上，網路上有許多整理得還不錯的資源，供製作圖表時參照：
讓 Highchart 更有變化
除了基本的樣式外，我們還能夠藉由調整參數，做出更有趣的圖表，例如把圖標換成太陽的 icon，讓圖表想表達的意思一目瞭然
更改圖標方式說明：
plotOptions > series > marker
在這邊把Symbol換成圖表示建築物高度時，把原本的柱狀圖改成對應的建築物外觀，增添趣味性。
更改柱狀圖樣式方式說明：
在 series 元件裡面把 Data 的Color > Pattern 換成SVG圖比起平面的圖表呈現又多了另一種選擇：用 3D 效果讓圖表更為立體。
3D 圖表方式說明：
設定 3D 相關參數如
chart.type = @"cylinder";
chart.options3d = [[HIOptions3d alloc] init];
chart.options3d.enabled = [[NSNumber alloc] initWithBool:true];
chart.options3d.alpha = @15;
chart.options3d.beta = @15;
chart.options3d.depth = @50;
chart.options3d.viewDistance = @25;結語
很謝謝您的觀看🙏 自己剛接觸 Highcharts 時，花了一些時間熟悉裡面的元件及參數有哪些，所以希望這篇能夠幫助到需要用前端製作圖表的人。藉由此次的整理，也讓我對 Highcharts 加深了解，例如：以前不知道它還能支援到無障礙網頁，或是可以藉由icon跟圖片讓圖表更活靈活現，感謝此次的經驗。
參考資料
謝謝您的閱讀：）
若您如果喜歡我的文章的話，歡迎按下「拍手」給我支持 👏👏👏30個拍手：還滿喜歡這篇文章的
30個以上的拍手：很喜歡這篇文章，或希望能多看到相關類型的分享也歡迎追蹤我的 Medium 或加 LinkedIn(連結請點我）