CN117707677A - 数据渲染方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

本公开提供了一种数据渲染方法、装置、电子设备及可读存储介质，涉及数据可视化、可视化图表、降采样等技术领域，包括：获取目标装置在运行时所记录的表征运行状态的原始数据；对原始数据进行降采样处理，得到第一精简数据；将第一精简数据作为预设的数据可视化图表应用的数据源，得到数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；响应于接收到针对第一可视化图表下发的局部查看操作，确定与局部查看操作对应的局部查看区间，并对处于局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将第二精简数据嵌入处于局部查看区间内的部分第一精简数据中，得到数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

Description

数据渲染方法、装置、电子设备及可读存储介质

技术领域

本公开涉及数据处理技术领域，具体涉及数据可视化、可视化图表、降采样等技术领域，尤其涉及一种数据渲染方法、装置、电子设备及可读存储介质。

背景技术

针对处于试验阶段或运行验证阶段的装置或设备，往往需要将其在运行过程中表征其运行状态的大量数据收集起来进行分析，以通过分析来明确装置或设备是否处于预期的运行状态，以及尝试挖掘隐藏的运行状态特征用于后续使用。

以聚变装置为例，聚变装置每次放电都会产生百万量级的数据，通常需要将这些数据借用工具在网页端绘制成多个图表来显示出各参数的变化趋势，通过对图表进行缩放、拖拽等操作来详细观察某一段数据具体的变化，同时还需要实时监测并更新放电数据，以便及时获取到最新的放电图。通过这些功能来实时观察放电数据的变化，以此来改进实验方案以达到最终聚变的目的。

但常规的数据可视化图表应用在面对如此数量级的数据时，往往会出现卡顿，极大的影响了用户的使用体验。

发明内容

本公开实施例提出了一种数据渲染方法、装置、电子设备及可读存储介质。

第一方面，本公开实施例提出了一种数据渲染方法，包括：获取目标装置在运行时所记录的表征运行状态的原始数据；对原始数据进行降采样处理，得到第一精简数据；将第一精简数据作为预设的数据可视化图表应用的数据源，得到数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；响应于接收到针对第一可视化图表下发的局部查看操作，确定与局部查看操作对应的局部查看区间，并对处于局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将第二精简数据嵌入处于局部查看区间内的部分第一精简数据中，得到数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

在第一方面的一些其它实施例中，获取目标装置在运行时所记录的表征运行状态的原始数据，包括：

获取目标装置在运行时所记录的表征运行状态的由多个数据分片共同构成的原始数据；其中，数据分片对应的数据量与预设的最小数据传输单位相对应；

对应的，对原始数据进行降采样处理，得到第一精简数据，包括：

对构成原始数据的各数据分片均进行降采样处理，得到由各精简数据分片构成的第一精简数据；

对应的，将第一精简数据作为预设的数据可视化图表应用的数据源，得到数据可视化图表应用在全局显示状态下呈现出的第一可视化图表，包括：

响应于接收到与用于形成首个数据可视化图表的精简数据分片，控制数据可视化图表应用在全局显示状态下先在显示界面中显示首个数据可视化图表；

响应于接收到与用于形成非首个数据可视化图表的精简数据分片，控制数据可视化图表应用在后台绘制非首个数据可视化图表直至接收到应在显示界面中呈现非首个数据可视化图表的指令时将其呈现在显示界面中。

在第一方面的一些其它实施例中，原始数据包括由多个原始点数据构成的原始线数据，原始线数据以二进制数组形式进行记录和表示。

在第一方面的一些其它实施例中，原始数据和第一精简数据被常态化存储在预设的本地数据离线存储库中。

在第一方面的一些其它实施例中，局部查看操作包括：对任意第一可视化图表进行的缩放、拖拽、分栏呈现操作中的至少一项。

在第一方面的一些其它实施例中，对原始数据进行降采样处理，包括：

确定用于呈现第一可视化图表的图像区域包含的第一像素点数量；

按照与第一像素点数量对应的降采样参数，对原始数据进行降采样处理。

在第一方面的一些其它实施例中，对处于局部查看区间内的原始数据进行降采样处理，包括：

确定用于呈现第二可视化图表的图像区域包含的第二像素点数量；

按照与第二像素点数量对应的降采样参数，对处于局部查看区间内的原始数据进行降采样处理。

第二方面，本公开实施例提出了一种数据渲染装置，包括：原始数据获取单元，被配置成获取目标装置在运行时所记录的表征运行状态的原始数据；第一降采样单元，被配置成对原始数据进行降采样处理，得到第一精简数据；全局显示单元，被配置成将第一精简数据作为预设的数据可视化图表应用的数据源，得到数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；局部显示单元，被配置成响应于接收到针对第一可视化图表下发的局部查看操作，确定与局部查看操作对应的局部查看区间，并对处于局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将第二精简数据嵌入处于局部查看区间内的部分第一精简数据中，得到数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

