CN112069432B - Web-based data visualization chart rendering optimization method and system - Google Patents
Web-based data visualization chart rendering optimization method and system Download PDFInfo
- Publication number
- CN112069432B CN112069432B CN202010679830.7A CN202010679830A CN112069432B CN 112069432 B CN112069432 B CN 112069432B CN 202010679830 A CN202010679830 A CN 202010679830A CN 112069432 B CN112069432 B CN 112069432B
- Authority
- CN
- China
- Prior art keywords
- data
- chart
- patch
- character
- web
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/23—Updating
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
- G06F8/658—Incremental updates; Differential updates
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
Abstract
The invention discloses a web-based data visualization chart rendering optimization method and a system, wherein the method comprises the following steps: storing a plurality of chart styles and interactive configuration information for visual display in a local cache so as to read corresponding information from the local cache in the process of displaying different charts; after data conversion and incremental updating are carried out on the chart data used for data visualization chart display, patch data recording differences before and after the chart data are updated are generated; integrating the chart style and configuration information with the updated data of the chart to generate a data structure required by the complete chart display; and rendering and drawing a page data visualization chart by using a data structure required by chart display, and forming a data visualization page for a user to perform real-time data monitoring and data analysis at the front end of the web. The method can improve the loading speed of the chart and reduce the page rendering time.
Description
Technical Field
The invention relates to the technical field of data visualization technology and web performance optimization, in particular to a method and a system for rendering and optimizing a data visualization chart based on a web.
Background
The web page is used as a main carrier for displaying a data visualization chart, in order to realize omnibearing deep exploration and mining of data and real-time data monitoring, a plurality of charts are displayed in the page, the data of the charts are complex and large in scale, and meanwhile, the chart data are continuously updated to achieve real-time display of the data, so that the quality of web performance is particularly important for the loading speed and the rendering effect of the visualization chart.
At present, performance optimization technical schemes for the web are mainly divided into three categories, one category is to shorten connection establishing time to improve page loading speed by improving a network protocol, the other category is to efficiently process and analyze concurrent requests by utilizing a load balancing technology, and by designing schemes such as http request concurrent scheduling strategies, the purpose is to remove the limitation of two connections and improve the response capability of the web page. The third type is from the front-end technology perspective, by means of compressing and merging static resources such as js and css, the http request number is reduced, and time and resource cost consumed by a large number of network requests are reduced.
Although the technical schemes can optimize the performance of the web page in the aspects of shortening the network request establishing and sending time, improving the concurrent request responding capability and the like to a certain extent, the huge network data transmission pressure caused by frequently acquiring large-scale chart data for rendering and redrawing in the process of displaying the data visualization chart cannot be well solved, the transmitted data volume is huge in scale, and the downloading time of data resources is extremely long, so that the chart loading is slow, and the page rendering time is delayed.
Disclosure of Invention
The present invention is directed to solving, at least to some extent, one of the technical problems in the related art.
Therefore, one objective of the present invention is to provide a rendering optimization method for a web-based data visualization chart, which can reduce the data transmission scale in a network by reducing the data amount contained in an http request response body, and can shorten the download time of response data resources to a certain extent, thereby increasing the loading speed of the chart and reducing the page rendering duration.
Another object of the present invention is to propose a web-based data visualization chart rendering optimization system.
In order to achieve the above object, an embodiment of the invention provides a web-based data visualization chart rendering optimization method, which includes the following steps: before the web page is rendered and initialized for the first time, storing a plurality of chart styles and interaction configuration information for visual display in a local cache, and reading corresponding information from the local cache in the process of displaying different charts; acquiring diagram data which is stored at a server and used for displaying a data visualization diagram, performing data conversion on the diagram data, generating an input data format which is used as an incremental updating method, and generating patch data for recording differences before and after updating of the diagram data after incremental updating processing; combining the patch data transmitted by the server with the original data of the chart, and integrating the chart style and configuration information read from the local cache with the updated data of the chart while calculating the updated data of the chart to generate a data structure required by the display of the complete chart; and rendering and drawing a page data visualization chart by using the data structure required by the chart display, and forming a data visualization page for a user to perform real-time data monitoring and data analysis at the front end of the web.
According to the web-based data visualization chart rendering optimization method, a cache mechanism and an increment updating method are fused, data transmission of an http request response body is optimized from two aspects of a chart style, interactive configuration information and chart binding data, the data transmission scale in a network is reduced by reducing the data amount contained in the http request response body, the downloading time of response data resources can be shortened to a certain extent, the loading speed of a chart is increased, and the page rendering duration is reduced.
In addition, the web-based data visualization chart rendering optimization method according to the above embodiment of the present invention may further have the following additional technical features:
further, in an embodiment of the present invention, the generating patch data recording a difference before and after updating of the chart data includes: and calculating patch data of the front and back difference of the record chart by using a longest common subsequence algorithm and backtracking thereof, wherein the longest common subsequence algorithm is to search subsequences which appear in the same sequence in two given sequences, the positions of the subsequences in the given sequences are arbitrary positions, and the longest common subsequence calculation formula is as follows:
further, in an embodiment of the present invention, the tracing formula of the patch data is:
wherein, the matrix C, two dimensional array B, ↖, ← three characters to indicate the source of the corresponding value of each cell in the matrix, ↖ indicates that X and Y sweep through the same character, i.e. characters in a common subsequence, with ← indicates that Y sweeps through a character, with the character marked as new, and ← indicates that X sweeps through a character, with the character marked as deleted.
Further, in an embodiment of the present invention, the method further includes: and splicing the plurality of patch data into http response data for network transmission.
In order to achieve the above object, an embodiment of another aspect of the present invention provides a web-based data visualization chart rendering optimization system, including: the cache processing module is used for storing a plurality of chart styles and interaction configuration information for visual display in a local cache before the web page is rendered and initialized for the first time, so that corresponding information is read from the local cache in the process of displaying different charts; the data management module is used for acquiring chart data which are stored in the server and used for displaying a data visualization chart, performing data conversion on the chart data to generate an input data format used as an incremental updating method, and generating patch data for recording the difference between the chart data before and after updating after incremental updating; the data integration module is used for combining the patch data transmitted by the server side with the original data of the chart, integrating the chart style and configuration information read from the local cache with the updated data of the chart while calculating the updated data of the chart, and generating a data structure required by the complete chart display; and the visual display module is used for rendering and drawing a page data visual chart by using a data structure required by the chart display, and forming a data visual page for a user to perform real-time data monitoring and data analysis at the front end of the web.
The web-based data visualization chart rendering optimization system provided by the embodiment of the invention integrates a cache mechanism and an increment updating method, optimizes data transmission of an http request response body from two aspects of chart styles, interactive configuration information and chart binding data, reduces the data transmission scale in a network by reducing the data volume contained in the http request response body, and can shorten the downloading time of response data resources to a certain extent, thereby improving the loading speed of a chart and reducing the page rendering duration.
In addition, the web-based data visualization chart rendering optimization system according to the above embodiment of the present invention may further have the following additional technical features:
further, in an embodiment of the present invention, the data management module is further configured to use a longest common subsequence algorithm and its backtracking to calculate patch data of the difference between the front and the back of the record chart, where the longest common subsequence algorithm is to find subsequences that appear in the same order in two given sequences, a position of the subsequence in the given sequence is an arbitrary position, and the longest common subsequence calculation formula is:
further, in an embodiment of the present invention, the tracing formula of the patch data is as follows:
the matrix C is obtained by using the longest common subsequence algorithm, the source of a corresponding value of each cell of the matrix is represented by ↖, ← and ← three characters, ↖ represents that X and Y sweep the same character simultaneously, namely the characters in the common subsequence, ← represents that Y sweeps a character, the character is marked to be increased newly, ℃. ×) represents that X sweeps a character, and the character is marked to be deleted.
Further, in an embodiment of the present invention, the data management module is further configured to splice the plurality of patch data into http response data for network transmission.
Additional aspects and advantages of the invention will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the invention.
Drawings
The foregoing and/or additional aspects and advantages of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
FIG. 1 is an overall design diagram of a web-based data visualization chart rendering optimization method according to an embodiment of the invention;
FIG. 2 is a flow diagram of a method for web-based data visualization chart rendering optimization in accordance with an embodiment of the present invention;
FIG. 3 is a flow diagram of a cache-based multi-graph rendering optimization process according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of patch data computation according to an embodiment of the present invention;
FIG. 5 is a flowchart illustrating an exemplary process for obtaining chart update data according to an embodiment of the present invention;
FIG. 6 is a schematic structural diagram of a web-based data visualization chart rendering optimization system according to an embodiment of the present invention;
fig. 7 is a general design diagram of a web-based data visualization chart rendering optimization apparatus according to an embodiment of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are illustrative and intended to be illustrative of the invention and are not to be construed as limiting the invention.
The following describes a rendering optimization method and system for a web-based data visualization chart according to an embodiment of the present invention with reference to the accompanying drawings. First, a method for optimizing rendering of a web-based data visualization chart according to an embodiment of the present invention will be described with reference to the accompanying drawings.
As can be known by analyzing a data visualization application system, the chart styles and the interactive configuration information of the data chart in the page are not updated frequently along with the data in the real-time updating process, and the data updating change of each chart binding is small, so the method is divided into two parts, one part stores the styles and the interactive configuration information of a plurality of charts by using a cache mechanism, the charts can be directly obtained from the cache when being updated each time, and the space of an http request response body is not occupied; and the other part calculates the data difference before and after the chart updating by using an incremental updating method to generate small patch data to replace large-scale chart data to be transmitted in a network, and the overall design diagram of the method is shown in fig. 1.
As can be seen from FIG. 1, the http response body before optimization contains response messages of a plurality of charts, and the response message of each chart is divided into a chart style, a chart interaction configuration and chart data.
The method for optimizing rendering of a web-based data visualization chart will be described in detail with reference to fig. 2, and specifically, as shown in fig. 2, the method for optimizing rendering of a web-based data visualization chart includes the following steps:
in step S201, before the first rendering initialization of the web page, a plurality of chart styles and interaction configuration information for visual display are stored in a local cache, so that corresponding information is read from the local cache during the process of displaying different charts.
It can be understood that, by using the localstoreg local cache, before the first rendering initialization of the web page, the plurality of chart styles and interaction configuration information for visual display are stored in the local cache, and corresponding information can be read from the cache in the process of displaying different subsequent charts
Specifically, the implementation of the cache is mainly divided into two types: one is a caching scheme provided in an HTTP protocol, static resources such as css style sheets, js scripts, picture resources and the like can be cached at a browser end by setting related fields of an HTTP request header to select a caching strategy, so that the resource utilization rate and the webpage loading speed are improved; the other scheme is a local cache scheme of the browser, which is commonly used by cookies, localStorage, sessionStorage and the like, avoids frequent communication with a server by reading data in a local storage, and reduces the sending number of http requests so as to improve the performance of web pages.
The http caching scheme still sends an http request to the server to inquire whether the cache is valid or not when the static resources are repeatedly requested, and unnecessary network overhead is caused when the resources are not updated, so that the resources which do not need to be updated frequently can be replaced by the browser caching scheme to a certain extent.
Therefore, the embodiment of the present invention performs rendering optimization of multiple charts by using localStorage local cache, and an overall flowchart thereof is shown in fig. 3.
As can be seen from fig. 3, in the embodiment of the present invention, a plurality of chart styles and interaction configuration information in the same web page are locally stored by using localStorage in a browser cache, when a page request updates a plurality of charts, data bound to the charts needs to obtain a data response after each update by sending an http request, and the chart styles and interaction configurations are obtained by reading a cache without occupying a network for transmission, so that a response body of the http request only contains the data bound to the charts, a data scale of the response body is reduced to a certain extent, a network bandwidth is saved, and data resource downloading time is shortened.
The access interface of the loacalStorage is as follows:
getItem (key): and executing cache data reading operation, returning a corresponding key value according to the key name, and if no return null exists.
And (setItem, value) executing a cache data storage operation, and adding a new key value pair in the storage list according to the key value pair setting.
removeltem (key): the key-value pair used to delete the key as a key.
clear (): the method is used for emptying the cache data stored in the localStorage.
Taking the cache reading of the chart color as an example, the following operations need to be performed:
in step S202, chart data for data visualization chart display stored in the server is acquired, and data conversion is performed on the chart data to generate an input data format as an incremental update method, so that patch data recording differences before and after updating of the chart data is generated after incremental update processing.
It can be understood that, in the embodiment of the present invention, the chart data stored at the server for displaying the data visualization chart is acquired, then the chart data is converted into an input data format that can be used as an incremental updating method, patch data that records differences before and after updating of the chart data is generated through incremental updating, and finally, a plurality of patch data are spliced into http response data for network transmission.
Further, in an embodiment of the present invention, generating patch data recording differences before and after updating of chart data includes: and solving patch data of front and back differences of the record chart by using a longest common subsequence algorithm and backtracking, wherein subsequences which appear in the same sequence in two given sequences are searched, and the positions of the subsequences in the given sequences are arbitrary positions.
Specifically, the incremental updating method based on large-scale chart data aims at the conditions that the data visualization chart data is large in scale and the data change before and after updating is small, obtains patch data stored with data modification records through calculating the difference between the data before and after updating, transmits the patch data to the web front end through a network, and then calculates by using the patch data and the original data to generate binding data of a chart shown in a new data replacement page. The obtaining of the chart update data will be described in detail in step S203, which is not stated herein, and the generation of the patch data will be described in detail below:
the embodiment of the invention utilizes a Longest Common Subsequence (LCS) algorithm and backtracking thereof to obtain patch data for recording data difference before and after a chart, wherein the LCS algorithm is used for searching subsequences which appear in the same sequence in two given sequences, and the positions of the subsequences in the given sequences can be discontinuous. Assuming that the length of the X sequence is m, the length of the Y sequence is n, and C is a matrix of (m +1) × (n +1), where the first row and the first column of the matrix are both 0, C [ i ] [ j ] represents the LCS lengths of the first i and the first j characters in the character sequences X and Y, we can obtain equation 1:
obtaining a pseudo code for solving the longest common subsequence calculation matrix C according to the formula 1, as follows:
first, an initialization operation is performed to set both the first row and the first column of the C matrix to 0.
Then start traversing X: if a certain character in the Y sequence is the same as the character of the current X sequence, the corresponding value of the C matrix cell at the coordinate position is the upper left digit plus 1.
Otherwise, if the number on the left below the current coordinate is larger than the number of the book above the current coordinate, the corresponding value of the cell of the C matrix at the coordinate position is the number on the left.
And finally, if the two conditions are not met, setting the value corresponding to the C matrix cell at the coordinate position as an upper number.
And ending program execution until all characters in the X sequence are traversed, obtaining a complete C matrix, and recording the information of the longest public subsequence.
On the basis of the resulting matrix C, assume a two dimensional array B, using ↖ ← and ← three characters, indicating the source of a value in each cell of the matrix, ↖ indicating that X and Y are swept simultaneously through the same character, i.e. characters in a common subsequence, ← indicating that Y is swept through a character, indicating that the character is incremented, and ← indicating that X is swept through a character, indicating that the character is deleted. Equation 2 can be obtained:
the path backtracking is performed according to equations 1 and 2, the shortest edit distance of the sequence X updated to Y is obtained and recorded as patch data, wherein '-1' represents a deletion operation, '+' represents a new addition operation, and '1' represents that the character is unchanged, if there are a plurality of continuous operations, it can be considered to merge them, and the pseudo code is as follows:
first, the initialization index coordinates i, j are respectively set to the lengths of the X sequence and the Y sequence, which is equivalent to starting from the lower right corner of the C matrix.
If the characters of the X and Y sequences under the current coordinate are equal, the current character is reserved after updating, the number 1 is inserted into the patch array, and then the patch array is moved to the upper left.
If the number on the left is greater than the number above, the current character is deleted, the number-1 is inserted into the patch array, and then moved up.
If the two conditions are not met, then add the current character in the Y sequence to the patch array and then move to the left.
And (4) until the left upper corner of the matrix C is traced back, ending traversal, recording all the characters left in the sequence X as deleted, inserting all the characters left in the sequence Y into the Patch array, and exiting program execution to obtain the Patch array Patch.
Assuming that X is abcaba and Y is CBABAC, a trace-back route from the lower right corner to the upper left corner can be obtained on the basis of the matrix C, as indicated by the arrow calculated according to equation 2, as shown in fig. 4. The longest common subsequence obtained is CBBA, length 4. In the process of backtracking, the shortest editing distance from X to Y can be obtained according to the arrow representation and recorded in the patch array P, and then P [ -2, 1, -1, 1, + a, 2, + C ], the more repeated operations, the smaller the length of the patch array and the faster the network transmission.
In step S203, the patch data transmitted by the server is combined with the original data of the chart, and the chart style and configuration information read from the local cache are integrated with the updated data of the chart while the updated data of the chart is obtained through calculation, so as to generate a data structure required by the complete chart display.
It can be understood that, by using the incremental update method, the patch data transmitted from the server side is combined with the original data of the graph, and the updated data of the graph is calculated. Meanwhile, the chart style and configuration information read from the localstoreg are integrated with the updated data of the chart to form a data structure required by the complete chart display.
Specifically, the chart update data acquisition method in the incremental update method based on large-scale chart data specifically includes the following steps:
after the web page for displaying the chart obtains the patch array calculated by the server, combining the original data of the chart and the patch array on the front-end page to generate new data for chart updating and redrawing. The flow of the main execution of this step is shown in fig. 5. According to the execution flow shown in fig. 5, the updated sequence pseudo code is obtained based on the original sequence by using the patch data as follows:
first, the index of the original sequence is initialized to 0.
Then, traversing the Patch array Patch:
if the current number group item is a number, judging the number of the number group item to be positive or negative, if the number of the number group item is positive, representing that the characters in the current original sequence are reserved, and if the number of the number group item is negative, deleting the characters in the original sequence.
If the current array item is a character string, representing adding characters on the basis of the original sequence, inserting the characters in the array item into the original sequence.
And when all the patch data are traversed, ending the program execution to obtain updated data.
In step S204, a data structure required for diagram display is used to render and draw a page data visualization diagram, and a data visualization page for a user to perform real-time data monitoring and data analysis is formed at the front end of the web.
It can be understood that, in the embodiment of the present invention, each graph data generated after data integration is used to render and draw the page data visualization graph, and finally, a data visualization page for a user to perform real-time data monitoring and data analysis is formed at the front end of the web.
In conclusion, (1) the embodiment of the invention solves the problems that the graph data scale in network transmission is huge due to the complex and various data visualization graph styles and interactive configuration information, the data do not change along with the change of the graph binding data in the real-time graph updating and displaying process, the network bandwidth is seriously wasted in the network transmission data, the resource downloading time is easily overlong, and the like.
(2) According to the embodiment of the invention, under the conditions that the chart binding data is large in scale and the data change before and after updating is small, the problems of slow data loading, long page rendering time and the like in the chart updating and displaying process caused by overlarge network transmission pressure and overlong data resource downloading time due to frequent transmission of a large amount of repeated data are avoided.
(3) According to the embodiment of the invention, the local cache and the increment updating method are combined, and the patch difference data transmitted by the server side is integrated with the chart style and the interactive configuration information in the cache to render and draw the visual chart, so that the loading speed of multi-chart real-time display is increased, and the rendering duration of the whole web page is shortened.
According to the web-based data visualization chart rendering optimization method provided by the embodiment of the invention, a cache mechanism and an increment updating method are fused, the data transmission of an http request response body is optimized from two aspects of a chart style, interactive configuration information and chart binding data, the data transmission scale in a network is reduced by reducing the data volume contained in the http request response body, the downloading time of response data resources can be shortened to a certain extent, the loading speed of a chart is increased, and the page rendering duration is reduced.
Next, a proposed web-based data visualization chart rendering optimization system according to an embodiment of the present invention is described with reference to the drawings.
FIG. 6 is a schematic structural diagram of a web-based data visualization chart rendering optimization system according to an embodiment of the present invention.
As shown in fig. 6, the web-based data visualization chart rendering optimization system 10 includes: the system comprises a cache processing module 100, a data management module 200, a data integration module 300 and a visualization display module 400.
The cache processing module 100 is configured to store, before the web page is initialized for first rendering, a plurality of chart styles and interaction configuration information for visual display in a local cache, so as to read corresponding information from the local cache in a process of displaying different charts; the data management module 200 is configured to obtain chart data stored at the server and used for displaying a data visualization chart, perform data conversion on the chart data, generate an input data format serving as an incremental updating method, and generate patch data recording differences before and after updating of the chart data after incremental updating processing; the data integration module 300 is configured to combine patch data transmitted by the server with original graph data, and integrate the graph style and configuration information read from the local cache with the updated graph data while calculating to obtain updated graph data, so as to generate a data structure required for displaying a complete graph; the visualization display module 400 is configured to render and draw a page data visualization chart by using a data structure required for chart display, and form a data visualization page at the front end of the web, where the data visualization page is available for a user to perform real-time data monitoring and data analysis. The system 10 of the embodiment of the invention can reduce the data transmission scale in the network by reducing the data volume contained in the http request response body, and can shorten the downloading time of response data resources to a certain extent, thereby improving the loading speed of the chart and reducing the page rendering time.
Specifically, as shown in FIG. 7, the system 10 is divided into four main modules:
the data management module 200: four core functions of data reading, data conversion, patch data generation and data transmission are provided. The data reading is mainly to obtain chart data which is stored in a server and used for displaying a data visualization chart, then an input data format which can be used as an incremental updating method is generated through data conversion, patch data which records the difference between the chart data before and after updating is generated through incremental updating, and finally a plurality of patch data are spliced into http response data for network transmission.
The cache processing module 100: the method comprises the steps of utilizing a localstoreg local cache to store a plurality of chart styles and interaction configuration information for visual display in the local cache before a web page is rendered and initialized for the first time, and reading corresponding information from the cache in the process of displaying different subsequent charts.
The data integration module 300: and combining the patch data transmitted by the server with the original data of the chart by using an incremental updating method to calculate the data after the chart is updated. Meanwhile, the chart style and configuration information read from the localstoreg are integrated with the updated data of the chart to form a data structure required by the complete chart display.
The visualization display module 400: and rendering and drawing a page data visualization chart by using each chart data generated after data integration, and finally forming a data visualization page for a user to perform real-time data monitoring and data analysis at the front end of the web.
Further, in an embodiment of the present invention, the data management module 200 is further configured to use a longest common subsequence algorithm and its backtracking to calculate patch data of difference between the front and the back of the record chart, where the longest common subsequence algorithm is to find subsequences that appear in the same order in two given sequences, a position of the subsequences in the given sequences is an arbitrary position, and the longest common subsequence calculation formula is:
further, in an embodiment of the present invention, the tracing formula of the patch data is:
the matrix C is obtained by using the longest common subsequence algorithm, three characters ↖, ← and ← are used for representing the source of the corresponding value of each cell of the matrix, ↖ represents that X and Y sweep the same character simultaneously, namely the character in the common subsequence, and ← represents that Y sweeps one character, marks the character as new increment, and ℃. ° represents that X sweeps one character, and marks the character as deletion.
Further, in an embodiment of the present invention, the data management module 200 is further configured to splice a plurality of patch data into http response data for network transmission.
It should be noted that the foregoing explanation on the embodiment of the method for optimizing the rendering of the web-based data visualization chart is also applicable to the system for optimizing the rendering of the web-based data visualization chart of this embodiment, and is not repeated here.
According to the web-based data visualization chart rendering optimization system provided by the embodiment of the invention, a cache mechanism and an increment updating method are fused, the data transmission of an http request response body is optimized from two aspects of a chart style, interactive configuration information and chart binding data, the data transmission scale in a network is reduced by reducing the data volume contained in the http request response body, the downloading time of response data resources can be shortened to a certain extent, the loading speed of a chart is increased, and the page rendering duration is reduced.
In the description of the specification, reference to the description of "one embodiment," "some embodiments," "an example," "a specific example," or "some examples" or the like means that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or N embodiments or examples. Furthermore, various embodiments or examples and features of different embodiments or examples described in this specification can be combined and combined by one skilled in the art without contradiction.
Furthermore, the terms "first", "second" and "first" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or to implicitly indicate the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of the present invention, "N" means at least two, e.g., two, three, etc., unless specifically limited otherwise.
Claims (4)
1. A web-based data visualization chart rendering optimization method is characterized by comprising the following steps:
before the first rendering initialization of the web page, storing a plurality of chart styles and interaction configuration information for visual display in a local cache, so as to read corresponding information from the local cache in the process of displaying different charts;
acquiring diagram data which is stored in a server and used for displaying a data visualization diagram, performing data conversion on the diagram data, generating an input data format used as an incremental updating method, and generating patch data for recording differences before and after updating of the diagram data after incremental updating processing;
combining the patch data transmitted by the server with the original data of the chart, and integrating the chart style and configuration information read from the local cache with the updated data of the chart while calculating the updated data of the chart to generate a data structure required by the display of the complete chart; and
rendering and drawing a page data visualization chart by using a data structure required by the chart display, and forming a data visualization page for a user to perform real-time data monitoring and data analysis at the front end of the web;
the generating of the patch data recording the difference before and after the chart data updating includes:
and calculating patch data of the front and back difference of the record chart by using a longest common subsequence algorithm and backtracking thereof, wherein the longest common subsequence algorithm is to search subsequences which appear in the same sequence in two given sequences, the positions of the subsequences in the given sequences are arbitrary positions, and the longest common subsequence calculation formula is as follows:
the length of the X sequence is m, the length of the Y sequence is n, C is a matrix of (m +1) × (n +1), the first row and the first column of the matrix are both 0, and Ci j represents the longest common subsequence length of the first i and the first j characters in the character sequences X and Y;
the tracing formula of the patch data is as follows:
wherein, the matrix C is obtained by using the longest common subsequence algorithm, and ↖, ← and ← three characters are used for representing the source of a corresponding value of each cell in the matrix, ↖ is used for representing that X and Y simultaneously sweep the same character, namely, characters in a common subsequence, with ← representing that Y sweeps a character, marking the character as new increasing, with ← representing that X sweeps a character, marking the character as deleted; the shortest edit distance at which the sequence X is updated to Y is obtained and recorded as patch data.
2. The method of claim 1, further comprising:
and splicing the plurality of patch data into http response data for network transmission.
3. A web-based data visualization chart rendering optimization system, comprising:
the cache processing module is used for storing a plurality of chart styles and interaction configuration information for visual display in a local cache before the web page is rendered and initialized for the first time, so that corresponding information is read from the local cache in the process of displaying different charts;
the data management module is used for acquiring chart data which are stored in the server and used for displaying a data visualization chart, performing data conversion on the chart data to generate an input data format used as an incremental updating method, and generating patch data for recording differences before and after updating of the chart data after incremental updating processing;
the data integration module is used for combining the patch data transmitted by the server side with the original data of the chart, integrating the chart style and configuration information read from the local cache with the updated data of the chart while calculating the updated data of the chart, and generating a data structure required by the complete chart display; and
the visual display module is used for rendering and drawing a page data visual chart by utilizing a data structure required by the chart display, and forming a data visual page for a user to perform real-time data monitoring and data analysis at the front end of the web;
the data management module is further configured to use a longest common subsequence algorithm and backtracking thereof to obtain patch data of the difference between the front and the back of the record chart, where the longest common subsequence algorithm is to find subsequences that appear in the same order in two given sequences, the position of the subsequence in the given sequence is an arbitrary position, and the longest common subsequence has a formula:
the length of the X sequence is m, the length of the Y sequence is n, C is a matrix of (m +1) × (n +1), the first row and the first column of the matrix are both 0, and Ci j represents the longest common subsequence length of the first i and the first j characters in the character sequences X and Y;
the tracing formula of the patch data is as follows:
the matrix C is obtained by using the longest common subsequence algorithm, and ↖, ← and ← three characters are used for representing the source of a corresponding value of each cell in the matrix, ↖ is used for representing that X and Y simultaneously sweep the same character, namely, characters in a common subsequence, that is, the Y sweeps one character, the character is marked to be increased, and ← is used for representing that X sweeps one character, and the character is marked to be deleted; and obtaining the shortest editing distance of updating the sequence X into Y and recording the shortest editing distance as patch data.
4. The system of claim 3, wherein the data management module is further configured to concatenate the plurality of patch data into http response data for network transmission.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010679830.7A CN112069432B (en) | 2020-07-15 | 2020-07-15 | Web-based data visualization chart rendering optimization method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010679830.7A CN112069432B (en) | 2020-07-15 | 2020-07-15 | Web-based data visualization chart rendering optimization method and system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112069432A CN112069432A (en) | 2020-12-11 |
| CN112069432B true CN112069432B (en) | 2022-08-19 |
Family
ID=73657122
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010679830.7A Active CN112069432B (en) | 2020-07-15 | 2020-07-15 | Web-based data visualization chart rendering optimization method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112069432B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113139145B (en) * | 2021-05-12 | 2023-03-21 | 深圳赛安特技术服务有限公司 | Page generation method and device, electronic equipment and readable storage medium |
| CN113379296A (en) * | 2021-06-28 | 2021-09-10 | 平安信托有限责任公司 | Report index normalization method and device, electronic equipment and readable storage medium |
| CN113724355B (en) * | 2021-08-03 | 2024-05-07 | 北京百度网讯科技有限公司 | Chart drawing method and device for video and electronic equipment |
| CN113761304B (en) * | 2021-09-23 | 2023-11-24 | 北京航空航天大学青岛研究院 | Big data intelligent display configuration method based on dynamic parameters |
| WO2023245374A1 (en) * | 2022-06-20 | 2023-12-28 | 北京小米移动软件有限公司 | View display method and apparatus, electronic device, and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1689365A (en) * | 2002-08-26 | 2005-10-26 | 高通股份有限公司 | System and method for using equipment identity information in providing location services to a wireless communication device |
| CN104615470A (en) * | 2015-03-04 | 2015-05-13 | 成都维远艾珏信息技术有限公司 | Program updating method for embedded devices |
| CN108446384A (en) * | 2018-03-21 | 2018-08-24 | 中国信息通信研究院 | A kind of network topology visualization system and data visualization method based on WebGL |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10692253B2 (en) * | 2017-03-31 | 2020-06-23 | Oracle International Corporation | Using a nested pixel map for chart rendering optimization |
-
2020
- 2020-07-15 CN CN202010679830.7A patent/CN112069432B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1689365A (en) * | 2002-08-26 | 2005-10-26 | 高通股份有限公司 | System and method for using equipment identity information in providing location services to a wireless communication device |
| CN104615470A (en) * | 2015-03-04 | 2015-05-13 | 成都维远艾珏信息技术有限公司 | Program updating method for embedded devices |
| CN108446384A (en) * | 2018-03-21 | 2018-08-24 | 中国信息通信研究院 | A kind of network topology visualization system and data visualization method based on WebGL |
Non-Patent Citations (2)
| Title |
|---|
| Web前端性能优化方案与实践;王成等;《计算机应用与软件》;20141215(第12期);全文 * |
| 大数据可视化数据加载模式比较分析;宋文文等;《电脑知识与技术》;20191225(第36期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112069432A (en) | 2020-12-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112069432B (en) | Web-based data visualization chart rendering optimization method and system | |
| JP2020038623A (en) | Method, device, and system for storing data | |
| US10922339B2 (en) | Portable globe creation for a geographical information system | |
| CN111339316A (en) | Method and system architecture for realizing visual editing and persistence of knowledge graph | |
| CN108628918B (en) | System deployment and dependency relationship automatic drawing system and method | |
| CN113568995A (en) | Dynamic tile map making method based on retrieval conditions and tile map system | |
| CN108647304A (en) | Report display system, method, computer equipment and storage medium | |
| CN108874393A (en) | rendering method, device, storage medium and computer equipment | |
| CN103593345A (en) | Webpage flow chart editing method and system | |
| CN114186155A (en) | Page rendering method and device, electronic terminal and storage medium | |
| CN113688139A (en) | Object storage method, gateway, device and medium | |
| CN102833295B (en) | Data manipulation method and device in distributed cache system | |
| CN115577683B (en) | HTML rich text content conversion method, device, equipment and medium | |
| KR20140133125A (en) | Method and apparatus for a client to browse a web page provided by a server | |
| CN114637499B (en) | Visualization component processing method, device, equipment and medium | |
| CN109543127A (en) | A kind of page furbishing method, device, equipment and readable storage medium storing program for executing | |
| CN115905114A (en) | Batch updating method and system of metadata, electronic equipment and readable storage medium | |
| CN113626483B (en) | Front-end caching method, system, equipment and storage medium for filling forms | |
| EP4250683A1 (en) | Method and apparatus for requesting configuration page, and electronic device | |
| CN101917418A (en) | Method for accessing cloud server by using wireless application protocol (WAP) and WAP server | |
| CN110543243B (en) | Data processing method, device, equipment and storage medium | |
| CN111581758B (en) | Power grid graph topology modeling method and computer readable storage medium | |
| CN113704190A (en) | Data writing method and device | |
| CN111552705A (en) | Data processing method and device based on chart, electronic equipment and medium | |
| CN107315535B (en) | Information processing method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |