Composite type data display method based on vue framework and waterfall algorithm

Abstract

The application discloses a composite type data display method based on a Vue framework and a waterfall algorithm, and mainly solves the problem of single data type display and high difficulty in use of the prior art.The implementation scheme is as follows: 1) data is imported, and data elements and configuration objects are obtained;2) according to the data elements, five unit models of picture format data unit, audio format data unit, video format data unit, text format data unit and time sequence diagram format data are respectively constructed according to the requirements of the configuration file;3) based on the waterfall algorithm, the waterfall display model is established by using the various data unit models;4) the endless scroll algorithm is used to further optimize the waterfall display model, the burden of page loading and request is reduced, and the data elements are displayed.The application can visually display different types of data, has excellent display performance on the page space, and can be used for controlling and data exploration of potential internal relations of batch data by users.

Description

TECHNICAL FIELD

[0001] The present application belongs to the field of computer Web development, and particularly relates to a composite data display method, which can be used for user control of internal potential relationships of batch data and data exploration. BACKGROUND

[0002] In the era of knowledge explosion, available knowledge doubles every 4 years, and new knowledge, new concepts and new fields appear every day. People are surrounded by complex information. How to efficiently process information and help users understand the distribution of data and find any potential abnormal data or errors has become a hot spot for technological innovation. With the rapid development of web technology, the emergence of the Vue framework provides a new way for data visualization. The dynamic component function allows different components to be loaded dynamically at runtime. This is very important for loading different content in response to user actions or other events, without predefining these components in the page. When performing data visualization, it is impossible to define the display model of unknown types of data in the system in advance, so the advantages of Vue dynamic components are reflected here.

[0003] For the current data processing and analysis needs, Elastic company released a visualization data analysis visualization tool named LogstashForwarder in 2010, and officially renamed it Kibana in 2013. Kibana provides a series of tools that allow you to create and modify data visualization, including line charts, bar charts, pie charts and maps. In addition, it also has a timeline function that can view the trend of data changes. The official database of Kibana is Elasticsearch, and when using it, you can configure the data visualization panel according to the configuration file imported by the user, including data objects, display forms and positions, etc. Kibana has relatively complete functions, but still has the following two shortcomings:

[0004] 1. Limitations of using Elasticsearch as the backend data storage: Kibana can only be used with Elasticsearch, and it is not convenient for small batch data display and processing.

[0005] 2. Complex configuration: Kibana needs to be set up and configured on Elasticsearch, which is extremely complex for users. Many users do not have programming or computer foundation, so using the Kibana platform is not convenient for them.

[0006] In addition, other existing technology rendering models are built for specific data types, and cannot render special types of data well. Pictures and videos may also produce distortion, seriously affecting the user's visual experience.

[0007] A method, device, medium and equipment for encapsulating echarts calling based on dynamic incoming data are disclosed in patent literature with application number CN202211264404.2. The method for encapsulating echarts calling based on dynamic incoming data is characterized in that the dynamic incoming data calling module, parameter configuration module and parameter analysis module used for generating echarts graphic report are encapsulated in a configuration parameter R output file in JSON format, and the echarts graphic report is generated by calling the configuration parameter R output file through the echarts tool in the Vue front end and dynamically inputting the data required by the configuration parameter R through the interface. The dynamic incoming data calling module is used to call the data dynamically input through the interface, the parameter configuration module is used to configure and encapsulate the abscissa, legend and ordinate of the configuration parameter R required for generating the echarts graphic report according to the called dynamic incoming data, and the parameter analysis module is used to analyze the encapsulated configuration parameter R. However, this method has two shortcomings:

[0008] Firstly, although this method can accept the configuration file to configure the chart, it is highly dependent on echarts and can only use the rendering model of echarts, and the controllability is poor. If the version of echarts is updated, it will have a great impact on this method.

[0009] Secondly, this method can only be displayed in the form of a graphic report, and cannot render other types of data objects, such as:

[0010] Pictures, videos, audios and texts. SUMMARY

[0011] The purpose of the present application is to overcome the shortcomings of the prior art and provide a composite type data display method based on the Vue framework to reduce the dependence on echarts graphic reports and improve the controllability of rendering and the displayability of data objects in other types of rich and diverse situations.

[0012] The technical idea for achieving the purpose of the present application is to provide a good data display model for different types of data by using the characteristics of Vue dynamic components, and to optimize the visual experience of users. By supporting the rendering of multiple types of data, videos, audios, pictures and text information such as news reports, social media articles and comments can be well rendered. At the same time, through data visualization and user interface design technology, a data browser developed using the Vue framework is used to improve development efficiency and maintainability through flexible components and modular design.