在第二方面的一些其它实施例中，原始数据获取单元被进一步配置成：

获取所述目标装置在运行时所记录的表征运行状态的由多个数据分片共同构成的原始数据；其中，数据分片对应的数据量与预设的最小数据传输单位相对应；

对应的，第一降采样单元被进一步配置成：

对构成原始数据的各数据分片均进行降采样处理，得到由各精简数据分片构成的第一精简数据；

对应的，全局显示单元被进一步配置成：

响应于接收到与用于形成首个数据可视化图表的精简数据分片，控制数据可视化图表应用在全局显示状态下先在显示界面中显示首个数据可视化图表；

响应于接收到与用于形成非首个数据可视化图表的精简数据分片，控制数据可视化图表应用在后台绘制非首个数据可视化图表直至接收到应在显示界面中呈现非首个数据可视化图表的指令时将其呈现在显示界面中。

在第二方面的一些其它实施例中，原始数据包括由多个原始点数据构成的原始线数据，原始线数据以二进制数组形式进行记录和表示。

在第二方面的一些其它实施例中，原始数据和第一精简数据被常态化存储在预设的本地数据离线存储库中。

在第二方面的一些其它实施例中，局部查看操作包括：对任意第一可视化图表进行的缩放、拖拽、分栏呈现操作中的至少一项。

在第二方面的一些其它实施例中，第一降采样单元被进一步配置成：

确定用于呈现第一可视化图表的图像区域包含的第一像素点数量；

按照与第一像素点数量对应的降采样参数，对原始数据进行降采样处理。

在第二方面的一些其它实施例中，局部显示单元包括被配置成对处于局部查看区间内的原始数据进行降采样处理的第二降采样子单元，第二降采样子单元被进一步配置成：

确定用于呈现第二可视化图表的图像区域包含的第二像素点数量；

按照与第二像素点数量对应的降采样参数，对处于局部查看区间内的原始数据进行降采样处理。

第三方面，本公开实施例提供了一种电子设备，该电子设备包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，该指令被至少一个处理器执行，以使至少一个处理器执行时能够实现如第一方面中任一实现方式描述的数据渲染方法。

第四方面，本公开实施例提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该计算机指令用于使计算机执行时能够实现如第一方面中任一实现方式描述的数据渲染方法。

本公开所提供的数据渲染方案，针对海量数据在进行可视化呈现过程中容易出现的卡顿问题，首先通过对原始数据进行第一次降采样操作，并将得到的第一精简数据作为数据可视化图表的数据源，进而得以从源头降低数据量、从而降低性能压力和处理耗时，进而降低出现卡顿的次数，进一步的，针对用户对全局显示状态的第一可视化图表下发的局部查看操作，考虑到局部查看操作通常将得以进行放大至能够呈现数据显示区间的级别进行具体显示，为了避免放大显示时因降采样处理导致的区间内数据采样点稀疏的问题，还仅对位于局部查看区间的部分原始数据再次进行降采样处理，并将得到的第二精简数据嵌入该局部查看区间的部分第一精简数据中，以提升该局部查看区间的数据显示密度，同时由于其他区间以及其它可视化图表的数据无需显示，也极大的降低了性能压力和处理耗时，也显著降低了出现卡顿的可能性。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本公开的其它特征、目的和优点将会变得更明显：

图1为本公开实施例提供的一种数据渲染方法的流程图；

图2为本公开实施例提供的另一种数据渲染方法的流程图；

图3为本公开实施例提供的在一应用场景下的数据渲染方法的流程示意图；

图4为本公开实施例提供的一种数据渲染装置的结构框图；

图5为本公开实施例提供的一种适用于执行数据渲染方法的电子设备的结构示意图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

请参考图1，图1为本公开实施例提供的一种数据渲染方法的流程图，其中包括以下步骤：

步骤101：获取目标装置在运行时所记录的表征运行状态的原始数据；

本步骤旨在由数据渲染方法的执行主体(例如用于对数据进行可视化呈现和分析的本地运算终端或运端运算终端，例如本地工作站或远端服务器，其上安装有对数据进行处理和对处理后数据进行可视化呈现的相关应用)获取目标装置在运行时所记录的表征运行状态的原始数据。

