1分鐘上手Highchart：前端視覺化圖表工具
3 min readJun 15, 2019
Highcharts系列介紹
含 Highcharts JS，Highstock JS，Highmaps JS
Highcharts 支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表，其中很多圖表可以集成在同一個圖形中形成混合圖。Highstock 是用純 JavaScript 編寫的股票圖表控件，可以開發股票走勢或大數據量的時間軸圖表。它包含多個高級導航組件：預設置數據時間範圍，日期選擇器、滾動條、平移、縮放功能。Highmaps
繼承了 Highcharts 簡單易用的特性，利用它可以方便快捷的創建用於展現銷售、選舉結果等其他與地理位置關係密切的交互性地圖圖表。
引入 Highcharts
<script src="https://code.highcharts.com/highcharts.js"></script>創建圖表
在繪圖前我們需要為 Highcharts 準備一個 DOM 容器，並指定其大小
<div id="container" style="width: 600px;height:400px;"></div>通過 Highcharts 的初始化函數 Highcharts.chart 來創建圖表，該函數接受兩個參數，第一個參數是 DOM 容器的 Id，第二個參數是圖表配置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 Highcharts 圖表</title>
</head>
<body>
<!-- 圖表容器 DOM -->
<div id="container" style="width: 100%;height:800px;"></div>
<!-- 引入 highcharts.js -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
// 圖表配置
var options = {
chart: {
type: 'bar' //指定圖表的類型，默認是折線圖（line）
},
title: {
text: '我的第一個圖表' // 標題
},
xAxis: {
categories: ['蘋果', '香蕉', '橙子'] // x 軸分類
},
yAxis: {
title: {
text: '吃水果個數' // y 軸標題
}
},
series: [{ //數據列
name: '小明', //數據名
data: [3, 0, 4] //數值
}, {
name: '小紅',
data: [5, 7, 3]
}]
};
// 圖表初始化函數
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>