A method, device and equipment for web client to process complex big data, and a storage medium

By building a Node.js local thread service on the web client to process autonomous driving data packets, classifying and aggregating them according to attribute features and generating cached data packets, the problem of long rendering processing time was solved, achieving efficient rendering of target charts and improving data processing efficiency and user experience.

CN114840600BActive Publication Date: 2025-11-18GUANGZHOU WERIDE TECH LTD CO
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202210300602.3
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-03-25
Publication Date
2025-11-18
Estimated Expiration
2042-03-25

AI Technical Summary

Technical Problem

In the field of autonomous driving, web clients take a long time to render and process complex big data, and existing technologies cannot efficiently handle the problem of complex big data.

Method used

A local thread service based on Node.js is built on the web client. By obtaining the raw data packets from the server, the initial chart is generated by classifying and aggregating them according to attribute features. The filtering and sorting conditions of user interaction are received, and cached data packets are generated. The local thread service is used for preprocessing to generate rendering data packets, and finally the target chart is rendered on the client.

Benefits of technology

It improves data processing efficiency, reduces the number of data processing operations, lowers communication latency, enhances user experience, solves the problem of long rendering time for complex big data, and improves rendering efficiency.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114840600B_ABST
    Figure CN114840600B_ABST
Patent Text Reader

Abstract

The application belongs to the technical field of big data processing, and discloses a method and device for processing complex big data of a web client, equipment and a storage medium, the method comprising: obtaining original data packets of a server, the original data packets being nested structures and containing object objects, state features, attribute features and corresponding attribute values; arranging the original data packets according to the order of the object objects, the state features and the attribute features, merging and summarizing the state features and the attribute features of the same object objects to obtain cache data packets; obtaining rendering data packets based on the cache data packets and filtering conditions of a received user interaction process; and rendering and generating target charts based on the rendering data packets. The application has the effect of improving data rendering processing efficiency.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of big data processing technology, and in particular to a method, apparatus, device and storage medium for processing complex big data in a web client. Background Technology

[0002] In the field of autonomous driving, there are many objects around the vehicle, and each object corresponds to multiple states. Each state has dozens of attributes. The attributes of each object itself include speed, type, etc., while the attributes of the objective environment include longitude, latitude, etc. The attributes of human subjective judgment include whether it affects the driving of the main vehicle, importance level, etc. Each attribute also contains different measurement parameter values. Therefore, the data packet structure in the field of autonomous driving is extremely complex, and its data volume often reaches hundreds of thousands or even millions of records.

[0003] In the data analysis process, it is often necessary to render these raw data packets into charts. To filter out the data that users are interested in, one can directly use browser resources on the web client to perform calculations and render the large amount of data, or send the filtering conditions to the server through the web client. The server will then perform calculations on the large amount of data based on the filtering conditions and send the processed data back to the web client for rendering and display.

[0004] Regarding the aforementioned technologies, the inventors discovered that the rendering process of raw data packets is time-consuming. Summary of the Invention

[0005] To improve the efficiency of rendering, this application provides a method, apparatus, device, and storage medium for web clients to process complex big data.

[0006] Firstly, this application provides a method for web clients to process complex big data, which has the characteristic of improving data processing efficiency.

[0007] This application is achieved through the following technical solution:

[0008] A method for processing complex big data in a web client, applied to both the web client and server, includes the following steps:

[0009] Obtain the original data packet from the server. The original data packet has a nested structure and contains the object, state features, attribute features, and corresponding attribute values.

[0010] After classifying and aggregating the original data packets according to attribute features, they are rendered in the web client to generate an initial chart.

[0011] Set up a Node.js-based local thread service on the server of the web client, and start the local thread service;

[0012] Receive information about the user's click or selection operation on the initial chart to obtain filtering conditions;

[0013] Receive information from the user regarding the sorting operation of the filtering conditions, and obtain the sorting conditions;

[0014] Send the filtering conditions and the sorting conditions to the server;

[0015] The server is requested to arrange the original data packets in the order of object, state characteristics, and attribute characteristics, and to merge and summarize the state characteristics and attribute characteristics of the same object to obtain cached data packets;

[0016] Obtain the cached data packet from the server and store the cached data packet in the cache of the local thread service;

[0017] The system receives the filtering conditions of the user interaction process sent by the web client, obtains the rendering data packet based on the cached data packet in the local thread service, and sends the rendering data packet to the web client.