以聚变领域为例，目标装置可以是用于进行聚变反应的聚变装置，原始数据可以为通过聚变装置进行放电时产生的原始放电数据；若为制造型企业内的大型窑体，在其运转时会产生大量的温度数据、转速数据和振动数据，其共同作为该窑体在运行时的原始数据。

步骤102：对原始数据进行降采样处理，得到第一精简数据；

在步骤101的基础上，本步骤旨在由上述执行主体利用降采样算法对原始数据进行降采样处理，以得到经过降采样处理后得到精简的第一精简数据。

其中，降采样算法是一种用于降低数据集大小的技术，尤其适用于处理大型数据集以减少计算成本和提高效率。这种算法通常用于信号处理、数据压缩和机器学习等领域。降采样算法的一般步骤为：

1)数据选择：从原始数据集中选择要保留的样本或数据点。这个步骤可能是随机的，也可能根据特定的标准进行选择；

2)数据减少：选定的数据进行减少，使得最终的数据集大小变小。这可以通过多种方式完成：

随机采样(Random Sampling)：以随机方式选择要保留的数据点，确保采样的随机性；均匀采样(Uniform Sampling)：在数据分布上进行均匀采样，以保留数据分布的整体特征；聚类采样(Cluster Sampling)：使用聚类算法对数据进行聚类，然后从每个聚类中选择代表性样本；分层采样(Stratified Sampling)：根据数据的特征属性进行分层，然后在每个层级中进行采样，以保留每个层级的代表性。

降采样算法的选择取决于具体的应用场景和数据特征。在实际应用中，需要权衡保留数据集的代表性和减少计算成本之间的平衡。

3)评估和验证：在进行降采样之后，通常需要验证降采样对数据集的影响。这包括评估模型性能或分析数据的有效性，确保降采样不会丢失重要信息或引入偏差。

本实施例是具体将降采样算法应用于数据可视化这一具体场景，特别是在绘制大量数据时，降采样可以使图表更易于理解和分析。

步骤103：将第一精简数据作为预设的数据可视化图表应用的数据源，得到数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；

在步骤102的基础上，本步骤旨在由上述执行主体将第一精简数据作为预设的数据可视化图表应用的数据源，以使该数据可视化应用对输入的第一精简数据进行可视化处理，进而得到该数据可视化图表应用在默认的全局显示状态下呈现出的第一可视化图表。

其中，该第一精简数据可以用于形成多个不同的第一可视化图表，而第一可视化图表仅指在默认的、全局显示状态下(即在该显示状态下侧重显示全单张第一可视化图表的全部图表内容，并没有进行局部的放大或查看操作)，且数据可视化图表应用可具体在显示组件呈现出的显示界面上显示该第一可视化图表，置于显示界面上一次性是仅显示一张第一可视化图表还是多张，则可以根据实际情况灵活选择，并不做具体限定。

具体的，该预设的数据可视化图表应用可以具体选用Echarts，Echarts是一个开源的数据可视化库，它提供了丰富的图表类型和交互方式，使用户能够通过简单的配置实现复杂的数据可视化效果，其主要使用JavaScript编写，并且支持使用Json配置项来创建各种交互式图表。除Echarts外，还可以使用可以提供类似效果的D3.js、Highcharts、Chart.js、Plotly、Google Charts、NVD3、FusionCharts、以及Vega-Lite工具或应用，此处不做具体限定。

步骤104：响应于接收到针对第一可视化图表下发的局部查看操作，确定与局部查看操作对应的局部查看区间，并对处于局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将第二精简数据嵌入处于局部查看区间内的部分第一精简数据中，得到数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

在步骤103的基础上，本步骤旨在由上述执行主体在后续接收到用户针对全局显示状态下的第一可视化图表因处于需要对其中某个部分进行进一步的仔细查看的需求的局部查看操作(局部查看操作可以包括：对任意所述第一可视化图表进行的缩放、拖拽、分栏呈现操作中的至少一项)时，首先确定与该局部查看操作对应的局部查看区间(即用户所想要查看的局部数据区间，例如某个第一可视化图表中横轴上的某一部分)，并对处于局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将第二精简数据嵌入处于局部查看区间内的部分第一精简数据中，得到数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

具体的，在第二精简数据在嵌入该局部查看区间的部分第一精简数据中时，针对其中重合的部分数据，保留一份即可，针对其中未重合的部分则可以进一步看一下与其它数据之间的间隔程度，尽量保证嵌入后两部分数据之间为均匀分布状态。另外，得到第一精简数据和得到第二精简数据所分别采用的降采样算法可以相同也可以不同，可根据实际情况确定。

