方位:规划主页 > 平面规划教程 > 规划资源 >

在线数据可视化规划东西神器介绍

来历:Chart官网 作者:夜的UE笔记 时刻:2019-09-07 15:26

数据大屏与数据可视化

数据可视化是现在对数据展现最常用的方法。数据的可视化规划有助于将杂乱的数据,用最易了解的方法展现在用户的面前。

数据可视化在中后台的规划中很常见,一般首要用于剖析和决议计划,对实时性要求不高,从一部分功用上讲,其实也有着陈述数据的作用。规划以 2D 平面展现为主,简直不会有 3D 规划呈现,视觉规划更重视简略直接,一望而知。

数据可视化

△ 来历 dribbble 作者wuze

数据大屏在上面的根底上,对实时性要求较高,会更着重数据展现的作用,这也是会盛行 FUI 未来主义科幻风格规划的原因,寻求视觉上的酷炫作用。规划上 2D、3D 皆有,还能够伴随着动效调配一些可交互的规划,来展现数据之间联动。

数据可视化

△ 来历 dribbble 作者William Chen

制造数据大屏的一点小主张

数据大屏的制造可能会包括一些动效交互及3D建模烘托,一般中小型公司一般技能才能有限。假如接到规划制造数据大屏的使命,无妨先和产品技能等一同就表现方法和技能完结等方面做个讨论,不要直接进行规划作业,轻率寻求超燃的特效,防止最终由于无法完结导致无谓的返工。

大厂的可视化服务

1. 百度 Suger

网站链接:https://cloud.baidu.com/product/sugar.html

Sugar 是百度云推出的数据可视化服务渠道,方针是处理报表和大屏的数据可视化问题,解放数据可视化体系的开发人力。

数据可视化

△ 来历Suger官网

上图是官网供给的事例,界面风格是惯例的 FUI 风格。

Sugar 供给了组件修改渠道,进入渠道后规划师能够直接进行组件的拖拽修改,打造自己所需求的大屏界面。在规划师完结后就能够直接交接给开发,进行各类数据源的接入。这种方法无疑节省了许多的开发时刻,规划师也不必再忧虑前端开发的作用与自己的差之千里。关于时刻急迫或许本身技能才能缺乏的项目很合适。

在组件的供给上,Suger 供给了许多的 2D 和 3D 组件,在必定程度上也能够自定义组件。还能够设置数据下钻和图表联动,增强动效交互作用。

数据可视化

△ 来历Suger修改渠道

渠道的修改界面全体来说仍是很便利规划师习惯的,与一般的规划软件界面差不多。上方是一些东西,左边是图层的排布,右侧则是一些组件的特点。规划师能够很快地习惯并运用,没有学习本钱,也不会有太高的操作难度。可是 Suger 在 3D 方面尚有缺乏,个人感觉没有阿里云 DataV、腾讯 RayData 的 3D 作用杰出。

最终一点,Suger 现在处于推行期,推行期间是免费运用的。

2. 阿里云DataV

网站链接:https://data.aliyun.com/visual/datav?spm=a2c4g.11174283.2.1.46b66b79vzB03d

DataV 最著名的一个运用项目应该便是天猫双11的数据大屏了。每一年都冷艳了很多聚集于双11活动的人们。2018 年的双11数据大屏规划更是被称为数据经济时代的全球清明上河图。

 

△2018天猫双11大屏

相同的,DataV 也供给了一个修改渠道,连该渠道本身的界面规划也充满了未来科技感,能够依据模板新建,也能够新建空白页面。根本操作方式与 Suger 相似,规划师先树立画面,后开发进行数据源的接入。修改界面的操作难度也不高,略微了解一下,就能够快速下手。

数据可视化

数据可视化

数据可视化

△ DataV渠道

与 Suger 比较,个人更为喜爱 DataV。DataV 的规划风格与动效交互都会略好一点。一般企业进行数据大屏的规划项目,其意图更趋向于对外展现。DataV 在作用的酷炫程度上会更契合领导的要求。仅仅 DataV 现在分为根底版、企业版和专业版收费服务。个人请求有 30 天的根底版试用期。详细挑选需求看公司本身内部需求而定。

3. 腾讯RayData

网站链接:https://cloud.tencent.com/product/raydata

RayData 是我跟从咱们领导去观赏腾讯在宁波的分公司进行了解。其时展现的项目是深圳的城市大脑。将城市管理集为一体,包括交通、医疗、警务等等。与其在官网展现的内容共同,只不过官网是截图,而其时观赏时是有个小姐姐拿着 ipad 一边交互一边跟咱们解说。交互与数据联动的作用很好,其时咱们领导很喜爱这种作用。

 

△ 才智城市大数据可视化

全体来说,RayData 的数据展现作用也是适当不错的。可是 RayData 现在处于内侧阶段,也没有渠道供给修改功用,当时首要的方式是付费定制。

技能开源库

了解一些技能开源库,一方面能够参照其图表事例,了解各类不同图表的展现方法;另一方面是为了确保自己规划的可完结度,否则再炫酷的规划作用假如由于技能开发才能无法完结也是白费的。

1. Echarts -百度开源可视化库

网站链接:https://echarts.baidu.com/

这是一个运用 JavaScript 完结的开源可视化库,能够流畅地运行在 PC 和移动设备上,兼容当时绝大部分浏览器。4.0 版别还供给了对微信小程序的适配。DataV 中的一些组件也是依靠 Echarts 生成的。