[0013] According to the above idea, the implementation scheme of the present application includes the following steps:

[0014] (1) Data import and reading:

[0015] (1a) Use the fs.readFile() method to read the file content into the memory;

[0016] (1b) Use the JSON.parse() method to parse the file content into a JSON object, get the data elements and configuration objects in the file, and save them to the Vue object respectively;

[0017] (2) According to the data elements and configuration objects obtained in (1b), construct various data unit models:

[0018] (2a) Use the tag to accept data elements in jpg, png, and gif formats, establish an image format data unit model, and use it to display the original information of the picture. The page effect is displayed according to the configuration object;

[0019] (2b) Use the <audio>The tag accepts data elements in MP3, Wav and Ogg formats, builds an audio format data unit model, and displays the original audio information, and the page effect is displayed according to the configuration object.

[0020] (2c) using <video>The label accepts data elements in MP4, avi and mkv formats, establishes a video format data unit model, and displays the original video information, and the page effect is displayed according to the configuration object.

[0021] (2d) using Label, accepts data elements in txt format, establishes a text format data unit model, and is used to display detailed information of text type data. The page effect is displayed according to the configuration object;

[0022] (2e) Using echarts, highcharts and apexchart chart display plug-ins, accepting data elements in json format, establishing a time series chart format data unit model including numbers and time, used to display time series data charts, and the page effect is displayed according to the configuration object;

[0023] (3) Using the constructed various data unit models, a waterfall display model is established based on the waterfall algorithm:

[0024] (3a) According to the native attributes of the dom element and the number n of data unit models to be displayed in each row, the width W and height H of each column element in the waterfall display model are calculated, and adaptive adjustment is made according to the original aspect ratio of the data;

[0025] (3b) The position of the current data unit model is determined according to the height of the element in the last row obtained in (3a), and the height of the current data unit model is determined according to the width of the element in the last row;

[0026] (3c) Repeat steps (3a) and (3b) until the parameters of all data unit models are determined, arrange various data unit models in the corresponding positions according to the determined parameters, and get the waterfall display model to achieve the optimal visual display effect;

[0027] (4) Using the infinite scroll algorithm to further optimize the waterfall display model, the remaining data is displayed:

[0028] (4a) According to the content vertical scroll pixel number sT of the dom element native attribute element of the waterfall display model, the pixel height cH of the element containing the inner margin, and the pixel height oH of the element containing the inner margin and the border, but not containing the outer margin, the actual distance L between the current window area and the bottom of the browser is calculated, and the minimum distance S between the window area and the bottom of the browser is set;

[0029] (4b) Compare the actual distance L between the current window area and the bottom of the browser with the minimum distance S:

[0030] If L is less than S, it is judged that the current window area has been scrolled close to the bottom of the page, and (4c) is executed;

[0031] Otherwise, return to (4a);

[0032] (4c) using the push native method of JavaScript, the remaining un-displayed data object is supplemented to the array that saves the current waiting display, and displayed according to the data element type and the definition of the configuration object.

[0033] Compared with the prior art, the present application has the following advantages:

[0034] 1) Since the data unit model is configured by the configuration file, the user can define the display method of the data by himself, and the configuration file is simple in structure, so that users without programming or computer foundation can easily master it.

[0035] 2) Since the echarts, highcharts and apexchart three kinds of chart rendering components are introduced, the same group of time series data can be optimally selected and displayed, and the dependence on a single component is reduced.

[0036] 3) Since the endless scroll algorithm is used, the problem of too long request time when entering the page for the first time is avoided, and the data can be dynamically cached during the user's reading process;

[0037] 4) Since the display model is constructed, the user's visual experience is greatly improved, and the display effect is more rich and professional;

[0038] 5) Since the waterfall display model is combined with the endless scroll algorithm, the changes of the webpage size and screen resolution can be automatically adapted, so that the content of the webpage is more beautiful and neat;

[0039] 4) Since the present application only involves the user interaction layer and does not depend on the selection of the backend database, the user can flexibly select the database for connection. BRIEF DESCRIPTION OF DRAWINGS

[0040] Figure 1 is the implementation flowchart of the present application;

[0041] Figure 2 is a sample diagram of the waterfall display model of the present application. DETAILED DESCRIPTION

[0042] The examples of the present application are further described in detail below in combination with the drawings.

[0043] Referring to Figure 1 , the implementation steps of the present example are as follows:

[0044] Step 1, data import and reading.

[0045] (1.1) Use the fs.readFile() method to read the file content into the Vue object.

[0046] (1.1.1) First, introduce the fs module through the require native method of Node.js;

[0047] (1.1.2) Output the read file content through the readFile method in the fs module, and save it to the data object

