Method, device, processor and computer readable storage medium thereof for realizing high-performance visual processing of stock market data

Abstract

The application relates to a method for realizing high-performance visual processing of stock market data, wherein the method comprises the following steps: obtaining stock market data including time-sharing data and daily K data from a server; using a create function in a D3.js visualization library to respectively create svg chart instances of virtual DOMs of the time-sharing data and the daily K data; respectively creating virtual x and y axes according to the obtained data; using the mapping relationship between the x and y axes to generate virtual charts of the time-sharing and daily K data; using a depth-first traversal algorithm to process all nodes, and converting the nodes into a canvas method for drawing according to the svg node attributes; using a window.requestAnimationFrame function to cyclically call an svg-to-canvas function; and delivering events to virtual charts generated by the D3.js visualization library, and applying the events to the svg virtual nodes through an svg plug-in to realize high-frequency interaction of data visualization. The application also relates to a corresponding device, a processor and a storage medium thereof. The technical scheme greatly improves the data visualization performance of D3.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data processing, in particular to the technical field of data visualization, and more particularly to a method and device for realizing high-performance visualization processing of stock market data, a processor and a computer readable storage medium thereof. BACKGROUND

[0002] The most common method of conventional stock market data visualization display is usually to drag a series of components to realize interactive processing of visualization, and does not involve using data rendering to realize visualization. In this way, in the process of stock market interactive linkage, creating multiple modules for operation is cumbersome, and there are limitations in operation steps and operation time. SUMMARY

[0003] The present application aims to overcome the above-mentioned shortcomings of the prior art, and provides a method and device for realizing high-performance visualization processing of stock market data, a processor and a computer readable storage medium thereof, which can effectively improve the performance of data visualization.

[0004] In order to achieve the above-mentioned purpose, the method and device for realizing high-performance visualization processing of stock market data, a processor and a computer readable storage medium thereof are as follows:

[0005] The method for realizing high-performance visualization processing of stock market data, the main feature of which is that the method comprises the following steps:

[0006] (1) obtaining stock market data including time data and daily K data from a server;

[0007] (2) using the create function in the D3.js visualization library to create virtual DOM svg chart instances of the time data and daily K data respectively, and setting the width and height of the svg format;

[0008] (3) creating virtual x-axis and y-axis according to the obtained related data;

[0009] (4) using the mapping relationship between the x-axis and the y-axis to generate virtual charts of the time data and the daily K data;

[0010] (5) inserting a canvas node in the webpage and obtaining the drawing context CanvasRenderingContext2D of the canvas;

[0011] (6) for the svg nodes used in the visualization of the stock market data, using a depth-first traversal algorithm to process all nodes, and converting them to the corresponding canvas method for drawing according to the svg node attributes;

[0012] (7) Using the window.requestAnimationFrame function, the svg-to-canvas function is called in a loop to achieve higher frequency and thus efficient chart visualization.

[0013] (8) Listen to the touch and slide events of the canvas in the webpage, pass the events to the virtual chart generated by the D3.js visualization library, and apply it to the svg virtual node through the svg plug-in, so as to realize the high-frequency interaction of data visualization.

[0014] Preferably, the step (3) creates a virtual x-axis by the following way:

[0015] According to the timeline of the obtained stock market data, the scaleBand or scalePoint function of the D3.js visualization library is used to establish a virtual chart x-axis line and a label text node, and they are added to the virtual svg chart instance.

[0016] Preferably, the step (3) creates a virtual y-axis by the following way:

[0017] For the obtained time data, the highest and lowest transaction prices in the data are found, and the scaleLineary function in the D3.js visualization library is used to establish a time virtual chart y-axis;

[0018] For the obtained daily K data, the daily data is divided into highest price, lowest price, opening price and closing price, the maximum highest price and the minimum lowest price in all data are found, and the scaleLineary function in the D3.js visualization library is used to establish a daily K virtual chart y-axis;

