|
|
|
|
移动端

这两个工具能帮你实现酷炫的数据可视化

如此高端大气酷炫的数据可视化是如何实现的?秘诀在于两个工具,都是开源项目,下载代码即可使用,完全免费!

作者:TalkingData来源:头条科技|2018-03-21 12:13

开发者盛宴来袭!7月28日51CTO首届开发者大赛决赛带来技术创新分享

你想到的数据可视化,通常可能是这样的:

两个工具帮你实现酷炫的数据可视化

但我们能实现的数据可视化,不仅是上面那样的,还可以是这样的:

两个工具帮你实现酷炫的数据可视化

这样的:

两个工具帮你实现酷炫的数据可视化

以及这样的:

两个工具帮你实现酷炫的数据可视化

如此高端大气酷炫的数据可视化是如何实现的?

秘诀在于两个工具——inMap & iView

(都是开源项目,下载代码即可使用,完全免费!)

inMap

两个工具帮你实现酷炫的数据可视化

inMap是TalkingData可视化团队开源的一款基于 Canvas 的大数据可视化库,专注于大数据方向的散点、热力图、网格、聚合等方式展示,致力于让大数据可视化变得简单易用。

它具有以下特性:

  • 高性能

  • 多线程

  • 多图层叠加

  • 友好的 AP

  • 可以自定义主题

inMap 采用更加智能的地理可视化框架,主要面向从事数据可视化应用相关的工程师和设计师。

底层绘图引擎:目前基于 canvas 2d 提供基础绘图能力,基于 WebGL 的版本正在规划中;

算法:内置了经纬度墨卡托转换、文字避让算法、最佳标记点算法、自动分组标记配色算法等。

inMap 的每个算法都是为了增强用户体验,追求极致效果,打造伟大的产品。

inMap 的接口设计非常友好,希望让开发者通过简单的配置,就能快速构建出优美的可视化效果。

官网:http://inmap.talkingdata.com

GitHub:https://github.com/TalkingData/inmap

iView

两个工具帮你实现酷炫的数据可视化

iView 是TalkingData可视化团队开源的一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品。

它具有以下特性:

  • 高质量、功能丰富

  • 友好的 API ,自由灵活地使用空间,面向任何技术水平的开发者

  • 细致、漂亮的 UI

  • 事无巨细的文档

  • 可自定义主题

同时 iView 也是一整套的前端解决方案,包括了设计规范、多语言(目前 iView 支持 15 国语言)、自定义主题、服务端渲染。

iView 支持 Vue.js 2.x、Vue.js 1.x、服务端渲染、Nuxt.js、Electron等。

iView 目前在 GitHub 上有 13,000 多 star,从 star 数量、口碑和功能性、UI / UE上,iView 都排在全球同类产品的 Top3。

官网:https://www.iviewui.com

GitHub:https://github.com/iView/iView

iView 新版本发布

在过去的两个多月里,iView 陆续发布了 2.9.0 和 2.10.0 两个重要版本。这两个版本总共有 255 个 commit,超过 40 项更新。来看一下,iView 具体有哪些更新:

一、日期组件 DatePicker 的重构

首先是在 2.10.0 对日期组件 DatePicker 的重构。DatePicker 是 iView 48 个组件里最复杂的组件之一。复杂的功能使得代码逻辑非常重,在许多新特性的支持上,比如兼容不同国家的日历规范等都很难在此基础上迭代,不得不推倒重来。