[0018] The target chart is generated by rendering the chart in the web client based on the rendering data package.

[0019] In a preferred embodiment, this application can be further configured to: receive filtering conditions of the user interaction process sent by the Web client, and obtain the rendering data packet based on the cached data packet in the local thread service, including:

[0020] Receive the filtering conditions of the user interaction process sent by the Web client, and obtain the cached data packets in the local thread service based on the filtering conditions;

[0021] Create an array for each attribute feature;

[0022] Iterate through the ID value of each object and store it in the corresponding attribute feature array;

[0023] Then, the state features, attribute features, and attribute feature values ​​of the corresponding object are stored in the corresponding attribute feature array; the array is converted into a data packet of the target format to obtain the rendering data packet.

[0024] In a preferred embodiment, this application can be further configured to: the step of rendering a chart in the web client based on the rendering data package to generate a target chart includes:

[0025] The rendering data package is input into the chart plugin of the web client, and the target chart is automatically rendered.

[0026] Secondly, this application provides a web client device for processing complex big data, which improves data processing efficiency.

[0027] This application is achieved through the following technical solution:

[0028] A device for processing complex big data in a web client, applied to both web client and server sides, comprising:

[0029] The data acquisition module is used to acquire the raw data packets from the server. The raw data packets have a nested structure and contain object objects, state features, attribute features, and corresponding attribute values.

[0030] The initial chart generation module is used to classify and aggregate the original data packet according to attribute features, and then render it in the web client to generate an initial chart.

[0031] The local thread setup module is used to set up a Node.js-based local thread service on the server of the web client and start the local thread service.

[0032] The condition acquisition module is used to receive information about the user's click or selection operation on the initial chart to obtain the filtering conditions; receive information about the user's sorting operation on the filtering conditions to obtain the sorting conditions; and send the filtering conditions and the sorting conditions to the server.

[0033] The cache packet generation module is used to request the server to arrange the original data packet in the order of object, state characteristics and attribute characteristics, and to merge and summarize the state characteristics and attribute characteristics of the same object to obtain the cache data packet;

[0034] The local conversion module is used to obtain the cached data packet from the server and store the cached data packet in the cache of the local thread service; receive the filtering conditions of the user interaction process sent by the web client, obtain the rendering data packet according to the cached data packet in the local thread service, and send the rendering data packet to the web client;

[0035] The rendering module is used to render the chart in the web client based on the rendering data package, and generate the target chart.

[0036] Thirdly, this application provides a computer device that improves data processing efficiency.

[0037] This application is achieved through the following technical solution:

[0038] A computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of any of the above-described methods for processing complex big data in a web client.

[0039] Fourthly, this application provides a computer-readable storage medium that improves data processing efficiency.

[0040] This application is achieved through the following technical solution:

[0041] A computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of any of the above-described methods for processing complex big data in a web client.

[0042] In summary, compared with the prior art, the beneficial effects of the technical solution provided in this application include at least the following:

[0043] 1. Obtain the complex and large-volume original data packets from the server; arrange the original data packets in the order of object, state features, and attribute features, merge and summarize the state features and attribute features of the same object, that is, merge all the data of the same object into one object, and then obtain the cached data packet, that is, all the data of all objects, to preprocess the original data packets, reduce the number of data processing operations when performing calculation operations based on the original data packets, improve data processing efficiency, and facilitate subsequent calculation operations; based on the cached data packets and the filtering conditions of the received user interaction process, obtain the rendering data packet; based on the rendering data packet, render and generate the target chart, so as to convert the cached data packet into the rendering data packet according to the filtering conditions, perform data processing in advance, improve the efficiency of rendering processing, and at the same time, the rendering data packet is the data that meets the conditions obtained by filtering according to the filtering conditions of the received user interaction process, without the user having to perform secondary filtering of the generated chart to obtain the target chart, and the rendering processing efficiency is even higher; therefore, a method for web client to process complex big data solves the problem of time-consuming repeated filtering and sorting of complex big data, reduces the number of data processing operations when performing calculation operations based on the original data packets, improves the efficiency of rendering processing, and improves the problem of slow processing speed due to insufficient performance when using browser resources on web clients to perform calculations on large-volume and complex data;