[0019] The time virtual chart y-axis and the daily K virtual chart y-axis are added to the time and daily K virtual charts respectively.

[0020] Preferably, the step (4) is specifically:

[0021] According to the mapping relationship between the x-axis and the y-axis, for the time virtual chart, the line function in the D3.js visualization library is used to create a virtual path curve, which is added to the virtual svg chart instance; for the daily K virtual chart, according to the highest price and the lowest price, the opening price and the closing price, virtual line nodes and react nodes are formed respectively, and they are added to the virtual svg chart, and finally the time virtual chart and the daily K virtual chart are formed respectively.

[0022] Preferably, the step (6) specifically includes the following steps:

[0023] (6.1) For the use of the stock market data visualization of the svg node, and set the parent node into the offset amount;

[0024] (6.2) Determine whether the current svg node contains g label, if not, go to step (6.3), if yes, go to step (6.4);

[0025] (6.3) The current label is classified according to path, line, circle, rect, text, and offset is obtained; at the same time, the label is drawn using the canvas function, and step (6.5) is entered;

[0026] (6.4) Get the offset on the current label;

[0027] (6.5) Determine whether there is a child node, if yes, return to step (6.1) for loop processing, otherwise, end the traversal processing.

[0028] The device for realizing the stock market data high performance visualization processing, its main feature is, the device includes:

[0029] Processor, configured to execute computer executable instructions;

[0030] Memory, storing one or more computer executable instructions, the computer executable instructions are executed by the processor, realize the various steps of the above described method for realizing the stock market data high performance visualization processing.

[0031] The processor for realizing the stock market data high performance visualization processing, its main feature is, the processor is configured to execute computer executable instructions, the computer executable instructions are executed by the processor, realize the various steps of the above described method for realizing the stock market data high performance visualization processing.

[0032] The computer readable storage medium, its main feature is, it is stored with computer program, the computer program can be executed by the processor to realize the various steps of the above described method for realizing the stock market data high performance visualization processing.

[0033] The method, device, processor and computer readable storage medium for realizing high-performance visual processing of stock market data adopt D3 to render market data into a visual virtual chart, the virtual chart is not displayed in a webpage, is only stored in a memory, and a virtual node is used to reduce nodes on a webpage, thereby improving webpage performance; in addition, the technical solution combines a virtual node, a D3 chart library and canvas rendering to realize visualization of market chart data, converts the virtual chart into canvas and renders the virtual chart in the webpage, thereby greatly improving the data visualization performance of D3. BRIEF DESCRIPTION OF DRAWINGS

[0034] Figure 1 The method for realizing high-performance visual processing of stock market data adopts a flowchart for processing nodes by using a depth-first traversal algorithm. DETAILED DESCRIPTION

[0035] In order to more clearly describe the technical content of the present application, further description will be made in combination with specific embodiments.

[0036] Before explaining embodiments of the application in detail, it is to be understood that the term "comprise" or "comprising" or any other variation thereof is intended to cover a non-exclusive inclusion, such that a process, method, article or apparatus that comprises a list of elements does not only include these elements, but also includes other elements not expressly listed or inherent to such process, method, article or apparatus.

[0037] The method for realizing high-performance visual processing of stock market data, wherein the method comprises the following steps:

[0038] (1) obtaining stock market data including time-sharing data and daily K data from a server;

[0039] (2) using a create function in a D3.js visualization library, creating a virtual DOM svg chart instance of the time-sharing data and the daily K data respectively, and setting the width and height of the svg format;

[0040] (3) creating a virtual x-axis and a virtual y-axis according to the obtained related data respectively;

[0041] (4) using the mapping relationship between the x-axis and the y-axis, generating a virtual chart of the time-sharing data and the daily K data;

[0042] (5) inserting a canvas node in a webpage, and obtaining a drawing context CanvasRenderingContext2D of the canvas;

[0043] (6) For the svg node used in the stock market data visualization, a depth-first traversal algorithm is used to process all nodes, and according to the svg node attribute, it is converted into the corresponding canvas method for drawing;