SergioCrisostomo 之前有开发过日期相关的 JS 库(https://github.com/SergioCrisostomo/js-calendar),所以对日期相关的功能点和 API 非常熟,iView 也是基于此库进行的重构。

新的日期组件主要增加了以下功能:

1. 范围选择支持从右往左选择。

之前在范围选择时,必须先选起点,再选终点,也就是从左往右选,但很多用户的习惯却刚好相反。该版本则同时支持两个方向的选择。

2. 新增 split-panels 属性,开启后,左右两面板可以不联动。

之前在范围选择时,左右两个面板是联动的,也就是右边永远比左边大一个月,任何一个面板切换月份或年份,另一个面板都会自动切换。该版本则可以设置为不联动,这样方便定位起始月份和结束月份。如图所示:

两个工具帮你实现酷炫的数据可视化

3. 新增 multiple 属性,开启后,可以选择多个日期。

虽然之前版本可以用其它 iView 组件组合出来一个多选的日期,但效果和交互多少会打折扣,该版本只要增加属性 multiple,就可以在一个日期面板上同时选择和呈现多个日期了。如图所示:

两个工具帮你实现酷炫的数据可视化

4. 新增属性 show-week-numbers,开启后,可以显示星期数。

增加这个属性,就可以在日历面板上显示当前是一年的第几周。如图所示:

两个工具帮你实现酷炫的数据可视化

还有其它很多项的更新,比如新增 start-date 属性,可以设置面板展开时默认显示的日期。新增属性 time-picker-options,可以在 type 为 datetime 和 datetimerange 下,配置 TimePicker 的属性,比如时间间隔 steps。完整的更新可以产看更新日志,这里不一一列举了。

二、键盘可访问性的支持

键盘的可访问性,主要是通过键盘的方向键、tab键、空格键等完成表单组件的切换和交互。在填写一个表单时(iView Form 组件),尤其有用,你可以离开鼠标,就完成一个复杂表单的填写与提交。

目前 iView 最新版本支持键盘可访问性的组件有:

Button、Input、Radio、Checkbox、Switch、AutoComplete、Slider、InputNumber。更多组件还在陆续支持中。

事实上,原生的表单控件,浏览器都是支持键盘的可访问性的,比如 <button>、<input type="radio"> 等等。iView 对这些原生控件进行了重塑,不仅仅使得 UI 好看和统一,更重要的是功能的丰富和交互体验的提升。

目前上述的组件,都是可以通过键盘的 tab键 选中的,这是第一步,如图所示:

两个工具帮你实现酷炫的数据可视化

可以看到,组件在被选中时,外面多了一个高亮层,表明当前选中的控件,这时就可以通过键盘其它按键继续操作了,比如单选组件 Radio,在选中状态下,可以通过键盘的方向键直接切换选项;Checkbox 在被激活时,可以通过空格键选择和取消选择某小项,通过 tab 键激活下一个小项。

三、其他更新

还有一些更新,是无法直接看见和体会到的。

比如更新了大量的依赖:

  • babel 系列全部更新

  • 使用了 browserslist

  • 使用了 sourcemap

部分组件的重构,虽然功能无任何变化,但代码结构和逻辑都做了优化和可维护性设计。

还有部分组件的自动化测试、持续集成对 GitHub travis-ci 的兼容等等。

外表需要优化,内部同样也是,就像一个人,既要有外在美,也要有内在美。

这两个版本都需要感谢两位瑞典大神 SergioCrisostomo 和 Xotic750 的贡献,iView 才得以越来越完善。

完整的更新日志可以到 GitHub releases 查看:

2.9.0: https://github.com/iview/iview/releases/tag/v2.9.0

2.10.0: https://github.com/iview/iview/releases/tag/v2.10.0

两个工具帮你实现酷炫的数据可视化

数据可视化可以很简约,但也可以很酷炫,别让工具限制了你的想象力!

【编辑推荐】

  1. 开发者在 GitHub fork 的私有项目,现在却无法访问了……
  2. 开发者噩梦:欧盟希望过滤上传到互联网的所有代码
  3. 开发者避坑指南:2018 年最不值得学习的五门编程语言
  4. 2018年程序员开发环境工具排名出炉,Vim排名第5,Eclipse第8!
  5. 程序员的困扰:如何在不影响产品质量的情况下,加速开发进程?
【责任编辑:张燕妮 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月最赞

读 书 +更多

网络工程师必读——网络系统设计

本书是一本真正意义上的网络系统设计图书,从网络系统设计角度全面介绍了整个网络系统设计的思路和方法,而不是像传统网络集成类图书那样主...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