[0044] 2. Based on the filtering conditions of the cached data packets and the received user interaction process, the data packets are stored in the corresponding attribute feature array according to the ID value, status feature, attribute feature and attribute feature value, and converted into the target format data packets so that the rendering data packets can be used directly to draw charts. The cached data packets are converted into the data format that can be used to render charts in advance, eliminating the need for data format conversion during the rendering process, which further improves the efficiency of rendering processing.

[0045] 3. A local thread service is set up, and the rendering data packets processed by the local thread service are sent back to the web client. This eliminates the need for the server to frequently transmit large amounts of data to the web client over the network. Furthermore, the web client and the local thread service are started and deployed entirely within the software, requiring no installation from the user. In addition, all transmitted data packets are in JavaScript data format, eliminating the need for data conversion between the web client and the local thread service, which greatly reduces communication latency and improves the user experience. Attached Figure Description

[0046] Figure 1 This is a flowchart illustrating a method for processing complex big data using a web client, provided as an exemplary embodiment of this application.

[0047] Figure 2 This is a flowchart illustrating a method for processing complex big data in a web client, provided as an exemplary embodiment of this application, involving the merging of data packets.

[0048] Figure 3 This application provides an exemplary embodiment of a method for processing complex big data using a web client, showing a frame of an image on a 3D map.

[0049] Figure 4 This is an example diagram illustrating the classification of attribute feature types of object A in a web client method for processing structurally complex big data, provided as an exemplary embodiment of this application.

[0050] Figure 5 This is a schematic diagram of the data structure for rendering data packets in a method for processing complex big data in a web client, provided as an exemplary embodiment of this application.

[0051] Figure 6 This is a schematic diagram illustrating the method for obtaining filtering conditions in a web client for processing structurally complex big data, provided as an exemplary embodiment of this application.

[0052] Figure 7 The target graph is rendered in a method for processing structurally complex big data by a web client, which is provided as an exemplary embodiment of this application.

[0053] Figure 8 This is a structural block diagram of a web client apparatus for processing complex big data, provided as an exemplary embodiment of this application. Detailed Implementation

[0054] This specific embodiment is merely an explanation of this application and is not intended to limit it. After reading this specification, those skilled in the art can make modifications to this embodiment without contributing any inventive step, but such modifications are protected by patent law as long as they fall within the scope of the claims of this application.

[0055] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0056] Furthermore, the term "and / or" in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Additionally, the character " / " in this article, unless otherwise specified, generally indicates that the preceding and following related objects have an "or" relationship.

[0057] The embodiments of this application will now be described in further detail with reference to the accompanying drawings.

[0058] Reference Figure 1 This application provides a method for a web client to process complex big data, and the main steps of the method are described below.

[0059] S1: Obtain the original data packet from the server. The original data packet has a nested structure and contains the object, state characteristics, attribute characteristics and corresponding attribute values.

[0060] S2: Arrange the original data packets in the order of object, state characteristics, and attribute characteristics, and merge and summarize the state characteristics and attribute characteristics of the same object to obtain the cached data packets;

[0061] S3: Based on the filtering conditions of the cached data packets and the received user interaction process, the rendered data packets are obtained;

[0062] S4: Render the target chart based on the rendering data package.

[0063] Reference Figure 2S3: The steps to obtain the rendered data packet based on the filtering conditions of the cached data packet and the received user interaction process include:

[0064] S31: Based on the filtering conditions of cached data packets and received user interaction processes, create an array for each attribute feature;

[0065] S32: Iterate through the ID value of each object and store it in the corresponding attribute feature array;

[0066] S33: Then store the state characteristics, attribute characteristics, and attribute characteristic values ​​of the corresponding object into the corresponding attribute characteristic array;

[0067] S34: Convert the array into a data packet of the target format to obtain the rendering data packet.

[0068] The following section uses one embodiment of this application to illustrate a method for processing complex big data using a web client, and details the specific process steps of the above embodiments.

[0069] Reference Figure 3 In a frame of a 3D map, the center point is the vehicle that took the picture. There are many objects around the center point, such as A, B, C, D, E, F, G, and H. There are usually tens of thousands of objects, which will not be elaborated here.

[0070] Based on a single frame of an image from a 3D map, the raw data package for autonomous driving is obtained. Since each object has multiple states, each topic represents one state, and each state has dozens of parameter attributes, these are categorized according to their type. Each category contains one attribute feature, which includes baseline, ticket, and label. The data has a nested structure, formatted as follows:

[0071] bags-topic-feature-filterName-baseline / ticket / label.

[0072] The data is nested layer by layer, and each object has an array of tens of thousands of characters.

[0073] Reference Figure 4 For example, the features of object A itself include speed and type; the features of objective environmental attributes include longitude and latitude; and the features of subjective human judgment attributes include whether it affects the driving of the main vehicle and its importance level. Each attribute includes three types: label, ticket, and baseline, and their corresponding values ​​${value}.

[0074] The server sends raw data packets, with features as the smallest granularity, to the web client. Each data packet contains several attributes, such as latitude or longitude, vehicle status, sensor information, and camera parameters. The data packet format is: 202111091907-topic1-feature1.bag, used to distinguish data packets of different topics and features within the bag.

[0075] The web client obtains the original data packet from the server. The original data packet has a nested structure and contains the object, state characteristics, attribute characteristics and corresponding attribute values.

[0076] The web client first categorizes and aggregates the raw data packets according to their attribute characteristics to render an initial chart. This initial chart is then used to obtain filtering and sorting criteria based on user actions such as clicking or selecting elements on the initial chart. Because the data structure of the raw data packets cannot be directly used for pie charts, line charts, etc., it is necessary to categorize and aggregate the raw data packets according to their attribute characteristics so that the data packets can be used by the charts.

[0077] Each attribute feature's data package can only be displayed in one type of graph, such as a pie chart, bar chart, or line chart.

[0078] Based on user clicks or selections on the initial charts, filtering conditions are obtained. Specifically, preset interaction methods, such as clicks, drags, and selections, allow users to choose the data content to be rendered. Clicking on a pie chart or bar chart, or selecting a line chart, will generate corresponding filtering conditions. Multiple filtering conditions can be used, such as selecting a speed range of 10-20 m / s or choosing a car model like the Nissan Sylphy. Based on these filtering conditions, data that meets the criteria can be selected to obtain the data that the user is interested in.

[0079] Based on information about the user's sorting operation of filtering conditions in a preset order, sorting conditions are obtained to sort the data of interest to the user. In this embodiment, the sorting conditions are selected in ascending or descending order.

[0080] The filtering and sorting criteria form the selection criteria for the user interaction process and are sent to the server.

[0081] Next, the server arranges the original data packets in the order of object, state features, and attribute features, and merges and summarizes the state features and attribute features of the same object. For example, all the data of object A is merged into one object according to the hierarchical relationship of topic-features, and the id is promoted to the outermost level. At this time, the object contains all the data of object A, and all the object data is put into an array and merged into one data packet to obtain the cached data packet.

[0082] Based on the Node.js runtime environment, a local thread service is set up, and the web client imports the cached data packets and filtering conditions sent by the server into the local thread service.

[0083] The local thread service provides the filtering conditions of the cached data packets and the received user interaction process to the local thread service. The local thread service stores the cached data packets as raw data in the cache. Subsequently, it only needs to retrieve the cached data packets from the cache to perform data calculation and processing, which reduces the number of data processing operations when performing calculation operations based on raw data packets and improves data processing efficiency.

[0084] The local thread service creates an array for each attribute feature based on the filtering conditions of cached data packets and received user interaction processes. At this time, the array is empty. It iterates through the ID value of each object and stores it in the corresponding attribute feature array. Then, it stores the state feature, attribute feature, and attribute feature value of the corresponding object in the corresponding attribute feature array to classify the data according to the topic-features hierarchy. At this time, nested structure data is converted into non-nested structure data.

[0085] The local thread service converts the array into a data packet of the target format to obtain a rendering data packet, which can be directly used in the chart. This pre-converts the cached data packet into a data format usable for rendering the chart, eliminating the need for data format conversion during rendering and further improving rendering efficiency. The specific data structure of the rendering data packet is as follows: Figure 5 As shown.

[0086] For example, refer to Figure 6 The user selects a speed value of 10-30 by dragging and dropping in the chart. Therefore, the web client passes the filter condition `{speed:[10,30]}` to the local thread service via JSON. Upon receiving the filter condition, the local thread service iterates through the cached data packets to filter out data with speed values ​​within the range [10,30], obtains the rendered data packet, and then sends the rendered data packet back to the web client via JSON. This eliminates the need for the server to frequently transmit large amounts of data to the web client over the network. Furthermore, the web client and local thread service are entirely launched and deployed within the software, requiring no installation from the user. Simultaneously, the use of JSON for data transmission means that the data packets exchanged between the local thread service and the web client are JavaScript data packets—data structures that can be directly used by JavaScript without data parsing. Communication between the web client and the local thread service requires no data conversion, significantly reducing communication latency and improving the user experience.

