CN110866379A

CN110866379A - 数据可视化图表库系统

Info

Publication number: CN110866379A
Application number: CN201911005705.1A
Authority: CN
Inventors: 张明灯; 谢绍强; 邹光
Original assignee: Guangzhou Atomic Network Technology Co Ltd
Current assignee: Guangzhou Weile Information Technology Co ltd
Priority date: 2019-10-22
Filing date: 2019-10-22
Publication date: 2020-03-06
Anticipated expiration: 2039-10-22
Also published as: CN110866379B

Abstract

本发明公开了一种数据可视化图表库系统，包括相互连接的图表绘制单元、个性化图标样式单元、样式简介单元、数据加载更新单元、加载动画单元、数据动态更新单元、交互组件加入单元、事件行为单元和鼠标事件处理单元；图表绘制单元：用于在绘图前为所述数据可视化图表库系统准备一个具备高宽的DOM容器，然后通过generate方法初始化一个数据可视化图表库软件实例，并将其传入Option参数生成一个柱状图；个性化图标样式单元：用于提供若干自定义配置选项，且能从全局、系列和数据三个层级来设置数据图形的样式。实施本发明的数据可视化图表库系统，具有以下有益效果：软件引入方式较为简单、能满足用户对于功能多样化的需求。

Description

数据可视化图表库系统

技术领域

本发明涉及图表库领域，特别涉及一种数据可视化图表库系统。

背景技术

数据可视化图表库提供直观、生动、可交互和可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。创建了坐标系、图例、提示和工具箱等基础组件，并在此上构建出折线图、柱状图和饼图等，同时支持任意维度的堆积和多图表混合展现。然而，传统数据可视化图表库的功能有限，不能满足用户对于功能多样化的需求。另外，传统数据可视化图表库的引入方式由于在代码中内置AMD加载器，需要按照AMD的方式按需引入，造成引入方式比较复杂。

发明内容

本发明要解决的技术问题在于，针对现有技术的上述缺陷，提供一种软件引入方式较为简单、能满足用户对于功能多样化的需求的数据可视化图表库系统。

本发明解决其技术问题所采用的技术方案是：构造一种数据可视化图表库系统，包括：

图表绘制单元：用于在绘图前为所述数据可视化图表库系统准备一个具备高宽的DOM容器，然后通过generate方法初始化一个数据可视化图表库软件实例，并将其传入Option参数生成一个柱状图；

个性化图标样式单元：用于提供若干自定义配置选项，且能从全局、系列和数据三个层级来设置数据图形的样式；

样式简介单元：用于概述采用哪些方法设置样式，以及如何改变图形元素或者文字的颜色、明暗和大小；

数据加载更新单元：用于在图表初始化后，通过jQuery工具异步获取数据后通过load填入数据和配置项；

加载动画单元：用于提供一个loading动画来提示用户数据正在加载；

数据动态更新单元：用于定时获取数据，通过Option填入数据，自动找到两组数据之间的差异，然后通过相应的动画去表现数据的变化；

交互组件加入单元：用于在图表中加入交互组件；

事件行为单元：用于用户在图表中的操作将会触发相应的事件，通过监听所述事件，然后由回调函数做相应的处理；

鼠标事件处理单元：用于提供鼠标事件类型；

所述图表绘制单元、个性化图标样式单元、样式简介单元、数据加载更新单元、加载动画单元、数据动态更新单元、交互组件加入单元、事件行为单元和鼠标事件处理单元相互连接。

在本发明所述的数据可视化图表库系统中，所述数据图形至少包括柱状图、南丁格尔图和饼图。

在本发明所述的数据可视化图表库系统中，设置样式的方式包括设置颜色主题、设置调色盘、直接样式设置和设置视觉映射。

在本发明所述的数据可视化图表库系统中，在更新数据时通过name属性对应到相应的系列，当所述name属性不存在时，根据系列的顺序进行更新。

在本发明所述的数据可视化图表库系统中，所述交互组件包括图例组件、标题组件、视觉映射组件、数据区域缩放组件和时间线组件。

在本发明所述的数据可视化图表库系统中，所述数据区域缩放组件用于在直角坐标系或极坐标系下对数轴进行数据窗口缩放和数据窗口平移操作；当多个所述数据区域缩放组件控制同一个数轴时，会自动联动。

在本发明所述的数据可视化图表库系统中，所述事件分为两种类型，第一种事件类型是用户鼠标操作点击或者hover图表的图形时触发的事件，第二种事件类型是用户在使用能交互的组件后触发的行为事件。

