前端圖表製作——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 -->
<script src="js/highcharts.js"></script>
</head>
<body>
<!-- 圖表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 圖表配置
var options = {
chart: {
type: 'bar' //指定圖表的型別,預設是折線圖(line)
},
title: {
text: '我的第一個圖表' // 標題
},
xAxis: {
categories: ['QQ', '支付寶', 'bilibili', '百度雲盤', '百詞斬'] // x 軸分類
},
yAxis: {
title: {
text: '每天使用該軟體的次數' // y 軸標題
}
},
series: [{ // 資料列
name: '張三', // 資料列名
data: [10, 3, 4, 6, 7] // 資料
}, {
name: '李四',
data: [5, 7, 10, 8, 1]
}]
};//這個要寫在圖表初始化之前,尤其是在使用回撥函式之前
// 圖表初始化函式
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
這樣你的第一個圖表就完成了
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>