基于SVG的图表数据展示系统技术方案

技术编号:19424507 阅读:31 留言:0更新日期:2018-11-14 10:23
本发明专利技术提供一种基于SVG的图表数据展示系统,所述系统包括SVG模板模块、缩放拖动模块、查询截取模块和计算分析模块,所述SVG模板模块,用于将源数据转换为具有屏幕坐标的数据组,装载所述数据组至基于SVG的XML模版文件,并生成基本的SVG数据图表;所述缩放拖动模块,用于利用JavaScript对所述SVG数据图表的缩放和拖动;所述查询截取模块,用于根据用户输入的指定坐标定位所述指定坐标的数据点,以及通过用户输入的截取坐标自动截取数据并自适应显示窗口;所述计算分析模块,用于根据用户需求对所述源数据进行计算分析以重新生成图表。本发明专利技术能够实现对图表数据的拖动与无损缩放、查询截取以及计算分析。

【技术实现步骤摘要】
基于SVG的图表数据展示系统
本专利技术涉及计算机
,尤其涉及一种基于SVG的图表数据展示系统。
技术介绍
在工程项目中,经常存在海量数据展示的场景。随着业务量的增加,数据量级越来越大,数据密度越来越大,数据的处理耗费越来越大,一次请求多重利用数据的需求显得越来越突出。目前常用的数据展示方式,例如,基于canvas的echarts,不足以应对海量数据的多次再使用,数据量级过大导致数据的展示十分笨重、海量数据无法灵活操作,数据的密度过高导致数据展示的细节失效。具体缺陷为无法对已经生成的图表进行再次修改、编辑、无失真缩放、图表拖动等操作;生成的图表动态交互性不强,一旦数据发生改变或者位置发生改变就需要重新绘制。而存在上述缺陷是因为echarts底层基于canvas实现,而canvas技术是基于位图的图像,逐像素进行渲染的,通过JavaScript来绘制2D图形,依赖分辨率,不支持事件处理器,文本渲染能力弱。
技术实现思路
本专利技术提供的基于SVG的图表数据展示系统,利用SVG(ScalableVectorGraphics,可缩放矢量图形)技术的交互性强、不依赖分辨率、支持事件处理器、可伸缩性以及保证图像质量等特性,能够实现对图表数据的拖动与无损缩放、查询截取以及计算分析。本专利技术提供一种基于SVG的图表数据展示系统,所述系统包括:SVG模板模块,用于将源数据转换为具有屏幕坐标的数据组,装载所述数据组至基于SVG的XML模版文件,并生成基本的SVG数据图表;缩放拖动模块,与所述SVG模板模块连接,用于利用JavaScript对所述SVG数据图表的缩放和拖动;查询截取模块,与所述SVG模板模块连接,用于根据用户输入的指定坐标定位所述指定坐标的数据点,以及通过用户输入的截取坐标自动截取数据并自适应显示窗口;计算分析模块,与所述SVG模板模块连接,用于根据用户需求对所述源数据进行计算分析以重新生成图表。本专利技术实施例提供的基于SVG的图表数据展示系统,与现有技术相比,利用SVG(ScalableVectorGraphics,可缩放矢量图形)技术的交互性强、不依赖分辨率、支持事件处理器、可伸缩性以及保证图像质量等特性,能够实现对图表数据的拖动与无损缩放、查询截取以及计算分析。附图说明图1为本专利技术一实施例基于SVG的图表数据展示系统的结构示意图。具体实施方式为使本专利技术实施例的目的、技术方案和优点更加清楚,下面将结合本专利技术实施例中的附图,对本专利技术实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本专利技术一部分实施例,而不是全部的实施例。基于本专利技术中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本专利技术保护的范围。本专利技术提供一种基于SVG的图表数据展示系统,如图1所示,所述系统包括SVG模板模块、缩放拖动模块、查询截取模块和计算分析模块。其中,SVG模板模块,用于将源数据转换为具有屏幕坐标的数据组,装载所述数据组至基于SVG的XML模版文件,并生成基本的SVG数据图表。例如,一个折线图的基于SVG的XML模版文件实现如下:所述缩放拖动模块,与所述SVG模板模块连接,用于利用JavaScript对所述SVG数据图表的缩放和拖动。查询截取模块,与所述SVG模板模块连接,用于根据用户输入的指定坐标定位所述指定坐标的数据点,以及通过用户输入的截取坐标自动截取数据并自适应显示窗口;计算分析模块,与所述SVG模板模块连接,用于根据用户需求对所述源数据进行计算分析以重新生成图表。其中,可缩放矢量图形SVG是基于可扩展标记语言,用于描述二维矢量图形的一种图形格式。JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。本专利技术实施例提供的基于SVG的图表数据展示系统,所述系统包括SVG模板模块、缩放拖动模块、查询截取模块和计算分析模块,所述SVG模板模块,用于将源数据转换为具有屏幕坐标的数据组,装载所述数据组至基于SVG的XML模版文件,并生成基本的SVG数据图表;所述缩放拖动模块,用于利用JavaScript对所述SVG数据图表的缩放和拖动;所述查询截取模块,用于根据用户输入的指定坐标定位所述指定坐标的数据点,以及通过用户输入的截取坐标自动截取数据并自适应显示窗口;所述计算分析模块,用于根据用户需求对所述源数据进行计算分析以重新生成图表。与现有技术相比,本专利技术是以SVG技术作为基本技术,因为SVG是使用XML文档描述来绘图,更适合用来做动态交互,而且容易编辑,只需要增加或移除相应的元素就可以,同时SVG是基于矢量的,所有它能够很好的处理图形大小的改变,后期可以修改参数来自由放大缩小,无失真,SVG的每个图形都是独立的标签,可以进行独立操作。因此本专利技术通过利用SVG(ScalableVectorGraphics,可缩放矢量图形)技术的交互性强、不依赖分辨率、支持事件处理器、可伸缩性以及保证图像质量等特性,能够实现对图表数据的拖动与无损缩放、查询截取以及计算分析。可选地,所述SVG模板模块包括数据装配接口,所述数据装配接口,用于接收用户输入的源数据。可选地,所述缩放拖动模块包括缩放拖动接口,所述缩放拖动接口,用于接收用户输入的缩放参数或者鼠标位置。可选地,所述缩放拖动模块,用于根据缩放参数对所述源数据进行缩放计算以重新生成图表,或者根据鼠标位置对所述源数据进行平移计算以重新生成图表。例如,一个基本的缩放拖放实现如下:可选地,所述查询截取模块包括查询截取接口,所述查询截取接口,用于接收用户输入的指定坐标或者截取坐标。其中,所述截取坐标可以是用户直接输入的或者通过鼠标选取来确定。例如,一个基本的查询截取实现如下:可选地,所述计算分析模块包括计算分析接口,所述计算分析接口,用于向用户提供数据计算分析工具。其中,所述数据计算分析工具包括平均值计算工具、中位值计算工具、众数计算工具和方差计算工具。例如,一个基本的计算分析实现如下:本专利技术实时提供当前显示窗口内的数据的平均值、中位值、众数、方差等分析数据的计算结果,当用户缩放、拖动、截取数据图表时,统计数据也会随之变动,方便用户对海量数据的分析和理解。本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的程序可存储于一计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory,ROM)或随机存储记忆体(RandomAccessMemory,RAM)等。以上所述,仅为本专利技术的具体实施方式,但本专利技术的保护范围并不局限于此,任何熟悉本
的技术人员在本专利技术揭露的技术范围内,可轻易想到的变化或替换,都应涵盖在本专利技术的保护范围之内。因此,本专利技术的保护范围应该以权利要求的保护范围为准。本文档来自技高网
...

