Highcharts 6 新增了很多新的圖表類型和功能,新的圖表類型一般是以模塊的形式發(fā)布,所以從 Highcharts 6 開(kāi)始,其模塊的數(shù)量巨大,為了方便大家使用,在這里做一個(gè)詳細(xì)的說(shuō)明

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 數(shù)目繁多的功能模塊
常用功能模塊
1、導(dǎo)出模塊
導(dǎo)出模塊包括三個(gè)文件:exporing.js、exporing-offline.js和export-data.js,其功能分別是常規(guī)的導(dǎo)出功能,離線導(dǎo)出和導(dǎo)出 Excel 功能,其中export-data.js是 Highcharts 6 新增, 是從Export-csv這個(gè)插件合并過(guò)來(lái)的,官方的說(shuō)明是由于導(dǎo)出 Excel 功能太受歡迎,所以將其并入到主項(xiàng)目中。
2、低版本 IE 兼容包
低版本 IE 兼容包是指oldie.js這個(gè)文件,是指將兼容低版本 IE (IE8 及以下)的代碼單獨(dú)出來(lái),讓用戶可以自由的選擇是否需要兼容低版本 IE ,可以減少在不需要兼容低版本 IE 場(chǎng)景下引入的文件大小。
推薦用下面的形式引入這個(gè)文件,主流瀏覽器不會(huì)加載這個(gè)文件
<!--[if lt IE 9 ]>
<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>
<![endif]-->
另外如果在低版本 IE 中沒(méi)有引入這個(gè)文件,Highcharts 會(huì)拋出27 號(hào)錯(cuò)誤。
3、性能提升模塊
Highcharts 6 中正式是發(fā)布了性能提升模塊,并將底層的渲染技術(shù)替換成 WebGL。
性能提升模塊包含兩個(gè)文件:boost.js和boost-canvas.js,其中boost.js的渲染技術(shù)是 WebGL,boost-canvas.js則是 Canvas,方便用戶在不同的環(huán)境下使用。
兼容性:
boost.js IE 11 及其他主瀏覽器(支持 WebGL)
boost-canvas.js IE8 + 及其他主流瀏覽器(支持 Canvas)
4、地圖和股票圖模塊
為了方便 Highcharts、Highstock、Highmaps 進(jìn)行混合使用,官方提供了map.js和stock.js這兩個(gè)功能模塊,用于和 highcharts.js 搭配一起使用
<script src="https//img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/stock.js"></script>
<script src="https://img.hcharts.cn/highcharts.modules/map.js"></script>
PS:stock.js 是 Highcharts 6 新增的,至于為什么要獨(dú)立出這兩個(gè)模塊,更多的還是為方便用于在 CommonJS 環(huán)境中混合使用三款圖表。
5、數(shù)據(jù)列標(biāo)簽
數(shù)據(jù)列標(biāo)簽即series-label.js,其功能是智能的在合適的位置放置一個(gè)文字標(biāo)簽,用于區(qū)分不同的數(shù)據(jù)列。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 智能的數(shù)據(jù)列標(biāo)簽
官方的說(shuō)法是用大量的算法計(jì)算出最合適的放置標(biāo)簽位置,就像設(shè)計(jì)師特意放置一樣。
數(shù)據(jù)列標(biāo)簽相關(guān)配置請(qǐng)參考API 文檔
6、標(biāo)注功能
標(biāo)注功能模塊對(duì)應(yīng)的文件是annotations.js,這也是 Highcharts 6 新增的功能,詳細(xì)的配置請(qǐng)參考API 文檔
圖表類型模塊
Highcharts 6 新增了大量的新的圖表類型,這些新的圖表類型是以模塊的形式發(fā)布,這里簡(jiǎn)單的羅列如下:
bullet.js:子彈圖
histogram-bellcurve.js:貝爾曲線
parallel-coordinates.js:平行坐標(biāo)
pareto.js:柏拉圖
sankey.js:桑基圖
streamgraph.js:流圖
sunburst.js:旭日?qǐng)D
tilemap.js:瓦塊圖
variable-pie.js:可變寬度的環(huán)形圖
variwide.js:可變寬度的柱形圖
vector.js:向量圖
windbarb.js:風(fēng)羽圖
wordcloud.js:詞云圖
xrange.js:簡(jiǎn)單甘特圖