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

 作者：常敏，腾讯云监控高级工程师

前言

Tcharts 来自于腾讯云监控产品中心，基于 Canvas （HTML5  的新标签）自研的可视化组件，是类似于 Apache Echarts（一个基于 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 拖拽节点位置，局部刷新的过程。

在 Tcharts 中，所有需要局部刷新的元素，都实现接口 LocalElement。

把所有需要局部刷新的元素添加到对应 Layer 中。

Layer 类中，计算重绘区域的核心代码：

[点击查看大图]

刷新线程会遍历所有 Layer，执行局部的重绘。

[点击查看大图]

仅绘制可视范围

界面渲染的时候，只渲染用户可见的区域。不可见区域，只有在“拖拽画布“或“拖动滚动条“变为可见的时候，才会进行渲染。如果拖拽有卡顿，可以设置缓冲区域，提升交互体验。

高性能渲染节点图标

Tcharts 通过解析 SVG Path, 转化 Canvas绘 制，避免了 SVG 图表的 loading 过程，提升渲染的性能。

path 支持的命令有9个，分别是：

• M = moveto

• L = lineto

• H = horizontal lineto

• V = vertical lineto

• C = curveto

• S = smooth curveto

• Q = quadratic Belzier curve

• T = smooth quadratic Belzier curveto

• A = elliptical Arc

• Z = closepath

大写表示命令的参数是绝对的，小写表示参数是相对的。使用相对位置的原因是为了节省空间，比如（10000，10000）这个顶点用很多个0去表示，如果这个点相对上个点才偏移(10, -1)，这就省下了好几个字符。

例如：M100 100表示移动到 x=100， y=100的位置。m100 100 表示移动到相对于前一个点x + 100， y + 100的地方。

如果想了解 SVG path 转化 Canvas 更多细节，可以查看文末联系云监控小助手。

4. 高性能交互

• 分层渲染
  链路和节点的动画，在单独的层渲染，频繁的刷新不影响核心绘制层。

下列视频为节点动画的例子：

• 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.js team 和 Three.js team官方都支持了 WebGPU 渲染。

2. Web Worker交互优化

Web Worker可以使计算渲染分离。布局算法，图分析等高密集的计算会使 CPU 使用率达 100%，浏览器无法响应，光标无法移动，从而无法正常进行其他交互。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。 

Web Worker 实现离屏渲染： 

[点击查看大图]

联系我们

腾讯云 Tcharts 目前还没有对外开源，暂时无法访问到源码。如需使用或有任何疑问请联系云监控小助手。

扫码加云监控小助手

加入更多技术交流群

精选文章推荐：

---

关注我们，了解腾讯云监控的最新动态