前端圖表製作——HighCharts圖表入門
HighCharts圖表入門
HighCharts的作用
在JavaEE企業級專案開發中，很多專案都會用到資料的統計和圖表的展示功能，如：各種股票系統，銀行的資金結算，公司的財務報表，等等。如何快速高效的開發這些圖表是一件麻煩的事。
HighCharts可以非常方便的實現這個功能
HighCharts是非常棒的一個jQuery外掛，和大多數的瀏覽器都相容。支援很多型別的圖表。並且是動態的外掛，你可以輕鬆在建立圖表後新增，刪除，修改數列，軸或者點，並且可以從外部載入檔案資料，同時支援提示條，甚至還支援縮放和翻轉。
HighCharts的優勢
Highcharts 是一個用純 JavaScript 編寫的一個 HTML5 圖表庫， 能夠很簡單便捷的在 Web 網站或是 Web 應用程式新增有互動性的圖表，無需任何外掛，全部原始碼開放， 個人及非商業用途可以任意使用及原始碼編輯。
Highcharts 支援的圖表型別有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表，其中很多圖表可以整合在同一個圖形中形成混合圖。
下載 Highcharts
Highcharts目錄
引入 Highcharts
Highcharts 最基本的執行只需要一個 JS 檔案，即 highcharts.js， 將上面的壓縮包解壓，從code資料夾下可以找到，複製到自己專案中的js資料夾。對應的程式碼是：
<script src="js/highcharts.js"></script>
建立一個簡單的圖表
在繪圖前我們需要為 Highcharts 準備一個 DOM 容器，並指定其大小
<div id="container" style="width: 600px;height:400px;"></div>
然後通過 Highcharts 的初始化函式 Highcharts.chart 來建立圖表，該函式接受兩個引數，第一個引數是 容器的 Id，第二個引數是圖表配置，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 Highcharts 圖表</title>
<!-- 引入 highcharts.js --> 這樣你的第一個圖表就完成了
HighCharts基礎教程
圖表主要組成
一般情況下，Highcharts 包含標題（Title）、座標軸（Axis）、資料列（Series）、資料提示框（Tooltip）、圖例（Legend）、版權標籤（Credits）等，另外還可以包括匯出功能按鈕（Exporting）等。
1. 標題（Title）
圖表標題，包含標題和副標題（subTitle），其中副標題不是必須的。
2. 座標軸（Axis）
座標軸包含x軸（xAxis）和y軸（yAxis）。通常情況下，x軸顯示在圖表的底部，y軸顯示在圖表的左側。多個數據列可以共同使用同一個座標軸，為了對比或區分資料，Highcharts提供了多軸的支援。
3. 資料列（Series）
資料列即圖表上一個或多個數據系列，比如曲線圖中的一條曲線，柱狀圖中的一個柱形。
4. 資料提示框（Tooltip）
當滑鼠懸停在某點上時，以框的形式提示該點的資料，比如該點的值、資料單位等。資料提示框內提示的資訊可以通過格式化函式動態指定。
5. 圖例（Legend）
圖例是圖表中用不同形狀、顏色、文字等 標示不同資料列，通過點選標示可以顯示或隱藏該資料列。
6. 版權標籤（Credits）
顯示在圖表右下方的包含連結的文字，預設是Highcharts官網地址。通過指定credits.enabled=false即可不顯示該資訊。
7. 匯出功能（Exporting）
通過引入 exporting.js即可增加圖表匯出為常見檔案功能。
圖表配置
圖表容器
Highcharts 例項化中繫結容器的方式有很多種方式
1、通過建構函式
var charts = Highcharts.chart('container', {
// Highcharts 配置
chart: {
type: 'column'//圖表型別
events: {
load: requestData // 圖表載入完畢後執行的回撥函式(有時候載入不出來是因為函式還沒執行完就開始載入空資料)
//不寫這個要把回撥函式這部分寫在圖表初始化之前
}
});
2、如果你的頁面已經引入了 jQuery，那麼還可以 jQuery 外掛的形式呼叫
$("#container").highcharts({
// Highcharts 配置
chart: {
type: 'column'//圖表型別
events: {
load: requestData // 圖表載入完畢後執行的回撥函式(有時候載入不出來是因為函式還沒執行完就開始載入空資料)
//不寫這個要把回撥函式這部分寫在圖表初始化之前
}
});
圖表樣式
寬度、高度
Highcharts 圖表的高度和寬度是根據 DIV 容器的寬高來設定的，即
<div id="container" style="width:400px;height:400px"></div>
標題
標題預設顯示在圖表的頂部，包括標題和副標題（subTitle），其中副標題是非必須的。設定標題和副標題的示例程式碼如下：
title: {
text: '我是標題'
},
subtitle: {
text: '我是副標題'
}
座標軸
普通的二維資料圖都有X軸和Y軸，預設情況下，x軸顯示在圖表的底部，y軸顯示在左側（多個y軸時可以是顯示在左右兩側）
座標軸組成部分
座標軸標題
座標軸標題。預設情況下，x軸為null（也就是沒有title），y軸為'Value'，設定座標軸標題的程式碼如下：
xAxis:{
title:{
text:'x軸標題',
categories:['1','2','3','4']
//還可以設定格式化值
}
}
yAxis:{
title:{
text:'y軸標題'
}
}
座標軸刻度標籤
座標軸標籤（分類）。Labels常用屬性有enabled、formatter、step、staggerLines
1）enabled
是否啟用Labels。x，y軸預設值都是true，如果想禁用（或不顯示）Labels，設定該屬性為false即可。
2）Formatter
標籤格式化函式。預設實現是：
formatter:function(){
return this.value;
}
this.value程式碼座標軸上當前點的值（也就是x軸當前點的x值，y軸上當前點的y值）
3）Step
Labels顯示間隔，資料型別為number（或int）
資料列
什麼是資料列
資料列是一組資料集合，例如一條線，一組柱形等。圖表中所有點的資料都來自資料列物件，資料列的基本構造是：
series : [{
name : '',
data : []
}]
提示：資料列配置是個陣列，也就是資料配置可以包含多個數據列。一個name和data表示一組資料列
資料列中的 name 代表資料列的名字，並且會顯示在資料提示框（Tooltip）及圖例（Legend）中。
資料列中的資料
在資料列的 data 屬性中，我們可以定義圖表的資料陣列，定義方式：
- 數值陣列。在這種情況下，配置陣列中的數值代表 Y 值，X 值則根據 X 軸的配置，要麼自動計算，要麼從 0 起自增；在分類軸中， X 值就是
categoies配置，數值陣列配置例項如下：
data : [1, 4, 6, 9, 10]
- 包含兩個值的陣列集合。在這種情況下，集合中陣列的第一個值代表 X， 第二個值代表 Y；如果第一個值是字串，則代表該點的名字，並且 X 值會如 1 中所說的情況決定。陣列集合的例項：
data ： [ [5, 2], [6,3], [8,2] ]
圖表型別
Highcharts 支援多種圖表型別，可以針對不同的資料都用合理的圖表型別來展現。
Highcharts 目前支援直線圖、曲線圖、曲線面積圖、面積圖、面積範圍圖、柱狀圖、條形圖、餅圖、散點圖、氣泡圖、儀表圖等豐富的圖表型別。
圖表型別配置
在 Highcharts 中，可以通過 chart.type 來設定所有預設的圖表型別
chart: {
type: 'spline'
}
示例：柱狀圖的製作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script>
var chart = Highcharts.chart('container',{
chart: {
type: 'column'//圖表型別
events: {
load: requestData // 圖表載入完畢後執行的回撥函式(有時候載入不出來是因為函式還沒執行完就開始載入空資料)
//不寫這個要把回撥函式這部分寫在圖表初始化之前
}
},
title: {
text: '月平均降雨量'
},
subtitle: {
text: '資料來源: WorldClimate.com'
},
xAxis: {
categories: [//分類
'一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
],
crosshair: true//配置跟隨滑鼠或滑鼠滑過點時的十字準星線
},
yAxis: {
min: 0,
title: {
text: '降雨量 (mm)'
}
},/*資料提示框指的當滑鼠懸停在某點上時，以框的形式提示該點的資料，比如該點的值，資料單位等。資料提示框內提示的資訊完全可以通過格式化函式動態指定；通過設定 tooltip.enabled = false 即可不啟用提示框。
教程地址：https://www.hcharts.cn/docs/basic-tooltip*/
tooltip: {
// head + 每個 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
/*
資料列配置是針對所有資料列及某種資料列有效的通用配置。
資料列的配置有三個級別：
配置在 plotOptions.series，針對所有圖表型別有效
配置在 plotOptions.<資料列型別>，針對某種資料列有效
配置在 series，針對某個資料列有效
上述三個級別的配置精準度越來越高，也就是越精準的配置會覆蓋前面的配置
*/
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '東京',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: '紐約',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: '倫敦',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: '柏林',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
</script>
</body>
</html>
示例：餅型圖的製作
案例要求：
製作瀏覽器的市場佔有比例，使用餅型圖來完成。
案例效果：
案例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入 highcharts.js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'pie' //圖表型別
},
title: {
text: '2018 大學生就業情況調查表' //設定主標題
},
series: [{
name: '就業量佔比', //資料名字
data: [
['研究生', 38.2],
['民營企業', 26.8],
['國有企業', 12.8],
['公務員', 8.5],
['自主創業', 6.2],
['其他', 0.7]
]
}]
});
});
</script>
</body>
</html>