Echarts 供给的图表许多样化,简直包括常用的、不常用的各类图表款式。且供给有可交互组件,能够对数据进行多维度数据筛取、视图缩放、展现细节等交互操作。

数据可视化

△ 来历Echarts实例

2. Mapv – 百度地理信息可视化开源库

网站链接:https://mapv.baidu.com/

用以展现很多地理信息点、线、面的数据。创立需先上传地理信息数据,再设置地图款式后,即可下载保存。现在仅敞开 Beta 版别。

数据可视化

△ 来历Mapv官网

3. 蚂蚁AntV

网站链接:https://antv.alipay.com/zh-cn/index.html

蚂蚁金服的 Ant Design,作为规划师应该都是较为了解的。AntV 是蚂蚁 Ant 系列下的一个数据可视化处理计划。分为 G2、G6、F2、L7 不同产品,别离对应不同的特性需求。

数据可视化

△ 来历AntV官网

4. D3.js – 数据驱动的文档

网站链接:https://d3js.org/

D3js 是一个依据数据来操作文档的 JavaScript 库,合适用来制造各类可视化图表。支撑大型数据集和交互与动画的动态行为。

数据可视化

△ 来历D3js官网

5. billboard.js – 简易界面的可交互图表库

网站链接:https://naver.github.io/billboard.js/

这是一个依据 D3 V4+ 的 JavaScript 的图表库。能够对数据进行视图缩放、展现细节等交互操作。

数据可视化

△ 来历billboard官网

6. FusionCharts

网站链接:https://www.fusioncharts.com/

FusionCharts 供给了 100 多个交互式图表和 2000 多个数据驱动的地图,对不同渠道都可兼容。一起供给了前端和后端各类结构及代码言语的插件,来便利开发快速入门。不过这款是收费的,依据不同的运用环境定价不同。

数据可视化

△ 来历FusionCharts官网

规划辅助东西

1. Kitchen – 蚂蚁金服官方插件

网站链接:http://kitchen.alipay.com/

这是一个 sketch 的插件东西。首要功用如下图:

数据可视化

△ 来历Kitchen官网

Iconfont 图标库我比较常用,能够直接在 sketch 中查找拖拽,不必再去翻开网页查找了。其次数据填充也比较常用,主动填充时刻、地址、城市等挺便利的。sketch 也有自带的功用,但毕竟自带的填充都是英文,想要中文的需求自己编写填充文档,相对仍是比较费事。其他是像智能排版、色板等功用,我用的不多,仍是以 sketch 自带功用为主。

别的,与可视化规划相关的便是里边的图表生成器了。不过 Kitchen 当时只要一些惯例的图表,不过胜在简洁明了,很合适在此根底上进行二次规划。该插件仍是蚂蚁 Ant 系列的官方插件,能够主动装备契合 Ant Design 规范的组件,合作公司选用的 Ant 系列的结构,会便利不少。

数据可视化

△ 来历Kitchen插件界面

2. FusionCool – 阿里Fusion Design开源中后台UI处理计划辅助东西

网站链接:https://fusion.design/tool

这也是一个 sketch 的插件东西。分为图标、图表、组件、模块和模板五大功用区。

Fusion Design 作为一个开源中后台处理计划,和 Ant Design 有必定相似,但也有所不同。Ant Design 是一套组件库,Fusion Design 更像是一个组件库生成工厂。

直接下载装置 FusionCool 的话,翻开 sketch 看到的将是一个默许组件库,图表部分的品种款式比 Kitchen 多了不少。而更凶猛的是,你能够在 Fusion Design 上,依据官方库修改改形成归于你自己的规划体系,发布主题后取得新的主题包,此刻你在 FusionCool 中就能够看到专归于你的主题包了,在sketch中完结规划后,开发运用 Iceworks 装置你的主题库就能够直接编码完结你的规划。

数据可视化

△ 来历FusionCool插件界面

3. Map Generator – 快速地图生成填充

网站链接:https://github.com/eddiesigner/sketch-map-generator

这是一款依据谷歌地图的主动填充的 Sketch 插件,输入地址后就能够主动生成不同风格款式的地图,个人比较喜爱第三款灰色的。

数据可视化

△图为Map Gnerator生成作用

4. Amcharts – 矢量地图定制下载

网站链接:http://pixelmap.amcharts.com/#

这个网站上面提过,但其实规划师用来获取矢量地图也很好用,挑选地图款式和区域之后,右下方即能够下载 SVG、HTML、Image 格局的图,非常便利。点击「Generate Ppxel Map」还能够转化为像素圆点方法的地图。

假如需求省份的地图,网站上无法直接下载,但能够先下载我国 svg 地图,然后再翻开 svg 挑选自己需求的省份模块即可。

别的,在运用地图的时分,要注意正确用图,规范用图。要有国家地图认识,契合测绘法。

规范地图能够参阅国家自然资源局供给的规范地图服务,服务网址:http://bzdt.ch.mnr.gov.cn/index.html

5. Chart – 图表插件

网站链接:https://github.com/pavelkuligin/chart

这个插件是收费的,每年10美元。优势在于能够在 Sketch 中创立包括随机、表格或许 JSON 数据的图表。图表款式也是非常丰富了。

数据可视化

△ 来历Chart官网