本公开实施例提供的数据渲染方法，针对海量数据在进行可视化呈现过程中容易出现的卡顿问题，首先通过对原始数据进行第一次降采样操作，并将得到的第一精简数据作为数据可视化图表的数据源，进而得以从源头降低数据量、从而降低性能压力和处理耗时，进而降低出现卡顿的次数，进一步的，针对用户对全局显示状态的第一可视化图表下发的局部查看操作，考虑到局部查看操作通常将得以进行放大至能够呈现数据显示区间的级别进行具体显示，为了避免放大显示时因降采样处理导致的区间内数据采样点稀疏的问题，还仅对位于局部查看区间的部分原始数据再次进行降采样处理，并将得到的第二精简数据嵌入该局部查看区间的部分第一精简数据中，以提升该局部查看区间的数据显示密度，同时由于其他区间以及其它可视化图表的数据无需显示，也极大的降低了性能压力和处理耗时，也显著降低了出现卡顿的可能性。

考虑到现有的数据可视化图表应用是一次性将接收到的所有待渲染数据均完整可视化渲染后才进入可操作状态，因此导致在进入可操作状态之前存在较长时间的卡顿过程(这一过程实际上就是完成渲染所有数据的过程)，而为了尽可能的避免这一过程带来的较长时间的卡顿，还可以将所有待渲染数据按照是否需要在首个界面进行展示，将用于形成不同顺序的图表的待渲染数据分开发送和接收，相较于同时传输页面上所有图表的所有数据，不仅提高了传输效率，且页面拿到数据后也不需要对完整而庞大数据进行操作而带来不必要的性能损耗，可以大大减小传输数据带来的用户感知，做到加载完一张图的数据就展示出一张图，不必等待传输完成完整数据、处理和渲染的过程，能提高用户体验。

一种具体的实现方式可参见图2提供的一种数据渲染方法的流程图，其中包括以下步骤：

步骤201：获取目标装置在运行时所记录的表征运行状态的由多个数据分片共同构成的原始数据；

其中，该数据分片对应的数据量与预设的最小数据传输单位相对应，例如可以以用以形成一张可视化图表所需的最大数据量作为该预设数据量，即以每张可视化图表作为该最小数据传输单位，那么在此情况下，每个数据分片将分别对应每张可视化图表。

数据的分片发送还可以参见这一示例：以聚变装置为例，该聚变装置上设置有若干各传感器，那么数据可视化图表应用的显示界面上的各个图表显示的就是各传感器在一段时间的信号，而每个用户都有自己的配置文件，比如用户A想在自己的页面1上显示四张图，第一张图为传感器1、3、5的信号，第二张图为2、4、6的信号，第三张图为7的信号，第四张图为8的信号，这些信息和其他信息合在一起成为配置文件A1，服务器在接收到A想查看页面1时，按照配置文件A1描述的，把传感器1、3、5的信号转为二进制临时文件，把地址合在一起发送给A的客户端，把2、4、6的信号转为二进制临时文件，把地址合在一起发送，7、8的单独发送，这一过程可被称为分片发送。该例子只是分片发送的最简单版本，在一些更高级的版本中，服务器端会还会对每路信号做运算后再发送。

步骤202：对构成原始数据的各数据分片均进行降采样处理，得到由各精简数据分片构成的第一精简数据；

在步骤201的基础上，本步骤旨在由上述执行主体对构成原始数据的各数据分片进行降采样处理，以得到由各个精简数据分片构成的第一精简数据。

对于由各数据分片构成的第一精简数据而言，在发送至数据可视化图表应用时，除可以采用简单的串行传输方式外，还可以采用并行传输，而为实现并行传输，可采用在前端代码里做区分的方式，即前端请求时，后端会按配置文件生成每个图每条线的临时文件(即为上面分片的内容)，把文件的地址随配置发送给前端，前端通过这些地址并行地拿数据。例如在仅有两个文件名的情况下，将分别对应x轴和y轴的数据；如果有三个文件名，则第一条为x轴，另外两条为y轴，以此类推。

步骤203：响应于接收到与用于形成首个数据可视化图表的精简数据分片，控制数据可视化图表应用在全局显示状态下先在显示界面中显示首个数据可视化图表；

在步骤202的基础上，本步骤旨在由上述执行主体在接收到与用于形成首个数据可视化图表的精简数据分片时，控制数据可视化图表应用在全局显示状态下先在显示界面中显示首个数据可视化图表，即仅需要接收到用于呈现首个数据可视化图表的数据包时，就触发一次呈现，并不需要等待所有后续的所有其它子精简数据包也接受完、渲染完才触发呈现操作，从而将等待时长显著缩短，避免了卡顿出现。