[0048] in the picture;

[0049] (1.2) Convert the data object in (1.1.2) from a string format to a JSON object through JSON.parse(), and this JSON object contains data elements and configuration objects.

[0050] Step 2, build various data unit models.

[0051] (2.1) Establish a picture format data unit model:

[0052] Accept file suffixes of jpg, png, and gif format data elements, according to the requirements in the configuration file obtained in (1.2), get the fields that need to be displayed, and use tags to display the above fields, and the result of the display is

[0053] picture format data unit model;

[0054] (2.2) Establish an audio format data unit model:

[0055] Accept file suffixes of MP3, Wav, and Ogg format data elements, according to the requirements in the configuration file obtained in (1.2), get the fields that need to be displayed, and use <audio>The label displays these fields, and the display result

[0056] That is, the audio format data unit model;

[0057] (2.3) Establish a video format data unit model:

[0058] After accepting the data element with the file suffix MP4, avi and mkv, according to the requirements in the configuration file obtained in (1.2), the fields required to be displayed are obtained, and the <video>The tag displays these fields, and the result is the video format data unit model.

[0059] (2.4) Establish a text format data unit model:

[0060] After accepting the data element with the txt format file suffix, the required fields to be displayed are obtained according to the requirements in the configuration file obtained in (1.2), and the< / video> < / audio> The label displays these fields, and the result of the display is the text format data unit model.

[0061] (2.5) Establish a text format data unit model:

[0062] Accept the data element in json format, get the required fields according to the configuration file obtained in (1.2), and use echarts, highcharts and apexchart chart display plug-in to display time series data. The result of the display is the time series chart data unit model.

[0063] Step 3, use the established various data unit models to establish a waterfall display model based on the waterfall algorithm.

[0064] The purpose of building a waterfall display model is to effectively use the available space as much as possible while avoiding the overlap and gap of projects. In the waterfall layout, the width of the element is determined, the height of the element changes dynamically with its width, and they are arranged in multiple columns in a certain order, which is implemented as follows:

[0065] (3.1) According to the pixel width cW of the native attribute element of the dom element and the number n of data unit models to be displayed in each row, calculate the width of each column element in the waterfall display model: W = cW ÷ n; According to the width W of each column element and the original aspect ratio k of the data element, calculate the height of the element: H = k × W;

[0066] (3.2) According to the calculation result of (3.1), record the element with the smallest height in the last row of elements, and place the data unit model to be displayed currently below it;

[0067] (3.3) Repeat steps (3.1) and (3.2) until the parameters of all data unit models are determined, arrange various data unit models in the corresponding position according to the determined parameters, get the waterfall display model, and achieve the optimal visual display effect;

[0068] Step 4, use the endless scroll algorithm to further optimize the waterfall display model and display the remaining data.

[0069] Using the endless scroll algorithm, when the user's mouse scroll approaches the bottom of the webpage, the Vue object will automatically load new content, allowing the user to easily browse a large amount of content without having to click the pagination button, while reducing the burden of page loading and requests. The specific implementation is as follows:

[0070] (4.1) According to the pixel number sT of the vertical scroll of the dom element native attribute element of the waterfall display model, the pixel height cH of the inner margin, and the pixel and height oH of the inner margin and the border, the actual distance L of the current window area and the bottom of the browser is calculated: L = sT + cH - oH;

[0071] (4.2) According to the known document display area height iH of the window, the minimum distance S of the window area and the bottom of the browser is set:

[0072] S = iH ÷ 10

[0073] (4.3) The actual distance L of the current window area and the bottom of the browser is compared with the minimum distance S:

[0074] If L is less than S, it is judged that the current window area has been scrolled close to the bottom of the page, and (4.3) is executed

[0075] Otherwise, return to (4.1);

[0076] (4.4) The remaining un-displayed data objects are supplemented to the array that saves the current waiting display objects by using the push native method of JavaScript;

[0077] (4.5) The un-displayed data objects are displayed according to the data element type and the configuration object, that is, the fields that need to be displayed are determined according to the configuration object, and the label used to display the data object is determined by the data element type; then the label is used to display the fields that need to be displayed.

[0078] In this example, the file operation module fs of JavaScript is used to obtain the data element objects and the configuration file uploaded by the user. Each data element is constructed into a data unit model according to the requirements of the configuration file, and the batch data unit models are arranged and optimized by using the waterfall algorithm to form a waterfall display model, as shown in Figure 2 . Figure 2 Each rectangular display box in the figure is a data unit model.

