数据可视化大屏选型调研报告

1 需求背景分析

数据可视化要根据数据的特性,可视化要根据数据的特性,如时间信息和空间信息等,找到合适的可视化方式,例如图表(Chart)、图(Diagram)和地图(Map)等,将数据直观地展现出来,以帮助人们理解数据,同时找出包含在海量数据中的规律或者信息。数据可视化是大数据生命周期管理的最后一步,也是最重要的一步。

数据可视化起源于图形学、计算机图形学、人工智能、科学可视化以及用户界面等领域的相互促进和发展,是当前计算机科学的一个重要研究方向,它利用计算机对抽象信息进行直观的表示,以利于快速检索信息和增强认知能力。 数据可视化系统并不是为了展示用户的已知的数据之间的规律,而是为了帮助用户通过认知数据,有新的发现,发现这些数据所反映的实质。

大数据时代,大规模、高纬度、非结构化数据层出不穷,要将这样的数据以可视化形式完美的展示出来, 传统的显示技术已很难满足这样的需求。而高分高清大屏幕拼接可视化技术,也就是大屏技术正是为解决这一问题而发展起来的, 它具有超大画面、纯真彩色、高亮度、高分辨率等显示优势, 结合数据实时渲染技术、GIS空间数据可视化技术,实现数据实时图形可视化、场景化以及实时交互,让使用者更加方便地进行数据的理解和空间知识的呈现,可应用于指挥监控、视景仿真及三维交互等众多领域。

2 框架介绍与对比分析

目前业界用的比较多的两款开源图表框架是 ECharts与 Highcharts。下面分别对其进行介绍。

2.1 Echarts

ECharts,是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。

特性如下:

  1. 丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,此外还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

  1. 多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,通过简单的设置 encode 属性就可以完成从数据到图形的映射,这种方式更符合可视化的直觉,省去了大部分场景下数据转换的步骤,而且多个组件能够共享一份数据而不用克隆。 为了配合大数据量的展现,ECharts 还支持输入 TypedArray 格式的数据,TypedArray 在大数据量的存储中可以占用更少的内存,对 GC 友好等特性也可以大幅度提升可视化应用的性能。

TypedArray是一种通用的固定长度缓冲区类型,允许读取缓冲区中的二进制数据。

  1. 千万数据的前端展现

通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量,并且在这个数据量级依然能够进行流畅的缩放平移等交互。

  1. 移动端优化

ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。

  1. 多渲染方案

ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。VML 可以兼容低版本 IE,SVG 使得移动端不再为内存担忧,Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择,使得 ECharts 在各种场景下都有更好的表现。

  1. 支持多维数据

除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的。配合视觉映射组件 visualMap 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。

  1. 动态数据

ECharts 由数据驱动,数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

  1. 绚丽的特效

ECharts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。

  1. 三维可视化

ECharts 提供了基于 WebGL 的 ECharts GL,我们可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球,建筑群,人口分布的柱状图。

2.2 Highcharts

Highcharts是使用纯 JavaScript 实现的交互性图表框架,号称在全球百强企业中,有72家企业(比如 facebook、twitter、华为、京东、阿里云等)使用了这套框架。

Highcharts 还包含一款名为Highmaps 的HTML5 地图组件,支持下钻,触摸、手势操作,利用它可以方便快捷地创建用于展示销售、选举结果等其他与地理位置关系密切的交互地图图表。Highmaps 可以单独使用也可以作为 Highcharts 的一个组件来使用。

Highcharts 包含以下特性:

  1. 丰富的可视化类型

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。Highstock 则提供股票走势图(K线、分时)、高级时间轴图,Highmaps 提供各种丰富多样的地图。

  1. 兼容性

Highcharts 可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本,在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能,因而可以提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。

  1. 非商业使用免费

在个人网站、学校网站及非盈利机构中可以直接使用 Highcharts。

商业用途的项目、政府项目(项目包括网站、内部应用或其他项目)都需要购买授权。https://highcharts.com.cn/highcharts

  1. 开源

Highcharts 最重要的特点之一就是:无论免费版还是付费版,都可以下载源码并可以对其进行编辑。

  1. 纯 JavaScript

Highcharts 完全基于 HTML5 技术,只需要两个 JS 文件即可运行。

  1. 简单的配置语法

在 Highcharts 中设置配置选项不需要任何高级的编程技术,所有的配置都是 JSON 对象,只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写,同时也易于机器解析和生成的特点。

  1. 动态交互性

Highcharts 支持丰富交互性,在图表创建完毕后,可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。 结合 jQuery 的 ajax 功能,可以做到实时刷新数据、用户手动修改数据等功能,结合事件处理,可以做到各种交互功能。

  1. 支持多坐标轴

多个数据进行对比这是非常常见的需求,Highcharts 可以让我们为每个类型的数据添加坐标轴,每个轴可以定义放置的位置,所有的设置都可以独立生效,包括旋转、样式设计和定位,当然也支持多个数据共用一个坐标轴。

  1. 数据提示框