步骤204：响应于接收到与用于形成非首个数据可视化图表的精简数据分片，控制数据可视化图表应用在后台绘制非首个数据可视化图表直至接收到应在显示界面中呈现非首个数据可视化图表的指令时将其呈现在显示界面中。

在步骤203的基础上，本步骤旨在由上述执行主体在后续接收到与用于形成非首个数据可视化图表的精简数据分片时，控制数据可视化图表应用在后台绘制非首个数据可视化图表直至接收到应在显示界面中呈现非首个数据可视化图表的指令时将其呈现在显示界面中。

即而在用户在步骤203查看首个可视化图表的同时，剩余的精简数据分片还在持续接收、持续在后台进行可视化图表的生成和渲染，因此充分利用了用户查看首个可视化图表的时间，也规避了较长的首次查看等待耗时。

本实施例通过步骤201-步骤204提供了一种将大数据量的原始数据采用分片的方式进行发送，并提供了按单张可视化图表进行渲染、呈现的方案，避免了较长的首次查看等待耗时，也充分利用了用户查看首个可视化图表的时间。

在上述任意实施例的基础上，本公开所涉及使用的原始数据包括由多个原始点数据构成的原始线数据，而原始线数据以二进制数组形式进行记录和表示。即用于构成每张可视化图表额每张图上的每条线的数据会以二进制数组的形式发送和接收，相比于常规的以Json形式传输一整张图上所有的数据，该方法再次提高了传输效率，同时也提高了数据的精确度，以Json形式返回的数据需要降低数据的精度，也会导致传输的一部分数据有误差，而以二进制数据的形式传输不仅不需要降低数据精度，还提高了后续所形成的图表的数据精确度。

在上述任意实施例的基础上，该原始数据和该第一精简数据被常态化存储在预设的本地数据离线存储库中。具体的，在接收到发来的原始数据时，借助yux-storage(一个基于HTML5的IndexedDB封装的web本地数据离线存储库，它的存储空间相较于浏览器可以使用的内存而言很大，不少于250MB，无上限，其存储和获取方式也很简单方便，存取操作的延迟也很短，可以做到无感存取)将该数据存储到前端数据库IndexedDB中，不再占用程序的内存，在需要的时候再从本地数据库中取出，操作完成后销毁程序中的该数据，数据库中的数据保持不可变，在程序方面降低了浏览器内存的使用量，让更多内存使用在项目的操作上。

在上述任意实施例的基础上，考虑到屏幕上显示图表的区域大小基本是固定的，对应的像素点的多少也是基本固定的，过高的采样频率会造成某些点显示不出来，徒增性能消耗，过低则会造成曲线失真，因此需要一个合适的采样频率。在需要进行降采样时，查询当前图表显示到屏幕上对应的像素点，根据该值设置最终需要的点的个数，再结合当前区间位置、预设的降采样频率、原数据等确定采样频率，配合优化后的降采样算法，进行降采样操作，最终得到一个比较合适的数据。

一种具体的实现方式可参见图3所示的降采样方法，包括如下步骤：

步骤301：确定用于呈现第一可视化图表的图像区域包含的第一像素点数量；

步骤302：按照与第一像素点数量对应的降采样参数，对原始数据进行降采样处理；

步骤303：确定用于呈现第二可视化图表的图像区域包含的第二像素点数量；

步骤304：按照与第二像素点数量对应的降采样参数，对处于局部查看区间内的原始数据进行降采样处理。

即上述步骤主要体现了在进行降采样之前，需要结合要呈现出的可视化图像对应的图像区域包含的像素点数量(也可以理解为分辨率的大小)确定对应的降采样参数，以便于进行匹配的降采样处理，避免过低或过高的降采样。

为加深理解，本公开还结合一个具体应用场景，给出了一种具体的实现方案：

1、数据分片发送与接收：

在此操作中获取到需要展示的每张的具体数据。其具体步骤实施为：

1)：根据后端传送的每张图的数据来源的文件名获取到每张图的配置，该配置包括图的位置、图的标题、图上x、y轴的标题、图上每条线的label、图上每条线的请求文件名以及需显示数据的区间。

2)：根据配置中每条线的请求文件名获取到以二进制数组传输的数据，然后将每张图的配置以及数据整合到一起，存储到IndexDB数据库中。

2、将数据根据其所在图的位置存储至IndexDB中。其具体步骤为：

将上述获取到的每张图的原数据借助Yux-storage工具以“Key:Value”的形式存储在IndexDB数据库中，其中Key为每张图的“列号行号”(譬如第一列第一行的key为“11”)，Value为对应位置的原数据，最终在IndexDB数据库中的结构示意性地如下表1所示：

表1对应关系表