[0087] The web client inputs the obtained rendering data package into the chart plugin, which automatically renders and generates the target chart, such as... Figure 7As shown. Using a chart plugin to render and generate charts is simple and easy to implement.

[0088] In this embodiment, the target format is a data packet format with the suffix .chart.

[0089] In this embodiment, the chart plugin can be the Antv plugin, which allows data packets in target format with the .chart extension to be input into the Antv plugin and automatically render the chart.

[0090] In this embodiment, the server-side data packets can be named as follows:

[0091] 202111091907-topic1-feature1.bag.

[0092] The data packets sent from the web client to the local thread service can be named as follows:

[0093] 202111091907-topic1-feature1-${filters name}-${filters value}.bag.

[0094] The data packets sent back to the web client by the local thread service can be named as follows:

[0095] 202111091907-topic1-feature1-${filters name}-${filters value}.chart.

[0096] The server-side data packets contain raw data, and the charts you need can be found directly based on their names.

[0097] The web client adds a filter name and filter value to the data packets of the local thread service, which are the names and values ​​of the corresponding filter items; the data packets that the local thread service sends back to the web client are the results filtered according to the filter items, and these data packets can be directly used for charts.

[0098] The web client can render and generate the target chart based on the rendering data package.

[0099] Therefore, a method for processing complex big data in a web client involves obtaining a large amount of complex raw data packets from the server; arranging the raw data according to object, state features, and attribute features; merging and summarizing the state features and attribute features of the same object (i.e., merging all data of the same object into one object) to obtain a cached data packet, i.e., all data of all objects, to preprocess the raw data packet, reducing the number of data processing operations when performing calculations based on the raw data packet, improving data processing efficiency, and facilitating subsequent calculation operations; obtaining a rendered data packet based on the cached data packet and the filtering conditions of the received user interaction process; and rendering the target chart based on the rendered data packet. This method converts the cached data packet into a rendered data packet according to the filtering conditions, performing data processing in advance, thus improving rendering efficiency. Furthermore, the rendered data packet is data that meets the filtering conditions obtained from the received user interaction process, eliminating the need for secondary filtering by the user to obtain the target chart, resulting in even higher rendering efficiency. This method solves the problem of time-consuming repeated filtering and sorting of complex big data, reduces the number of data processing operations when performing calculations based on the raw data packet, improves rendering efficiency, and alleviates the problem of slow processing speed due to insufficient performance when using browser resources on a web client for large-volume and complex data calculations.

[0100] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0101] Reference Figure 8 This application also provides an apparatus for processing structurally complex big data using a web client. This apparatus corresponds one-to-one with the method for processing structurally complex big data using a web client described in the above embodiments. The apparatus for processing structurally complex big data using a web client includes:

[0102] The data acquisition module is used to acquire the raw data packets from the server. The raw data packets have a nested structure and contain object objects, state characteristics, attribute characteristics, and corresponding attribute values.

[0103] The caching module is used to arrange the original data packets in the order of object, state characteristics, and attribute characteristics, and to merge and summarize the state characteristics and attribute characteristics of the same object to obtain the cached data packets.

[0104] The conversion module is used to obtain the rendered data packet based on the filtering conditions of the cached data packet and the received user interaction process;

[0105] The rendering module is used to render and generate the target chart based on the rendering data package.

[0106] Furthermore, a device for processing complex big data in a web client also includes:

[0107] The initial chart module is used to classify and aggregate the raw data according to attribute features, and then render and generate the initial chart.

[0108] Furthermore, a device for processing complex big data in a web client also includes:

[0109] The local thread service module is used to build a thread service on the local machine based on the Node.js runtime environment. This allows the web client to import cached data packets and filter conditions into the local thread service, and then process the data packets processed by the local thread service and send them back to the web client.

[0110] Specific limitations regarding the device for processing complex big data using a web client can be found in the above description of the method for processing complex big data using a web client, and will not be repeated here. The modules in the aforementioned device for processing complex big data using a web client can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0111] In one embodiment, a computer device is provided, which may be a server. The computer device includes a processor, memory, a network interface, and a database connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface is used to communicate with external terminals via a network connection. When the computer program is executed by the processor, it implements a method for processing complex large datasets using any web client.

