Highcharts 6 功能模块详解【大数据可视化】

Highcharts 6 新增了很多新的图表类型和功能,新的图表类型一般是以模块的形式发布,所以从 Highcharts 6 开始,其模块的数量巨大,为了方便大家使用,在这里做一个详细的说明

                                                            数目繁多的功能模块

常用功能模块

1、导出模块

导出模块包括三个文件:exporing.js、exporing-offline.js和export-data.js,其功能分别是常规的导出功能离线导出导出 Excel 功能,其中export-data.js是 Highcharts 6 新增, 是从Export-csv这个插件合并过来的,官方的说明是由于导出 Excel 功能太受欢迎,所以将其并入到主项目中。

2、低版本 IE 兼容包

低版本 IE 兼容包是指oldie.js这个文件,是指将兼容低版本 IE (IE8 及以下)的代码单独出来,让用户可以自由的选择是否需要兼容低版本 IE ,可以减少在不需要兼容低版本 IE 场景下引入的文件大小。

推荐用下面的形式引入这个文件,主流浏览器不会加载这个文件

<!--[if lt IE 9 ]>

<script src="https://img.hcharts.cn/highcharts/modules/oldie.js"></script>

<![endif]-->

另外如果在低版本 IE 中没有引入这个文件,Highcharts 会抛出27 号错误

3、性能提升模块

Highcharts 6 中正式是发布了性能提升模块,并将底层的渲染技术替换成 WebGL。

性能提升模块包含两个文件:boost.js和boost-canvas.js,其中boost.js的渲染技术是 WebGL,boost-canvas.js则是 Canvas,方便用户在不同的环境下使用。

兼容性:

boost.js IE 11 及其他主浏览器(支持 WebGL)

boost-canvas.js IE8 + 及其他主流浏览器(支持 Canvas)

4、地图和股票图模块

为了方便 Highcharts、Highstock、Highmaps 进行混合使用,官方提供了map.js和stock.js这两个功能模块,用于和 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 新增的,至于为什么要独立出这两个模块,更多的还是为方便用于在 CommonJS 环境中混合使用三款图表。

5、数据列标签

数据列标签即series-label.js,其功能是智能的在合适的位置放置一个文字标签,用于区分不同的数据列。

                                              智能的数据列标签

官方的说法是用大量的算法计算出最合适的放置标签位置,就像设计师特意放置一样。

数据列标签相关配置请参考API 文档

6、标注功能

标注功能模块对应的文件是annotations.js,这也是 Highcharts 6 新增的功能,详细的配置请参考API 文档

图表类型模块

Highcharts 6 新增了大量的新的图表类型,这些新的图表类型是以模块的形式发布,这里简单的罗列如下:

bullet.js:子弹图

histogram-bellcurve.js:贝尔曲线

parallel-coordinates.js:平行坐标

pareto.js:柏拉图

sankey.js:桑基图

streamgraph.js:流图

sunburst.js:旭日图

tilemap.js:瓦块图

variable-pie.js:可变宽度的环形图

variwide.js:可变宽度的柱形图

vector.js:向量图

windbarb.js:风羽图

wordcloud.js:词云图

xrange.js:简单甘特图

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容