1分鐘上手Highchart:前端視覺化圖表工具

Image for post
Image for post

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 的初始化函數 來創建圖表,該函數接受兩個參數,第一個參數是 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>

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store