Highcharts 6 功能模塊詳解【大數(shù)據(jù)可視化】

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)單甘特圖

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容