在本发明所述的数据可视化图表库系统中，在切换图例开关时触发的legendselectchanged事件和数据区域缩放时触发的datazoom事件均属于所述第二种事件类型。

在本发明所述的数据可视化图表库系统中，所述鼠标事件包含d,element参数，所述d,element参数是一个包含点击图形的数据信息的对象。

实施本发明的数据可视化图表库系统，具有以下有益效果：由于设有图表绘制单元、个性化图标样式单元、样式简介单元、数据加载更新单元、加载动画单元、数据动态更新单元、交互组件加入单元、事件行为单元和鼠标事件处理单元，且数据可视化图表库系统无需使用AMD的方式按需引入，代码里也不再内置AMD加载器，因此本发明软件引入方式较为简单、能满足用户对于功能多样化的需求。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明数据可视化图表库系统一个实施例中的结构示意图；

图2为所述实施例中柱状图的示意图；

图3为所述实施例中南丁格尔图的示意图；

图4为所述实施例中饼图的示意图；

图5为所述实施例中设置扇形颜色的示意图；

图6为所述实施例中调色盘设置的示意图；

图7为所述实施例中更新数据时需要name属性对应到相应的系列的示意图；

图8为所述实施例中数据动态更新的示意图；

图9为所述实施例中数据区域缩放组件进行数据操作的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明数据可视化图表库系统实施例中，该数据可视化图表库系统的结构示意图如图1所示。该数据可视化图表库系统无需使用AMD的方式按需引入，代码里也不再内置AMD加载器。因此引入方式简单了很多，只需要像普通的JavaScript库一样用script标签引入，引入的代码如下：

图1中，该数据可视化图表库系统包括相互连接的图表绘制单元1、个性化图标样式单元2、样式简介单元3、数据加载更新单元4、加载动画单元5、数据动态更新单元6、交互组件加入单元7、事件行为单元8和鼠标事件处理单元9。

其中，图表绘制单元1用于在绘图前为数据可视化图表库系统准备一个具备高宽的DOM容器，然后通过generate方法初始化一个数据可视化图表库软件实例，并将其传入Option参数生成一个柱状图。

具体而言，准备DOM容器的代码如下：

然后就可以通过generate方法初始化一个数据可视化图表库软件实例并传入Option参数生成一个简单的柱状图，代码如下：

通过上述代码生成的柱状图如图2所示。

个性化图标样式单元2用于提供若干自定义配置选项，且能从全局、系列和数据三个层级来设置数据图形的样式。数据图形至少包括柱状图、南丁格尔图和饼图。

图3为本实施例中南丁格尔图的示意图，图4为本实施例中饼图的示意图。饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。图4中，data属性值不像快速上手里那样每一项都是单个数值，而是一个包含name和value属性的对象，ECharts中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置和标签配置的对象。

图5为本实施例中设置扇形颜色的示意图，扇形的颜色也是在colors or color中设置。

样式简介单元3用于概述采用哪些方法设置样式，以及如何改变图形元素或者文字的颜色、明暗和大小。

设置样式的方式包括设置颜色主题(Theme)、设置调色盘、直接样式设置(itemStyle、lineStyle、areaStyle、label等)和设置视觉映射(visualMap)。这几种方式，他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现)，但是他们各有各的场景偏好。

最简单的更改全局样式的方式，是直接采用颜色主题(theme)。

数据可视化图表库软件除了一贯的默认主题外，新外置了两套主题，分别为insight和graph。可以这么来使用它们：

<！--加载不同颜色主题-->

调色盘可以在option中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。图6为本实施例中调色盘设置的示意图。

数据加载更新单元4用于在图表初始化后，通过jQuery工具异步获取数据后通过load填入数据和配置项。

快速上手示例中的数据是在初始化后Option中直接填入的，但是很多时候可能数据需要异步加载后再填入。该数据可视化图表库系统中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过jQuery等工具异步获取数据后通过loa填入数据和配置项就行。

该数据可视化图表库系统中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。图7为本实施例中更新数据时需要name属性对应到相应的系列的示意图。

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生bug了，因此需要一个loading的动画来提示用户数据正在加载。加载动画单元5用于提供一个loading动画来提示用户数据正在加载。该数据可视化图表库系统默认有提供了一个简单的加载动画，只需要调用showLoading方法显示。数据加载完成后再调用hideLoading方法隐藏加载动画。

ECharts由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。所有数据的更新都通过Option实现，数据动态更新单元6用于定时获取数据，通过Option填入数据，而不用考虑数据到底产生了那些变化，该数据可视化图表库系统会自动找到两组数据之间的差异，然后通过相应的动画去表现数据的变化。图8为本实施例中数据动态更新的示意图。