[0079] As can be seen from Figure 2 , the picture, video and other data information can be displayed in the model according to the original proportion, and there is no distortion problem. At the same time, the page effectively uses the available space as much as possible in layout, and avoids the overlap between models, which shows the excellent characteristics of the page space layout of the application. < / video> < / audio>

Claims

1. A method for displaying composite data types based on the Vue framework and waterfall layout algorithm, characterized in that, Includes the following steps: (1) Data import and retrieval: (1a) Use the fs.readFile() method to read the file content into memory; (1b) Use the JSON.parse() method to parse the file content into a JSON object, obtain the data elements and configuration objects in the file, and save them to the Vue object respectively; (2) Based on the data elements and configuration objects obtained in (1b), construct various data unit models: (2a) Use The tag accepts data elements with file extensions of jpg, png, and gif, and builds an image format data unit model to display the original information of the image. Its page effect is displayed according to its configuration object. (2b) Use <audio>The tag accepts data elements with file extensions of MP3, Wav, and Ogg, establishes an audio format data unit model, and is used to display the original audio information. Its page effect is displayed according to its configuration object; (2c) use <video> The tag accepts data elements with file extensions of MP4, avi, and mkv, establishes a video format data unit model, and is used to display the original video information. Its page effect is displayed according to its configured object.< / video> < / audio> (2d) use The tag accepts data elements with the file extension .txt, establishes a text format data unit model, and is used to display detailed information about text type data. Its page effect is displayed according to its configuration object. (2e) Use ECharts, HighCharts and ApexChart chart display plugins to accept data elements with JSON file extensions, build a time series chart data unit model including numbers and time, and display time series data charts. The page effect is displayed according to its configuration object. (3) Using the various data unit models constructed, a waterfall display model is established based on the waterfall algorithm: (3a) Based on the native attributes of the DOM element and the number of data unit models n to be displayed in each row, calculate the width W and height H of each column element in the waterfall display model, and make adaptive adjustments according to the original aspect ratio k of the data. (3b) Determine the position of the current data unit model based on the height of the bottom row of elements obtained in (3a), and determine the height of the current data unit model based on the width of the bottom row of elements. (3c) Repeat steps (3a) and (3b) until the parameters of all data unit models are determined. Arrange the various data unit models in their respective positions according to the determined parameters to obtain the waterfall display model and achieve the best visual display effect. (4) The waterfall display model is further optimized using a continuous scrolling algorithm to display the remaining undisplayed data: (4a) Based on the native attributes of the DOM element in the waterfall display model, the number of pixels sT for vertical scrolling of the content, the pixel height cH of the element including the padding, and the pixel height oH of the element including the padding and border but excluding the margin, calculate the actual distance L between the current viewport area and the bottom of the browser, and set the minimum distance S between the viewport area and the bottom of the browser. (4b) Compare the actual distance L between the current viewport area and the bottom of the browser with the minimum distance S: If L is less than S, then it is determined that the current viewport area has scrolled close to the bottom of the page, and (4c) is executed; Otherwise, return (4a); (4c) Using the native push method of JavaScript, the remaining undisplayed data objects are added to the array that is currently waiting to be displayed, and then displayed according to their data element types and the definition of the configuration object.

2. The method according to claim 1, characterized in that, In step (1a), the file content is read into memory using the fs.readFile() method. This is done by first importing the fs module using Node.js's native require method. Then call the readFile method in the fs module to read the imported file data and store it as data elements and configuration objects according to the data type.

3. The method according to claim 1, characterized in that, In step (1b), the JSON.parse() method is used to parse the file content into a JSON object. This involves taking the data elements and configuration object obtained from (1a) as input and outputting a JavaScript object after passing through the JSON.parse() method.

4. The method according to claim 1, characterized in that, Step (3a) calculates the width W and height H of each column element in the waterfall display model, as follows: Based on the native pixel width cW of the DOM element and the number of data unit models n to be displayed in each row, calculate the width of each column element in the waterfall display model: W = cW ÷ n; Calculate the height of the element based on its original aspect ratio k: H = k × W.

5. The method according to claim 1, characterized in that, Step (4a) Calculate the actual distance L between the current viewport area and the bottom of the browser, and set the minimum distance S between the viewport area and the bottom of the browser, as follows: L=sT+cH-oH S=iH÷10 Where sT is the number of pixels for vertical scrolling of the element's content; cH is the pixel height of the element including padding; oH is the height of the element including padding and border; and iH is the height of the window's document display area.

6. The method according to claim 1, characterized in that, In step (4c), the data objects that are not displayed are displayed according to the data element type and the configuration object. First, the fields that need to be displayed for this data object are determined according to the configuration object, and the label used to display this data object is determined according to the data element type. Then, the fields that need to be displayed are displayed using this label.

Images