[0044] (7) Using window.requestAnimationFrame function, the svg to canvas function is called circularly to achieve higher frequency and thus realize efficient chart visualization;

[0045] (8) Listening to the touch and sliding events of the canvas in the webpage, the events are transmitted to the virtual chart generated by the D3.js visualization library, and the svg plug-in is applied to the svg virtual node, so as to realize high-frequency interaction of data visualization.

[0046] As a preferred embodiment of the application, the step (3) creates a virtual x-axis by the following way:

[0047] According to the obtained stock market data, the scaleBand or scalePoint function of the D3.js visualization library is used to establish a virtual chart x-axis line and a label text node according to the time line, and the virtual chart x-axis line and the label text node are added to the virtual svg chart instance.

[0048] As a preferred embodiment of the application, the step (3) creates a virtual y-axis by the following way:

[0049] For the obtained time data, the highest transaction price and the lowest transaction price in the data are found, and the scaleLineary function in the D3.js visualization library is used to establish a time virtual chart y-axis;

[0050] For the obtained daily K data, the daily data is divided into the highest price, the lowest price, the opening price and the closing price, the maximum highest price and the minimum lowest price in all data are found, and the scaleLineary function of the D3.js visualization library is used to establish a daily K virtual chart y-axis;

[0051] The time virtual chart y-axis and the daily K virtual chart y-axis are added to the time virtual chart and the daily K virtual chart respectively.

[0052] As a preferred embodiment of the application, the step (4) is specifically:

[0053] By using the mapping relationship between the x-axis and the y-axis, for the time-sharing virtual chart, a virtual path curve is created by using the line function in the D3.js visualization library, and is added to the virtual svg chart instance; for the daily K virtual chart, according to the highest price and the lowest price, the opening price and the closing price, virtual line nodes and react nodes are formed respectively, and are added to the virtual svg chart, and finally the time-sharing virtual chart and the daily K virtual chart are formed respectively.

[0054] Referring to Figure 1 As shown in the preferred embodiment of the present application, the step (6) specifically comprises the following steps:

[0055] (6.1) For the svg node used in the market data visualization, the offset amount transmitted by the parent node is set;

[0056] (6.2) It is judged whether the current svg node contains a g label, if not, step (6.3) is entered, if yes, step (6.4) is entered;

[0057] (6.3) The current label is classified according to path, line, circle, rect and text, and the offset amount is obtained; at the same time, the label is drawn by using the canvas function, and step (6.5) is entered;

[0058] (6.4) The offset amount on the current label is obtained;

[0059] (6.5) It is judged whether there is a child node, if yes, step (6.1) is returned for loop processing, otherwise, the traversal processing is ended.

[0060] In a specific embodiment of the present application, the method for realizing high-performance visualization processing of stock market data of the present technical solution specifically comprises the following steps:

[0061] 1. Obtain market data from a server, including stock time-sharing data and daily K data.

[0062] 2. Create virtual DOM svg chart instances of the time-sharing and daily K by using the create function in D3.js, and set the width and height of the svg, the chart instance will not be loaded to the webpage, but only exists in the memory space.

[0063] 3. Create a virtual x-axis: according to the time line of the market data, the virtual chart x-axis line and the label text node are established by using the scaleBand or scalePoint function of D3.js, and are added to the virtual svg chart instance.

[0064] 4, Create a virtual y-axis: for the time-sharing data, find the highest and lowest transaction prices in the data, and use the D3.js scaleLineary function to establish a virtual chart y-axis for time-sharing; for daily K data, daily data is divided into highest price, lowest price, opening price and closing price, find the maximum highest price and minimum lowest price in all data, and also use the D3.js scaleLineary function to establish a virtual chart y-axis for daily K, and add the two virtual y-axes to the time-sharing and daily K virtual charts respectively.

