一图胜千言—Tcharts图可视化解决方案

不讲理咋地

作者：常敏，腾讯云监控高级工程师前言Tcharts来自于腾讯云监控产品中心，基于Canvas（HTML5 的新标签）自研的可视化组件，是类似于ApacheEcharts（一个基于JavaScript的开源可视化图表库）和AntV（蚂蚁金服全新一代数据可视化解决方案）可视化图表库。Tcharts致力于提供高性能，易定制的企业级可视化解决方案。目前支持“统计图表”、“地图”和“图可视化”等组件。本文主要介绍“图可视化”组件部分。图可视化组件目前已应用到全链路监控“腾讯云应用性能观测APM”，“腾讯云内容分发网络CDN”,“腾讯云安全中心”等50多个产品中，提供差异化的图可视化解决方案。什么是图可视化？图是指图论中的图。在离散数据中，图Graph是由两个集合V和E组成(记做G=(V,E))：V是vertex，节点的集合，E是edges，边的集合，图是我们描述现实世界中离散课题之间关系的有用工具。把图通过可视化的方式把这种关系呈现出来，即为图可视化。可视化终极目标是对事物规律的洞悉。通过可视化表达来增强人们完成某件任务的效率。图可视化通常被应用到社交网络，调用链，网络安全，知识图谱等场景中。图可视化有哪些挑战?在实际业务中，目前遇到的挑战主要有如下四点：渲染性能和交互性能不满足要求。节点和链路可表达的“视觉通道”有限，不能满足复杂业务含义。大数据量导致的视觉混乱，导致无法表现事物规律。定制化能力不足。我们针对上述四大痛点，介绍Tcharts提供的能力和解决方案。Tcharts的图可视化解决方案1.Tcharts的核心架构[点击查看大图]场景化组件层:Tcharts底层是不依赖任何技术栈的，可以单独使用。在Tcharts上封装了react组件和Vue组件，方便不同的技术栈使用。组件/接口层：提供兼容Echarts的接口和API。除此之外，Tcharts设计了一套更适合拓扑图接口，支持动态更新和更丰富配置和定制化能力。原子组件层：包括数据展示组件和辅助组件。辅助组件包括坐标轴、图例、tooltip，颜色组件和缩放组件等。该层最核心的设计是数据展示分解，把所有支持用户操作的元素分解为原子组件。原子组件能独立渲染。分解之后，让统计图表，地图和拓扑图组件没有本质差别，一套代码可以实现多种图表类型。功能组件层：支持事件，动画渲染，辅助线等全局功能。渲染层：渲染层支持分层渲染，拓扑图节点和链路的动画支持在单独层渲染，提升渲染性能和交互流畅度。为高性能渲染拓扑节点的图标，渲染层支持了SVGPath转化为Canvas绘制的能力。基础能力层：提供文本处理，丰富的工具类。接口定义，和针对图可视化的丰富的布局能力。2.拓扑图的性能测评测评采用同样的数据。视图中包括10000节点19800个链路。在渲染性能和交互流畅度方面具有明显的优势。Tcharts与开源图表库的性能对比如下：3.高性能渲染Tcharts所有原子对象创建完成，并不是立即渲染。而是放在原子组件队列中，等待刷新线程（requestAnimatiomFrame）执行渲染。局部刷新首先确定节点（或链路）的矩形包围盒清除这个包围盒内的颜色，设置这个区域为clip区域重新绘制全部跟这个区域相交的图形画布中有A,B,C,D,E,F多个元素。C移动位置，重绘的只有B,C,D三个元素。只需把虚线框内的区域清除，在虚线框的区域创建裁剪区域（使用clip()方法），再绘制B,C,D。下列视频通过给画布增加一个网格线，来演示Tcharts拖拽节点位置，局部刷新的过程。已关注关注重播分享赞关闭观看更多更多腾讯云可观测已关注分享点赞在看已同步到看一看写下你的评论分享视频，时长00:130/000:00/00:13切换到横屏模式继续播放进度条，百分之0播放00:00/00:1300:13倍速播放中0.5倍0.75倍1.0倍1.5倍2.0倍超清流畅您的浏览器不支持video标签继续观看一图胜千言—Tcharts图可视化解决方案观看更多转载,一图胜千言—Tcharts图可视化解决方案腾讯云可观测已关注分享点赞在看已同步到看一看写下你的评论视频详情在Tcharts中，所有需要局部刷新的元素，都实现接口LocalElement。把所有需要局部刷新的元素添加到对应Layer中。Layer类中，计算重绘区域的核心代码：[点击查看大图]刷新线程会遍历所有Layer，执行局部的重绘。[点击查看大图]仅绘制可视范围界面渲染的时候，只渲染用户可见的区域。不可见区域，只有在“拖拽画布“或“拖动滚动条“变为可见的时候，才会进行渲染。如果拖拽有卡顿，可以设置缓冲区域，提升交互体验。高性能渲染节点图标Tcharts通过解析SVGPath,转化Canvas绘制，避免了SVG图表的loading过程，提升渲染的性能。path支持的命令有9个，分别是：M=movetoL=linetoH=horizontallinetoV=verticallinetoC=curvetoS=smoothcurvetoQ=quadraticBelziercurveT=smoothquadraticBelziercurvetoA=ellipticalArcZ=closepath大写表示命令的参数是绝对的，小写表示参数是相对的。使用相对位置的原因是为了节省空间，比如（10000，10000）这个顶点用很多个0去表示，如果这个点相对上个点才偏移(10,-1)，这就省下了好几个字符。例如：M100100表示移动到x=100，y=100的位置。m100100表示移动到相对于前一个点x+100，y+100的地方。如果想了解SVGpath转化Canvas更多细节，可以查看文末联系云监控小助手。4.高性能交互分层渲染链路和节点的动画，在单独的层渲染，频繁的刷新不影响核心绘制层。下列视频为节点动画的例子：已关注关注重播分享赞关闭观看更多更多腾讯云可观测已关注分享点赞在看已同步到看一看写下你的评论分享视频，时长00:100/000:00/00:10切换到横屏模式继续播放进度条，百分之0播放00:00/00:1000:10倍速播放中0.5倍0.75倍1.0倍1.5倍2.0倍超清流畅您的浏览器不支持video标签继续观看一图胜千言—Tcharts图可视化解决方案观看更多转载,一图胜千言—Tcharts图可视化解决方案腾讯云可观测已关注分享点赞在看已同步到看一看写下你的评论视频详情Hover事件优化拓扑图的鼠标Hover事件与折现图的事件不同，不需要实时显示tooltip。hover事件增加100ms的延迟。相交判断优化鼠标Hover和选中事件，判断是否与某个对象相交。判断的过程中，只需要遍历用户当前可见的对象。5.视觉通道有限节点和链路可表达的视觉通道有限，不能满足复杂业务含义。Tcharts对显示样式和交互做了整体规划。节点大小，颜色，描边，底色，角标多种组合灵活满足业务需求。[点击查看大图]6.大数据的视觉混乱，导致无法表现事物规律。“聚合节点”让数据量变少。支持展开分组方式，或直接展示。展示聚合节点的时候，右上角“角标“展示该节点包含的子节点数。点击角标展开聚合节点。[点击查看大图]聚合节点展开后，可以在一个分组中展示。也可以直接显示为多个节点。[点击查看大图]链路支持折叠或展开，减少链路的复杂性。[点击查看大图]点击链路的卫星图标，展开链路。显示更多节点和链路。[点击查看大图]优化后的效果对比[点击查看大图]7.Tcharts的定制化能力Tcharts的节点形状支持定制：style:{width:40,height:40,shape:'rectangle'}shape支持圆型，矩形，圆角矩形，椭圆形等。除以上内置的形状外，Tcharts还支持hooks注册对应的原子组件子类对节点进行自定义。 实现其对应的draw方法，通过自定义的方式实现自己的节点样式。支持百万级可视化分析的规划虽然Canvas渲染引擎性能相比SVG来说，Canvas性能更优异。但对于图分析的场景，当数据量达到几十万或者上百万的时候，仅仅靠CPU的计算能力无法达到要求了。Tcharts将会支持WebGL和Webworker。特别是支持并行计算的场景，WebGL和Webworker将发挥性能优势。1.GPU和CPU的性能对比[点击查看大图]来源：TechPowerUp在Web端使用GPGPU，因为目前WebGPU还在实验中，目前商用只能使用WebGL，使用WebGL可以实现高性能计算，高性能布局操作。但是WebGPU是未来的趋势，WebGPU时代即将到来，现在学习，时间正好！Babylon.jsteam和Three.jsteam官方都支持了WebGPU渲染。2.WebWorker交互优化WebWorker可以使计算渲染分离。布局算法，图分析等高密集的计算会使CPU使用率达100%，浏览器无法响应，光标无法移动，从而无法正常进行其他交互。WebWorker的作用，就是为JavaScript创造多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，Worker线程在后台运行，两者互不干扰。 WebWorker实现离屏渲染： [点击查看大图]联系我们腾讯云Tcharts目前还没有对外开源，暂时无法访问到源码。如需使用或有任何疑问请联系云监控小助手。扫码加云监控小助手加入更多技术交流群精选文章推荐：关注我们，了解腾讯云监控的最新动态