基于Web的实时数据图形显示模块研究高川刘宝华摘要：互联网与物联网的兴起使得各行各业进入数据化管理模式，企业对于信息管理系统、数据实时监控有着迫切的需要。在大前端时代，软件开发体系多采用B/S结构，数据的呈现在前端设计中愈发重要，而现有图形框架对实时数据图形绘制时存在图形缩放现象。为解决这一现象，文中以可缩放矢量图形（SVG）为核心，以实时数据图形绘制为重要对象，研究和建立轻量级图形显示模块。结合企业实际应用证明文中模块有效避免缩放现象的出现。文中模块研究对与Web图形绘制具有良好的借鉴意义。关键词：前端;图形;模块：TP391.092：ADOI：10.3969/j.issn.1003-6970.2020.07.035本文著录格式：高川，刘宝华.基于Web的实时数据图形显示模块研究[J].软件，2020，41（07）：174-178ResearchonReal-timeDataGraphDisplayModuleBasedonWebGAOChuan，LIUBao-hua（CollegeofMechanicalEngineering，YanshanUniversity，Qinhuangdao066000，China）【Abstract】：WiththeriseoftheInternetandtheInternetofthings，allwalksoflifehaveenteredthedigitalmanagementmode，andenterpriseshaveanurgentneedforinformationmanagementsystemandreal-timedatamonitoring.Intheeraoflargefront-end，thesoftwaredevelopmentsystemmostlyadoptsB/Sstructure，andthepresentationofdatabecomesmoreandmoreimportantinfront-enddesign.However，thegraphscalingphenomenonexistswhentheexistinggraphicsframeworkdrawsthereal-timedatagraph.Inordertosolvethisproblem，thispapertakesscalablevectorgraphics（SVG）asthecoreandreal-timedatagraphicsrenderingasanimportantobjecttostudyandbuildalightweightgraphicsdisplaymodule.Combinedwiththeactualapplicationoftheenterprise，itisprovedthatthemoduleinthispapercaneffectivelyavoidthephenomenonofscaling.ThemoduleresearchinthispaperhasagoodreferencesignificanceforWebgraphicsrendering.【Keywords】：Front-end;Chart;Module0引言在互聯网与物联网的综合背景下，信息化推动数字化发展，而数字化则进一步推动了数据化的发展。数据化以数据分析为切入点，通过数据发现问题、分析问题、解决问题，打破传统的经验驱动决策的方式，实现科学决策。其特性使得企业迈向数据化管理，最直观的便是企业数据采集系统。大前端时代下，企业数据采集系统由传统C/S结构转向B/S结构。传统web图表展示功能实现依靠服务端处理并形成图表，进而依据动态网页技术如ASP、JSP等技术生成带有图表的HTML文件发送至前端。传统B/S体系过分对服务器过分依赖，对于高并发、数据处理量较大的网页请求无疑会对服务器产生较大的负载，甚至造成服务器崩溃等现象。随着以JavaScript为代表的前端技术快速发展以及各大主流浏览器内核的不断维护与完善，B/S体系开发出现前后端分离的发展趋势。前后端分离技术极大范围内缩小服务器任务量，减小服务器负载，同时也标志着基于B/S体系的软件开发模式进入大前端时代，数据可视化也逐渐成为前端开发者的主要任务，图表的应用在图形绘制过程中愈发重要[1]。目前web主流图表模块为Echarts与Highcharts。对于静态数据展示各模块均含有丰富的图表样式以及响应性，可基本满足企业数据展示的各式要求。而对于在企业数据采集系统中必不可少的实时监控数据展示，目前的主流框架主要存在问题为动态实时数据绘图时的缩放现象。缩放现象是指在绘制时间数据图时，当固定坐标系时间轴方向可容纳的数据数量，而持续获取到的实时數据总长度不满时间轴容量时，产生类似图形压缩的现象。鉴于动态图表在企业数据采集系统中的广泛应用及数据可视化在前端发展的广阔前景，本文将从方案设计与实现原理两方面进行阐述，设计并实现轻量级多接口的图形显示模块，有效避免现有图形模块对于实时数据绘制产生的缩放现象，为前端实时数据图形绘制提供一定的借鉴作用。1方案设计1.1SVG与Canvas选择Web图表的绘制分为两种，HTML5的Canvas和XML的SVG。主要区别为[2]。（1）与分辨率的关系。Canvas绘制图像为位图，与分辨率相关;SVG...