发布时间:2016-10-10 22:48:08

经过一年多的开发和测试,我们很高兴的宣布 Highcharts 5 发布啦,一同发布的还有 Highstock 5.0.0 及 Highmaps 5.0.0。

Highcharts 5

此次的版本更新包含了非常多的功能升级,包含了社区活跃开发者的意见及技术的升级需要,例如无障碍设计、对 ES6 的支持等,我们会尽最大的努力,保持行业领先的水平,继续完善我们的产品。

此次升级重要的功能包括全新的样式完全分离(可以完全用 CSS 控制图表样式)、更加高级的响应式设计、全部属性的动态更新、全 Node 构建系统及 Highstock、Highmaps 的一些功能升级。

Highcharts 5 重要的功能升级

CSS 控制图表样式

我们重构了软件结构,从 5.0 起,用户可以选择旧的样式控制(JavaScript 配置)或完全用 CSS 来控制图表样式。

在 CSS 模式的情况下,我们将图表的样式和 SVG 完全分离,这使得在企业应用开发过程中,开发团队可以互相配合来完成 Highcharts 图表开发和设计,开发人员处理图表的配置及函数,然后将图表的样式交给设计师用 CSS 来完成。

关于 CSS 模式的详情见 我们的文档博文

响应式图表

在 5.0 之前,Highcharts 图表默认就是支持响应式,在不同的页面大小上进行缩放,但这种响应式只是很小粒度上的响应式,有的时候并不能达到更加个性化的需求。

我们基于之前的设计,推出了类似响应式网页(参考 Bootstrap 栅格系统)的方案,新增了顶级的配置 responsive,设置按照图表大小配置响应规则,例如不同大小情况下图例位置、坐标轴间隔等,下面是典型应用的一些实例:

无障碍设计

在过去的几年时间里,我们一直在调研和开发支持无障碍设计的图表,Elsevier 是世界领先的科学、技术和医疗信息产品的供应商,是目前我们在该领域的重要合作伙伴之一。我们的成果是给视力障碍、键盘用户提供一个全新的、屏幕阅读器友好的无障碍功能模块。 该功能模块遵循最新的 W3C WCAGSection 508 规范,当然我们提供的功能远远超出这些基本要求。

下面我们提供了一些实例:(支持 TAB 键 及方向键控制)

更多详情见 我们的文档

全部配置都支持动态更新

另外一个重要的升级是提供通用的 Chart.update 函数。在 5.0 之前,我们提供了一些更新操作函数,例如 Series.update、Axis.update、Point.update 等,但对于图例、数据提示框等其他配置的更新则没有很好的动态更新方法(除非是销毁图表对象然后更新配置重绘)。

Chart.update 支持全部的配置动态更新,使得图表更加交互性。

下面是实例:

基于 Node 及 ES6 的模块系统

这些升级我们延续了 4.1 及 4.2 未完成的工作,支持 CommonJS 模块规范及 Npm 包管理,同时我们去掉了适配器支持(也就是不需要任何适配器)。我们将所有模块文件全部转换成 ES6 模块格式,这也同时开启了支持基于 Node 的自动以打包系统。同时我们创建了一个 Node.js 的打包脚本应用,这将会是我们官方的自定义下载服务。

更多详情见 我们的文档

Highstock 支持导航器多数据列

Highstock 导航器(Navigator)支持多数据列一直是热门的需求,Highstock 5 现在就支持了。现在你可以通过 series.showInNavigator 参数来控制数据列是否显示在导航器中,另外可以通过 series.navigatorOptions 来指定每个数据列的导航器配置。

在线试一试

简化 Highmaps 配置

接下来的介绍是关于 Highmaps 的更加直观的配置及更智能的默认配置及更高整合度的 地图数据集,这些配置使得利用 Highmaps 创建地图更加简单。

Highmaps 5 提供了 chart.map 参数用于针对所有数据列设置基础地图数据(mapData),另外我们支持自定义数据的元组,即地图数据的 hc-key 属性,也是默认地图的第一个元素。