#	Key	Value
			0	“11”	[…]
1	“12”	[…]
			2	“13”	[…]
3	“14”	[…]

3、对存储到数据库中的原数据进行初次降采样操作。其具体步骤实施为：

首先根据传入的数据量确定初次降采样的宽度，经过检验，每条数据有100万个点时，初次采样得到20000个点可以比较好地均衡性能表现和图像细节，因此初始采样的区间宽度定为原数据长度和20000相除后向上取整，采样后的数据作为Echarts绘制图表的初始数据，并且存进IndexedDB数据库中。

4、将降采样后的数据以折线图的形式展示出来。其具体步骤实施为：

根据每张图刚开始的的配置文件，譬如图的标题、图上xy轴的标题、图上每条线的lable、显示数据的区间等生成ehcarts的参数配置项，将配置项放置到echarts中对图进行初始化，当有步骤3操作产生降采样后的数据时将数据放到echarts配置项中最终以折线图的形式呈现出来。

在对折线图图进行缩放或者拖动操作时对数据重新降采样的过程。

该过程包括步骤5-7：

5、右击图点击zoom或者pan可以对图进行缩放或者拖拽操作，这些操作都会触发Echarts本身的datazoom事件，在事件中可以获取到缩放后的x区间的最大最小值，在触发dataZoom事件后需要对数据进行重新降采样。

6、对缩放或者拖拽操作后的数据进行重新降采样，其具体步骤为：

1)从IndexedDB数据库中取出对应图表的原数据，记该数据为SourceData；

2)获取Echarts容器的在屏幕上所占的物理像素宽度，记该宽度为W；

3)用SourceData中的x轴数组长度除以宽度W，得到采样宽度，记为SampLength；

4)获取缩放后的x区间的最小和最大值，分别记为XMin和XMax；

5)分别用二分查找法在SourceData的x轴数组中寻找XMin和XMax的索引，记为XMinIndex和XMaxIndex，可以理解为XMin和XMax在x轴数据中的序号；

6)从IndexedDB中取出对应图表的初次降采样数据，记该数据为MainArray；

7)对SourceData进行循环操作，内容为：

a、对每个y轴数据，根据XMinIndex和XMaxIndex确定的区间和采样宽度SampLength进行降采样，降采样得到的数组记为SampArray，如果SampLength等于或者大于XMinIndex和XMaxIndex确定的区间的数据量，则表明已经不需要降采样，SampArray直接等于该区间的原数据；

b、分别用二分查找法在MainArray中找到与XMin和XMax最接近的x值的索引，记为StartIndex和EndIndex

c、从MainArray中获取到对应当前循环的y轴数据，记为MainArray[i]；

d、将MainArray[i]中StartIndex到EndIndex的数据截取下来，替换成SampArray；

循环完成后，MainArray即为缩放或拖动后需要展示的数据，将该数据交给对应的Echarts，完成数据的重新降采样。

7：将重新降采样后的数据以折线图的形式展示出来，当有步骤6重新降采样的数据产生时对图Echarts的配置项进行修改，将最新采样后的数据放入图中展示出来。

根据上述内容，从数据请求到数据处理以及对图操作时都做了一定的优化处理来减缓对浏览器内存以及性能的压力，从而实现我们在显示处理百万级数据时网页不卡顿的效果。

进一步参考图4，作为对上述各图所示方法的实现，本公开提供了一种数据渲染装置的一个实施例，该装置实施例与图1所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图4所示，本实施例的数据渲染装置400可以包括：原始数据获取单元401、第一降采样单元402、全局显示单元403、局部显示单元404。其中，原始数据获取单元401，被配置成获取目标装置在运行时所记录的表征运行状态的原始数据；第一降采样单元402，被配置成对所述原始数据进行降采样处理，得到第一精简数据；全局显示单元403，被配置成将所述第一精简数据作为预设的数据可视化图表应用的数据源，得到所述数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；局部显示单元404，被配置成响应于接收到针对所述第一可视化图表下发的局部查看操作，确定与所述局部查看操作对应的局部查看区间，并对处于所述局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将所述第二精简数据嵌入处于所述局部查看区间内的部分第一精简数据中，得到所述数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

在本实施例中，数据渲染装置400中：原始数据获取单元401、第一降采样单元402、全局显示单元403、局部显示单元404的具体处理及其所带来的技术效果可分别参考图1对应实施例中的步骤101-104的相关说明，在此不再赘述。

在本实施例的一些其它实现方式中，所述原始数据获取单元被进一步配置成：

获取所述目标装置在运行时所记录的表征运行状态的由多个数据分片共同构成的原始数据；其中，所述数据分片对应的数据量与预设的最小数据传输单位相对应；