[0065] 5, Use the mapping relationship between x-axis and y-axis, for the time-sharing chart, use the D3.js line function to create a virtual path curve, and add it to the virtual svg chart instance; for daily K, according to the highest price and the lowest price, the opening price and the closing price, form virtual line and react nodes respectively, and add them to the virtual svg chart. Finally, form time-sharing and daily K virtual charts respectively. After the creation of virtual svg time-sharing and daily K charts, both of them are tree structures with svg nodes as root nodes, containing multiple child nodes, and child nodes containing child nodes.

[0066] 6, Insert the canvas node in the webpage, and get the drawing context CanvasRenderingContext2D of the canvas.

[0067] 7, In the same layer of svg, the node created later will cover the node created earlier. Using the depth-first traversal algorithm, traverse the tree structure of the virtual chart, which can maintain the original coverage hierarchy of all elements in the svg virtual chart. The node types that the virtual node may contain are: g, path, line, circle, rect, text. The specific traversal algorithm process is shown in the svg to canvas process. Figure 1

[0068] 8, Use the window.requestAnimationFrame function to call the svg to canvas function repeatedly to achieve 60 frames or higher frequency to realize efficient chart visualization.

[0069] 9, Listen to the touch and slide events of the canvas in the webpage, pass the events to the virtual chart implemented by D3.js, and apply the operation to the svg virtual node, cooperate with high-frequency svg to canvas, and realize high-frequency interaction of data visualization.

[0070] The device for realizing high-performance visualization processing of stock market data, wherein the device comprises:

[0071] A processor configured to execute computer executable instructions; ​

[0072] a memory storing one or more computer-executable instructions that, when executed by the processor, implement the steps of the method for high-performance visual processing of stock market data.

[0073] The processor for high-performance visual processing of stock market data, wherein the processor is configured to execute computer-executable instructions that, when executed by the processor, implement the steps of the method for high-performance visual processing of stock market data.

[0074] The computer-readable storage medium, wherein a computer program is stored thereon, the computer program being executable by a processor to implement the steps of the method for high-performance visual processing of stock market data.

[0075] Any process or method described in a flowchart or otherwise described herein can be understood as representing code modules, segments, or portions of code that include one or more executable instructions for implementing specific logic functions or steps within the associated process or method. The various embodiments of the application can include additional or fewer steps or processes, and the order of the steps or processes can be altered, as will be understood by those skilled in the art.

[0076] It should be understood that portions of the application can be implemented in hardware, software, firmware or combinations thereof. In the above embodiments, multiple steps or processes can be implemented in software or firmware stored in a memory and executed by a suitable instruction execution device.

[0077] It can be understood by those skilled in the art that all or part of the steps carried out by the above-mentioned embodiments can be instructed by a program to complete the relevant hardware, and the program can be stored in a computer-readable storage medium. The program, when executed, includes one of the steps of the method embodiment or a combination thereof.

[0078] The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0079] In the description of the specification, the description of the terms "an embodiment", "some embodiments", "an example", "a specific example", or "embodiments" and the like means that the specific features, structures, materials or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the present application. In the specification, the illustrative description of the above terms does not necessarily mean the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described can be combined in any one or more embodiments or examples in a suitable manner.

[0080] Although the embodiments of the present application have been shown and described above, it is understood that the above-described embodiments are exemplary and are not to be construed as limiting the present application, and those of ordinary skill in the art can make changes, modifications, replacements and variations to the above-described embodiments within the scope of the present application.

[0081] The method, device, processor and computer readable storage medium thereof for realizing high-performance visualization processing of stock market data of the present application render market data into a visual chart based on D3, the virtual chart is not displayed in the webpage, but only stored in the memory, and virtual nodes are used to reduce the nodes on the page, thereby improving the performance of the webpage; in addition, the technical solution combines virtual nodes, D3 chart library and canvas rendering to realize the visualization of market chart data, converts the virtual chart into canvas and renders it in the webpage, thereby greatly improving the data visualization performance of D3.