当鼠标划过图形时,Highcharts 可以将数据点或数据列的信息展示在提示框中,并且提示框会跟随用户的鼠标;而且可以智能的显示离鼠标最近的点或被遮盖点的信息。

  1. 时间轴

75% 的直角坐标系(包含 X轴 和 Y轴)图表中是时间轴图表,因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。

  1. 导出和打印

Highcharts 支持导出功能,用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件,通过插件可以实现导出为 Excel 文件功能;另外,用户还可以从网页上直接打印图表。

  1. 缩放和钻取

通过缩放可以方便的查看不同范围的数据;通过钻取可以方便的查看不同级别的详细数据。

  1. 方便加载外部数据

Highcharts 的数据是 JavaScript 数组或对象,这些数据可以是本地的配置对象,独立的数据文件(JSON、CVS)甚至是不同的网站上定义。另外,这些数据可以用任何形式处理好并加载到 Highcharts 中。

  1. 仪表图

仪表图对于 Dashboard 来说特别理想,这种图表就像速度计一样,一眼就可以轻松阅读。

  1. 极地图

折线图、面积图、柱形图等图形可以通过一个简单的配置转换成极地图、雷达图。

  1. 图表或坐标轴反转

Highcharts 支持图表反转(X 轴或 Y轴对调),这样 X轴是垂直的,方便进行数据对比;坐标轴旋转则可以坐标轴的最大值和最小值显示对调。

  1. 文本旋转

图表中所有的文本,包括坐标轴标签、数据标签等都可以进行任意角度旋转。

2.3 横向比较

2.3.1 特性比较

特性 Echarts Highcharts
可视化类型数 折线图、柱状图、散点图、饼图、K线图、盒形图、地图、热力图、线图、关系图、漏斗图,仪表盘等。除此之外,还支持几种特色类型图,比如树图、路径图、旭日图、桑基图、日历坐标系等。 折线图及曲线图、面积图、柱状图及条形图、饼图及环形图、散点图及气泡图、仪表图、关系图、地图等。除此之外,还支持23种特色类型图,比如词云图、甘特图、时序图、贝尔曲线图、极地图等。
图形颜色主题数 3 10
是否支持图与图之间的混搭
是否支持 3D图
多种数据格式 二维表,key-value、GeoJSON 格式数据、TypedArray 格式数据。 JavaScript 数组或对象、GeoJSON 格式数据。
地图是否支持流加载 -
移动端优化
多渲染方案 Canvas、SVG(4.0+)、VML SVG(4.0+)、VML
是否支持多维数据
是否支持数据动态展示
是否支持缩放
是否支持坐标轴反转
是否支持文本旋转
是否支持导出与打印 -
文档是否详细 一般 详细
示例是否详细 一般 详细
商业化是否需要授权使用 -

相对来说,Highcharts支持的可视化类型数更多。但对于某些类别的图形种类来说,比如散点图,Echarts 支持 24 种散点图;而 Highcharts 只有 7 种。也就是说,Highcharts 提供的类型比较广,而Echarts 在某些类别上形式比较多样。

Highcharts 还有专门的股票图表控件叫HIGHSTOCK, 支持直线图、折线图、面积图、面积曲线图、柱形图、散点图、蜡烛图(OHLC)、K线图、标签图、面积范围图、柱形范围图等多种图表。

Echarts 的百度前端技术部开发维护的,所以在地图领域较具有优势。

而 Highcharts 是整家公司在开发维护,所以算是目前世界上图表领域的领头羊。但需要授权(https://highcharts.com.cn/highcharts),一个项目,2个开发,大概 8000左右。授权后还提供高级技术支持,比如主版本更新升级服务、一对一技术支持服务、7 * 24 小时紧急响应等等。

2.3.2 数据比较

图表框架 Github 评星数 npm 下载数(平均每周)
ECharts 39.8k 183,103
Highcharts 9.3k 607,755

GitHub是一个面向开源及私有软件项目的托管平台。

npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 我们可以安装、共享、分发代码,管理项目依赖关系。

通过 Github 评星数与npm 下载数,可以从数据角度分析出这些框架的流行度。相对来说,npm 下载数更实在一些。Highcharts 的每周下载量是 ECharts 3 倍以上,具有绝对优势。

2.3.3 网上案例

某国字头物流中心项目,拥有很多图形化报表、算法复杂,开始使用 Echarts,团队成员曾一度不想继续干下去(bug 多、文档、实例问题)。后来采用 Highcharts 重写。

3 结论

  • 项目涉及到的图表比较简单并且图少,建议采用 ECharts。

  • 项目涉及到的图表复杂并且图多,建议投入预算,采用 Highcharts。

你可能感兴趣的:(数据可视化大屏选型调研报告)