对应的，所述第一降采样单元402可以被进一步配置成：

对构成所述原始数据的各数据分片均进行所述降采样处理，得到由各精简数据分片构成的第一精简数据；

对应的，所述全局显示单元403可以被进一步配置成：

响应于接收到与用于形成首个数据可视化图表的精简数据分片，控制所述数据可视化图表应用在全局显示状态下先在所述显示界面中显示所述首个数据可视化图表；

响应于接收到与用于形成非首个数据可视化图表的精简数据分片，控制所述数据可视化图表应用在后台绘制所述非首个数据可视化图表直至接收到应在所述显示界面中呈现所述非首个数据可视化图表的指令时将其呈现在所述显示界面中。

在本实施例的一些其它实现方式中，所述原始数据包括由多个原始点数据构成的原始线数据，所述原始线数据以二进制数组形式进行记录和表示。

在本实施例的一些其它实现方式中，所述原始数据和所述第一精简数据被常态化存储在预设的本地数据离线存储库中。

在本实施例的一些其它实现方式中，所述局部查看操作包括：对任意所述第一可视化图表进行的缩放、拖拽、分栏呈现操作中的至少一项。

在本实施例的一些其它实现方式中，所述第一降采样单元402可以被进一步配置成：

确定用于呈现所述第一可视化图表的图像区域包含的第一像素点数量；

按照与所述第一像素点数量对应的降采样参数，对所述原始数据进行降采样处理。

在本实施例的一些其它实现方式中，所述局部显示单元404可以包括被配置成对处于所述局部查看区间内的原始数据进行降采样处理的第二降采样子单元，所述第二降采样子单元可以被进一步配置成：

确定用于呈现所述第二可视化图表的图像区域包含的第二像素点数量；

按照与所述第二像素点数量对应的降采样参数，对处于所述局部查看区间内的原始数据进行降采样处理。

本实施例作为对应于上述方法实施例的装置实施例存在，本实施例提供的数据渲染装置，针对海量数据在进行可视化呈现过程中容易出现的卡顿问题，首先通过对原始数据进行第一次降采样操作，并将得到的第一精简数据作为数据可视化图表的数据源，进而得以从源头降低数据量、从而降低性能压力和处理耗时，进而降低出现卡顿的次数，进一步的，针对用户对全局显示状态的第一可视化图表下发的局部查看操作，考虑到局部查看操作通常将得以进行放大至能够呈现数据显示区间的级别进行具体显示，为了避免放大显示时因降采样处理导致的区间内数据采样点稀疏的问题，还仅对位于局部查看区间的部分原始数据再次进行降采样处理，并将得到的第二精简数据嵌入该局部查看区间的部分第一精简数据中，以提升该局部查看区间的数据显示密度，同时由于其他区间以及其它可视化图表的数据无需显示，也极大的降低了性能压力和处理耗时，也显著降低了出现卡顿的可能性。

根据本公开的实施例，本公开还提供了一种电子设备，该电子设备包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，该指令被至少一个处理器执行，以使至少一个处理器执行时能够实现上述任意实施例所描述的数据渲染方法。

根据本公开的实施例，本公开还提供了一种可读存储介质，该可读存储介质存储有计算机指令，该计算机指令用于使计算机执行时能够实现上述任意实施例所描述的数据渲染方法。

图5示出了可以用来实施本公开的实施例的示例电子设备500的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图5所示，设备500包括计算单元501，其可以根据存储在只读存储器(ROM)502中的计算机程序或者从存储单元508加载到随机访问存储器(RAM)503中的计算机程序，来执行各种适当的动作和处理。在RAM 503中，还可存储设备500操作所需的各种程序和数据。计算单元501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

设备500中的多个部件连接至I/O接口505，包括：输入单元506，例如键盘、鼠标等；输出单元507，例如各种类型的显示器、扬声器等；存储单元508，例如磁盘、光盘等；以及通信单元509，例如网卡、调制解调器、无线通信收发机等。通信单元509允许设备500通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元501执行上文所描述的各个方法和处理，例如数据渲染方法。例如，在一些实施例中，数据渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元508。在一些实施例中，计算机程序的部分或者全部可以经由ROM 502和/或通信单元509而被载入和/或安装到设备500上。当计算机程序加载到RAM 503并由计算单元501执行时，可以执行上文描述的数据渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元501可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行数据渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决传统物理主机与虚拟专用服务器(VPS，Virtual Private Server)服务中存在的管理难度大，业务扩展性弱的缺陷。