【技术保护点】
1.一种基于SVG的图表数据展示系统,其特征在于,所述系统包括:SVG模板模块,用于将源数据转换为具有屏幕坐标的数据组,装载所述数据组至基于SVG的XML模版文件,并生成基本的SVG数据图表;缩放拖动模块,与所述SVG模板模块连接,用于利用JavaScript对所述SVG数据图表的缩放和拖动;查询截取模块,与所述SVG模板模块连接,用于根据用户输入的指定坐标定位所述指定坐标的数据点,以及通过用户输入的截取坐标自动截取数据并自适应显示窗口;计算分析模块,与所述SVG模板模块连接,用于根据用户需求对所述源数据进行计算分析以重新生成图表。

【技术特征摘要】
1.一种基于SVG的图表数据展示系统,其特征在于,所述系统包括:SVG模板模块,用于将源数据转换为具有屏幕坐标的数据组,装载所述数据组至基于SVG的XML模版文件,并生成基本的SVG数据图表;缩放拖动模块,与所述SVG模板模块连接,用于利用JavaScript对所述SVG数据图表的缩放和拖动;查询截取模块,与所述SVG模板模块连接,用于根据用户输入的指定坐标定位所述指定坐标的数据点,以及通过用户输入的截取坐标自动截取数据并自适应显示窗口;计算分析模块,与所述SVG模板模块连接,用于根据用户需求对所述源数据进行计算分析以重新生成图表。2.根据权利要求1所述的系统,其特征在于,所述SVG模板模块包括数据装配接口,所述数据装配接口,用于接收用户输入的源数据。3.根据权利要求...

【专利技术属性】
技术研发人员:管浩
申请(专利权)人:曙光信息产业北京有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1