交互组件加入单元7用于在图表中加入交互组件。该数据可视化图表库系统提供了很多交互组件，包括图例组件legend、标题组件title、视觉映射组件visualMap、数据区域缩放组件dataZoom和时间线组件timeline。

下面以数据区域缩放组件dataZoom为例，介绍如何加入这种组件。概览数据整体，按需关注数据细节是数据可视化的基本交互需求。数据区域缩放组件dataZoom用于在直角坐标系(grid)或极坐标系(polar)下对数轴进行数据窗口缩放和数据窗口平移操作。数据区域缩放组件dataZoom可同时存在多个，起到共同控制的作用。当多个数据区域缩放组件dataZoom控制同一个数轴时，会自动联动。数据区域缩放组件dataZoom的运行原理是通过数据过滤来达到数据窗口缩放的效果。数据过滤模式的设置不同，效果也不同。图9为本实施例中数据区域缩放组件进行数据操作的示意图。

事件行为单元8用于用户在数据可视化图表库系统的图表中的操作将会触发相应的事件，通过监听事件，然后由回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

在数据可视化图表库系统中绑定事件都是通过on方法，事件名称对应DOM事件名称，均为小写的字符串。

在数据可视化图表库系统中事件分为两种类型，7、根据权利要求1的数据可视化图表库系统，其特征在于，事件分为两种类型，第一种事件类型是用户鼠标操作点击或者hover图表的图形时触发的事件，第二种事件类型是用户在使用能交互的组件后触发的行为事件，例如在切换图例开关时触发的legendselectchanged事件(这里需要注意切换图例开关是不会触发legendselected事件的)，数据区域缩放时触发的datazoom事件等等。

鼠标事件处理单元9用于提供鼠标事件类型。数据可视化图表库系统支持常规的鼠标事件类型，包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、contextmenu事件。下面先来看一个简单的点击柱状图后打开百度搜索页面的示例。

所有的鼠标事件包含参数d,element，这是一个包含点击图形的数据信息的对象，如下格式：

{

//

id:string,

//数据在传入data数组中的index

index:number,

//类目名

name:string,

//传入的原始数据项

value:number,

x:number,

}。

总之，本实施例中，由于设有图表绘制单元1、个性化图标样式单元2、样式简介单元3、数据加载更新单4元、加载动画单元5、数据动态更新单元6、交互组件加入单元7、事件行为单元8和鼠标事件处理单元9，且数据可视化图表库系统无需使用AMD的方式按需引入，代码里也不再内置AMD加载器，因此本发明软件引入方式较为简单、能满足用户对于功能多样化的需求。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种数据可视化图表库系统，其特征在于，包括：

交互组件加入单元：用于在图表中加入交互组件；

鼠标事件处理单元：用于提供鼠标事件类型；

2.根据权利要求1所述的数据可视化图表库系统，其特征在于，所述数据图形至少包括柱状图、南丁格尔图和饼图。

3.根据权利要求1所述的数据可视化图表库系统，其特征在于，设置样式的方式包括设置颜色主题、设置调色盘、直接样式设置和设置视觉映射。

4.根据权利要求1所述的数据可视化图表库系统，其特征在于，在更新数据时通过name属性对应到相应的系列，当所述name属性不存在时，根据系列的顺序进行更新。

5.根据权利要求1所述的数据可视化图表库系统，其特征在于，所述交互组件包括图例组件、标题组件、视觉映射组件、数据区域缩放组件和时间线组件。

6.根据权利要求5所述的数据可视化图表库系统，其特征在于，所述数据区域缩放组件用于在直角坐标系或极坐标系下对数轴进行数据窗口缩放和数据窗口平移操作；当多个所述数据区域缩放组件控制同一个数轴时，会自动联动。

7.根据权利要求1所述的数据可视化图表库系统，其特征在于，所述事件分为两种类型，第一种事件类型是用户鼠标操作点击或者hover图表的图形时触发的事件，第二种事件类型是用户在使用能交互的组件后触发的行为事件。

8.根据权利要求7所述的数据可视化图表库系统，其特征在于，在切换图例开关时触发的legendselectchanged事件和数据区域缩放时触发的datazoom事件均属于所述第二种事件类型。

9.根据权利要求1所述的数据可视化图表库系统，其特征在于，所述鼠标事件包含d,element参数，所述d,element参数是一个包含点击图形的数据信息的对象。