根据本公开实施例的技术方案，针对海量数据在进行可视化呈现过程中容易出现的卡顿问题，首先通过对原始数据进行第一次降采样操作，并将得到的第一精简数据作为数据可视化图表的数据源，进而得以从源头降低数据量、从而降低性能压力和处理耗时，进而降低出现卡顿的次数，进一步的，针对用户对全局显示状态的第一可视化图表下发的局部查看操作，考虑到局部查看操作通常将得以进行放大至能够呈现数据显示区间的级别进行具体显示，为了避免放大显示时因降采样处理导致的区间内数据采样点稀疏的问题，还仅对位于局部查看区间的部分原始数据再次进行降采样处理，并将得到的第二精简数据嵌入该局部查看区间的部分第一精简数据中，以提升该局部查看区间的数据显示密度，同时由于其他区间以及其它可视化图表的数据无需显示，也极大的降低了性能压力和处理耗时，也显著降低了出现卡顿的可能性。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (10)

1.一种数据渲染方法，其特征在于，包括：

获取目标装置在运行时所记录的表征运行状态的原始数据；

对所述原始数据进行降采样处理，得到第一精简数据；

将所述第一精简数据作为预设的数据可视化图表应用的数据源，得到所述数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；

响应于接收到针对所述第一可视化图表下发的局部查看操作，确定与所述局部查看操作对应的局部查看区间，并对处于所述局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将所述第二精简数据嵌入处于所述局部查看区间内的部分第一精简数据中，得到所述数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

2.根据权利要求1所述的方法，其特征在于，所述获取目标装置在运行时所记录的表征运行状态的原始数据，包括：

获取所述目标装置在运行时所记录的表征运行状态的由多个数据分片共同构成的原始数据；其中，所述数据分片对应的数据量与预设的最小数据传输单位相对应；

对应的，对所述原始数据进行降采样处理，得到第一精简数据，包括：

对构成所述原始数据的各数据分片均进行所述降采样处理，得到由各精简数据分片构成的第一精简数据；

对应的，所述将所述第一精简数据作为预设的数据可视化图表应用的数据源，得到所述数据可视化图表应用在全局显示状态下呈现出的第一可视化图表，包括：

响应于接收到与用于形成首个数据可视化图表的精简数据分片，控制所述数据可视化图表应用在全局显示状态下先在所述显示界面中显示所述首个数据可视化图表；

响应于接收到与用于形成非首个数据可视化图表的精简数据分片，控制所述数据可视化图表应用在后台绘制所述非首个数据可视化图表直至接收到应在所述显示界面中呈现所述非首个数据可视化图表的指令时将其呈现在所述显示界面中。

3.根据权利要求1所述的方法，其中，所述原始数据包括由多个原始点数据构成的原始线数据，所述原始线数据以二进制数组形式进行记录和表示。

4.根据权利要求1所述的方法，其中，所述原始数据和所述第一精简数据被常态化存储在预设的本地数据离线存储库中。

5.根据权利要求1所述的方法，其中，所述局部查看操作包括：对任意所述第一可视化图表进行的缩放、拖拽、分栏呈现操作中的至少一项。

6.根据权利要求1-5任一项所述的方法，其中，所述对所述原始数据进行降采样处理，包括：

确定用于呈现所述第一可视化图表的图像区域包含的第一像素点数量；

按照与所述第一像素点数量对应的降采样参数，对所述原始数据进行降采样处理。

7.根据权利要求6所述的方法，其中，所述对处于所述局部查看区间内的原始数据进行降采样处理，包括：

确定用于呈现所述第二可视化图表的图像区域包含的第二像素点数量；

按照与所述第二像素点数量对应的降采样参数，对处于所述局部查看区间内的原始数据进行降采样处理。

8.一种数据渲染装置，其特征在于，包括：

原始数据获取单元，被配置成获取目标装置在运行时所记录的表征运行状态的原始数据；

第一降采样单元，被配置成对所述原始数据进行降采样处理，得到第一精简数据；

全局显示单元，被配置成将所述第一精简数据作为预设的数据可视化图表应用的数据源，得到所述数据可视化图表应用在全局显示状态下呈现出的第一可视化图表；

局部显示单元，被配置成响应于接收到针对所述第一可视化图表下发的局部查看操作，确定与所述局部查看操作对应的局部查看区间，并对处于所述局部查看区间内的原始数据进行降采样处理，得到第二精简数据，且将所述第二精简数据嵌入处于所述局部查看区间内的部分第一精简数据中，得到所述数据可视化图表应用在局部显示状态下呈现出的第二可视化图表。

9.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的数据渲染方法。

10.一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行权利要求1-7中任一项所述的数据渲染方法。