[0082] In this specification, the present application has been described with reference to its specific embodiments. However, it is obvious that various modifications and changes can be made without departing from the spirit and scope of the present application. Therefore, the specification and drawings should be considered illustrative rather than limiting.

Claims

1. A method for realizing high-performance visual processing of stock market data, characterized in that, The method comprises the following steps: (1) obtaining stock market data including time-sharing data and daily K data from a server; (2) creating virtual DOM svg chart instances of the time-sharing data and the daily K data by using a create function in a D3.js visualization library, and setting the width and height in svg format; (3) creating virtual x and y axes according to the obtained related data; (4) generating virtual charts of the time-sharing data and the daily K data by using the mapping relationship between the x and y axes; (5) inserting a canvas node into a webpage, and obtaining a drawing context CanvasRenderingContext2D of the canvas; (6) processing all nodes by using a depth-first traversal algorithm, and converting the nodes into corresponding canvas methods for drawing according to the attributes of the nodes; (7) cyclically calling the svg-to-canvas function by using a window.requestAnimationFrame function, so that the function is called at a higher frequency, thereby realizing efficient chart visualization; (8) listening to touch and sliding events of the canvas in the webpage, transmitting the events to a virtual chart generated by the D3.js visualization library, and applying the events to virtual svg nodes by using an svg plug-in, so that high-frequency interaction of data visualization is realized. In the step (3), the virtual x axis is created in the following manner: According to the timeline of the obtained stock market data, a line straight line and a label text node of the virtual chart x axis are established by using a scaleBand or scalePoint function of the D3.js visualization library, and are added to the virtual svg chart instance. In the step (3), the virtual y axis is created in the following manner: For the obtained time-sharing data, the highest and lowest transaction prices are found, and a scaleLineary function of the D3.js visualization library is used to establish a y axis of the time-sharing virtual chart. For the obtained daily K data, the highest and lowest prices, the opening price and the closing price are found, and a scaleLineary function of the D3.js visualization library is used to establish a y axis of the daily K virtual chart. The time-sharing virtual chart y axis and the daily K virtual chart y axis are added to the time-sharing and daily K virtual charts respectively. In the step (4), the following is performed: According to the mapping relationship between the x and y axes, a virtual path curve is created by using a line function of the D3.js visualization library for the time-sharing virtual chart, and is added to the virtual svg chart instance; for the daily K virtual chart, virtual line and react nodes are formed according to the highest and lowest prices and the opening and closing prices, and are added to the virtual svg chart, so that the time-sharing virtual chart and the daily K virtual chart are finally formed.

2. The method for realizing high-performance visual processing of stock market data according to claim 1, characterized in that, The step (6) comprises the following steps: (6.1) For the use of the stock market data visualization svg node, and set the parent node into the offset amount; (6.2) Determine whether the current svg node contains g label, if not, enter step (6.3), if yes, enter step (6.4); (6.3) The current label is classified according to path, line, circle, rect, text, and the offset amount is obtained; at the same time, the label is drawn using the canvas function, and step (6.5) is entered; (6.4) Get the offset amount on the current label; (6.5) Determine whether there is a child node, if yes, return to step (6.1) for loop processing, otherwise, end the traversal processing.

3. An apparatus for realizing high-performance visual processing of stock market data, characterized in that, The device comprises: a processor configured to execute computer executable instructions; a memory storing one or more computer executable instructions, which, when executed by the processor, implement the steps of the method for realizing high-performance visualization processing of stock market data according to any one of claims 1 to 2.

4. A processor for implementing high-performance visual processing of stock market data, characterized by, The processor is configured to execute computer executable instructions, which, when executed by the processor, implement the steps of the method for realizing high-performance visualization processing of stock market data according to any one of claims 1 to 2.

5. A computer readable storage medium, characterized in that, A computer program is stored thereon, which can be executed by the processor to implement the steps of the method for realizing high-performance visualization processing of stock market data according to any one of claims 1 to 2.

Images