[0112] In one embodiment, a computer-readable storage medium is provided, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps:

[0113] S1: Obtain the original data packet from the server. The original data packet has a nested structure and contains the object, state characteristics, attribute characteristics and corresponding attribute values.

[0114] S2: Arrange the original data packets in the order of object, state characteristics, and attribute characteristics, and merge and summarize the state characteristics and attribute characteristics of the same object to obtain the cached data packets;

[0115] S3: Based on the filtering conditions of the cached data packets and the received user interaction process, the rendered data packets are obtained;

[0116] S4: Render the target chart based on the rendering data package.

[0117] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0118] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above.

Claims

1. A method for processing complex big data using a web client, characterized in that, Applied to both web clients and servers, it includes the following steps: Obtain the original data packet from the server. The original data packet has a nested structure and contains the object, state features, attribute features, and corresponding attribute values. After classifying and aggregating the original data packets according to attribute features, they are rendered in the web client to generate an initial chart. Set up a Node.js-based local thread service on the server of the web client, and start the local thread service; Receive information about the user's click or selection operation on the initial chart to obtain filtering conditions; Receive information from the user regarding the sorting operation of the filtering conditions, and obtain the sorting conditions; Send the filtering conditions and the sorting conditions to the server; The server is requested to arrange the original data packets in the order of object, state characteristics, and attribute characteristics, and to merge and summarize the state characteristics and attribute characteristics of the same object to obtain cached data packets; Obtain the cached data packet from the server and store the cached data packet in the cache of the local thread service; The system receives the filtering conditions of the user interaction process sent by the web client, obtains the rendering data packet based on the cached data packet in the local thread service, and sends the rendering data packet to the web client. The target chart is generated by rendering the chart in the web client based on the rendering data package.

2. The method for processing complex big data using a web client according to claim 1, characterized in that, The steps of receiving the filtering conditions of the user interaction process sent by the web client and obtaining the rendering data packet based on the cached data packet in the local thread service include: Receive the filtering conditions of the user interaction process sent by the Web client, and obtain the cached data packets in the local thread service based on the filtering conditions; Create an array for each attribute feature; Iterate through the ID value of each object and store it in the corresponding attribute feature array; Then store the state characteristics, attribute characteristics, and attribute characteristic values ​​of the corresponding object into the corresponding attribute characteristic array; The array is converted into a data packet of the target format to obtain the rendered data packet.

3. The method for processing complex big data using a web client according to claim 1, characterized in that, The steps of rendering a chart in the web client based on the rendering data package and generating a target chart include: The rendering data package is input into the chart plugin of the web client, and the target chart is automatically rendered.

4. A web client device for processing large amounts of complex data, characterized in that, Applied to both web clients and servers, including: The data acquisition module is used to acquire the raw data packets from the server. The raw data packets have a nested structure and contain object objects, state features, attribute features, and corresponding attribute values. The initial chart generation module is used to classify and aggregate the original data packet according to attribute features, and then render it in the web client to generate an initial chart. The local thread setup module is used to set up a Node.js-based local thread service on the server of the web client and start the local thread service. The condition acquisition module is used to receive information about the user's click or selection operation on the initial chart to obtain the filtering conditions; receive information about the user's sorting operation on the filtering conditions to obtain the sorting conditions; and send the filtering conditions and the sorting conditions to the server. The cache packet generation module is used to request the server to arrange the original data packet in the order of object, state characteristics and attribute characteristics, and to merge and summarize the state characteristics and attribute characteristics of the same object to obtain the cache data packet; The local conversion module is used to obtain the cached data packet from the server and store the cached data packet in the cache of the local thread service; receive the filtering conditions of the user interaction process sent by the web client, obtain the rendering data packet according to the cached data packet in the local thread service, and send the rendering data packet to the web client; The rendering module is used to render the chart in the web client based on the rendering data package, and generate the target chart.

5. A computer device, characterized in that, The method includes a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the method according to any one of claims 1-3.

6. A computer-readable storage medium, characterized in that, A computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the method according to any one of claims 1-3.

Citation Information

Patent Citations

  • Data processing method and device, computer and storage medium

    CN113641719A