WO2016045542A1

WO2016045542A1 - Method and apparatus for realizing data visualization

Info

Publication number: WO2016045542A1
Application number: PCT/CN2015/089950
Authority: WO
Inventors: 储晓颖
Original assignee: 阿里巴巴集团控股有限公司; 储晓颖
Priority date: 2014-09-26
Filing date: 2015-09-18
Publication date: 2016-03-31
Also published as: CN105512139A; CN105512139B

Abstract

A method and apparatus for realizing data visualization, wherein the method comprises: configuring a data source, a visualization style and an association relationship between the data source and the visualization style; upon receipt of a trigger request, importing the configuration information of the data source, the visualization style and the association relationship to a visual rendering framework via a customized interface; and rendering the visual rendering framework according to the configuration information and outputting the visual rendering framework to a browser engine. The method and apparatus have the advantageous effects that: the visual rendering framework as well as the data source, the visualization style and the association relationship therebetween are independently packaged, and users can import the data source, the visualization style and the correlation relationship therebetween to the visual rendering framework for rendering purposes only by configuring the data source, the visualization style and the association relationship therebetween, thus improving the efficiency of research and development and front-end performances.

Description

Method and device for realizing data visualization

Technical field

The invention relates to a method and a device for implementing data visualization, in particular to a method and a device for implementing front-end data visualization.

Background technique

With the advancement of technology, big data analysis is heating up. In addition to the problems of massive data calculation and storage, there is also an important link that affects product development efficiency and user experience, namely data visualization. However, even if there are many front-end report technologies that can be selected, such as EXT and Google LineChart, they can only be used as tools. They do not form a scalable front-end IOC development framework, which can not effectively reduce R&D costs.

In front-end reporting technology, common ones include Ext, Google LineChart, HighChart, and so on. These techniques are usually re-rendered and lightly framed and can only be used as a tool. They each specify their own data structure, users must do AJAX queries themselves, parse JSON, and then adapt data to the structure required by these tools... In this process, the tools can help users solve only the report rendering process. The data visualization technology also involves data query, data parsing, data caching, structure conversion, data interaction, timing driving, layout control, pop-and-drop floating, common parameter control, and so on. If you let these problems be solved by the developers themselves, it will often lead to different styles of javascript flooding in each product code (we can't guarantee that each front-end developer has high refactoring abstraction ability), once the common logic is not precipitated and reused. The next maintenance and expansion work will waste a lot of coding costs, learning costs, and rework costs.

Summary of the invention

It is an object of the present invention to provide a method and apparatus for implementing data visualization.

To achieve one of the above objects, an embodiment of the present invention provides a method for implementing data visualization, the method comprising:

Configuring a data source, a visualization style, and an association relationship between the data source and the visualization style;

When the trigger request is received, the configuration information of the data source, the visualization style, and the association relationship is imported into the visual rendering framework through a customized interface;

The visual rendering framework renders according to the configuration information and outputs to the browser engine.

As a further improvement of an embodiment of the present invention, the data source, the visualization style, and the visual rendering framework are separately packaged.

As a further improvement of an embodiment of the present invention, the customized interface is an IOC interface.

As a further improvement of an embodiment of the present invention, the data source and the visualization style are a many-to-many association relationship, and each data source corresponds to at least one visualization style, and each visualization style corresponds to at least one data source.

As a further improvement of an embodiment of the present invention, the “the rendering rendering frame is rendered according to the configuration information” specifically includes:

Obtaining corresponding data according to the service query address and parameter information configured in the data source;

Converting the data into a rendering model of visual style matching according to the association relationship;

According to the rendering model, the rendering tool is called for rendering.

As a further improvement of an embodiment of the present invention, the parameter information includes:

Query at least one of the period, granularity, and data ID of the data.

As a further improvement of an embodiment of the present invention, the "recalling the rendering tool according to the rendering model" specifically includes:

Converting the rendering model to a parameter format required by the corresponding rendering tool according to the structure conversion logic provided by the visualization style;

According to the parameter format, the corresponding rendering tool is called for rendering.

As a further improvement of an embodiment of the present invention, the "recalling the corresponding rendering tool according to the parameter format" specifically includes:

Calling the corresponding renderer according to the parameter format and the parameter logic provided by the visual style With rendering.

As a further improvement of an embodiment of the present invention, the “transforming the data into a rendering model of the visual style matching according to the association relationship” specifically includes:

Converting the data into a data structure that is visually matched according to the association relationship;

The data structure is retrieved and converted to a rendered model of visual style matching based on a visual style associated with the data structure.

As a further improvement of an embodiment of the present invention,

The data source is in the form of a plug-in, and each plug-in includes a service query address and parameter information of the data;

The visual style is in the form of a plugin, and each plugin includes a visual style.

As a further improvement of an embodiment of the present invention, the method further includes:

Register the event listener logic to the browser engine.

As a further improvement of an embodiment of the present invention, the method comprises:

Configuring a page coordinate function to obtain a page coordinate of a page element corresponding to the trigger event;

Configuring a data acquisition function to retrieve data corresponding to the page coordinates after acquiring the page coordinates of the page element corresponding to the trigger event;

Among them, each report type only corresponds to one page element.

In order to achieve the above object, an embodiment of the present invention provides an apparatus for implementing data visualization, and the apparatus for implementing data visualization includes:

a configuration module, configured to configure a data source, a visualization style, and an association relationship between the data source and the visualization style;

The import module is configured to import, by the customized interface, the configuration information of the data source, the visual style, and the association relationship into the visual rendering framework when the trigger request is received;

The visual rendering framework is further configured to render according to the configuration information and output to a browser engine.

As a further improvement of an embodiment of the present invention, the visual rendering framework is specifically configured to:

According to the rendering model, the rendering tool is called for rendering.

Query at least one of the period, granularity, and data ID of the data.

The corresponding rendering tool is called for rendering according to the parameter format and the parameter logic provided by the visualization style.

As a further improvement of an embodiment of the present invention,

As a further improvement of an embodiment of the present invention, the visual rendering framework is further configured to register event monitoring logic to a browser engine.

As a further improvement of an embodiment of the present invention, the configuration module is further configured to:

Among them, each report type only corresponds to one page element.

Compared with the prior art, the beneficial effects of the present invention are: separately encapsulating the visual rendering framework and the data source, the visual style, and the associated relationship, and the user only needs to configure the data source, the visual style, and the associated relationship, and then can be imported. Visual rendering framework for rendering, improving R&D efficiency and front-end performance.

DRAWINGS

1 is a flowchart of a method for implementing data visualization according to an embodiment of the present invention;

2 is a schematic diagram of a module corresponding to each link in a data source, a visualization style, and an association relationship in a visual rendering framework according to an embodiment of the present invention;

3 is a block diagram showing an IOC architecture design of a front-end role in an embodiment of the present invention;

4 is a schematic diagram of coding when an XSTING user desires to display a form in which a transaction summary related data is displayed in an embodiment of the present invention;

5 is a schematic diagram of coding of two data source configurations of a user defined ds1 and ds2 in a multi-data source scenario according to an embodiment of the present invention;

Figure 6 is a diagram showing the effect corresponding to Figure 5;

7 is a graph showing the trend of data of 1440 minutes per day in an embodiment of the present invention;

FIG. 8 is a schematic diagram showing the trend of data shown in FIG. 7 by using DOM elements in an embodiment of the present invention; FIG.

Fig. 9 is a block diagram showing an apparatus for realizing data visualization according to an embodiment of the present invention.

detailed description

The present invention will be described in detail below in conjunction with the embodiments shown in the drawings. However, the embodiments are not intended to limit the invention, and structural, method, or functional changes that are readily made by those skilled in the art in light of these embodiments are included in the scope of the invention.

As shown in FIG. 1 , an embodiment of the present invention provides a method for implementing data visualization, which include:

Configure data sources, visualization styles, and relationships between data sources and visualization styles;

In the field of data analysis, users often face a variety of data sources. For example, when the data warehouse produces BI reports, it may be necessary to obtain the ETL cleaned data in the DB (such as the number of transactions of a certain commodity), and also obtain the log analysis data (such as the UV of a certain item viewed by the user). Also add the data of the news event (such as the number of speculative behavior of a commodity), and even go to the lyric data on Weibo.

When users want to present a report, they must be clear about why they should be displayed (either tables, curves, pies, etc.), and these different styles are defined as visual styles.

The data source and the visualization style are a many-to-many association relationship, and each data source corresponds to at least one visualization style, and each visualization style corresponds to at least one data source. For example, data for minute-level statistics can be displayed either as a graph style or as a tabular style; while a tabular style can display both minute-level statistics and multiple business state machine results. In this step, the relationship between the data source and the visual style is configured accordingly to provide an association relationship between the supported visual styles in each data source, so as to original the query of the data source. JSON is transformed into a data structure that is preferred by different visual styles, and the relationship between the data source and the visual style is like an intermediate table in a relational database, maintaining a many-to-many relationship between the data source and the visual style.

When the trigger request is received, the configuration information of the data source, the visual style, and the association relationship are imported into the visual rendering framework through the customized interface, and the visual rendering framework renders according to the configuration information, and outputs the image to the browser engine.

As shown in FIG. 2, the trigger request may be, for example, a timing trigger, a user click, etc., and a complete implementation flow is encapsulated in the visual rendering framework (this part will be described in detail below), and the customized interface is exposed to the outside. The above-mentioned data source, visual style, and configuration information of the association relationship are imported. The relationship between the data source, the visual style, and the association relationship corresponding to each part of the visual rendering framework is as shown in FIG. 2, and the circular box shown in the figure needs to pass the data source, the visual style, and the association. The logical part of the relationship configuration.

In an embodiment of the invention, the process of encapsulation in the visual rendering framework is:

The Query Driver triggers an asynchronous query (Async Query) according to a certain strategy (which may be timing, artificial triggering, or initialization trigger when the page is just opened).

The asynchronous query initiates an AJAX query to the REST service that provides the data query service to obtain data (such as JSON structure data). Specifically, the asynchronous query needs to obtain corresponding data according to the service query address and parameter information configured in the data source. The service query address here refers to the query address of the REST service provided by the data source for the asynchronous query, and the parameter information includes the query. At least one of the period, granularity, and data ID of the data.

The REST service returns only the data structure defined by the server, and is not necessarily suitable for the front end. An important reason for this phenomenon is the difference in roles between the front and the rear. One of the differences is that the server is stable and the front end is flexible. In the face of frequent changes, we are more inclined to flexibly modify the front-end logic, and let the back-end services gradually precipitate the steady state. The second difference is that the data perspectives at the front and back are different, the back end tends to be a general perspective, and the front end tends to face the current view of the scene.

For example, the server side saves student information of universities across the country. The structure of the exposed REST service definition may be the partial List<Student>. The Student object contains basic information such as student number, name, gender, and professional. The REST service provides a credit score query (providing a student number as a parameter) and returns a GPA object (including individual grades). The front page of a certain class may be a class credit score presentation scene. Its preferred data structure is List<StudentGPA>, StudentGPA={student number: xxx, name: xxx, advanced mathematics: 86, English: 92, discrete Math: 77, Linux programming: 99...}, and this list is best sorted in descending order of total credits.

Due to the above-mentioned differences in requirements, it is necessary to transfer the original result returned by the REST service to the Data Model Transform for structural transformation, and become a structure with a front-end preference. The converted results can be passed to the Data Model Cache for front-end caching (you can do single-case caching, or you can implement multiple versions, depending on the situation).

The Render Driver acquires the data in the data model cache according to certain strategies (which may be timing, manual triggering, query completion triggering, etc.), and performs rendering model conversion. Multiple associations (Adaptor) in the data source provide structural transformation logic for rendering model transformations. In this process, you need to convert the data into a rendering model that matches the visual style according to the association relationship. Body, first transforms the data into a data structure that matches the visual style according to the association relationship, and then retrieves the data structure and converts the data structure into a rendering model matching the visual style according to the visual style associated with the data structure. Different visualization styles require different rendering models (such as timeline styles that require Map<Time, Value>, and table styles require a two-dimensional array), so each visual style corresponds to a proprietary association in a data source. Relationship, this association is responsible for transforming the original JSON into the rendering model of the visual style; at the same time, the visual style provides the structural transformation logic of the rendering tool for the rendering model transformation (such as converting the rendering model of the visual style itself into the EXT pie chart) Required parameter format).

Still taking the student information as an example, the List<StudentGPA> structure is applicable to the front-end scenario of the “class credit performance display”, but it does not necessarily apply to the report rendering tool currently used by developers. EXT has the structure required by it, and the requirements of GoogleLineChart. Another structure is that the biggest purpose of such a conversion step is not to be kidnapped by the tool. Once the data structure is kidnapped by a tool, it will bring many problems, such as very troublesome when changing tools, structural deviation, resulting in poor maintainability, Dashboard is difficult to support multiple presentations (such as users want to see the mood to choose to display For a table or a pie chart).

After being converted to a Render Model, it is officially hosted to various Render tools (such as EXT). Before hosting the rendering tool, you need to call the rendering tool to render according to the rendering model. Specifically, according to the structural transformation logic provided by the visual style, the required rendering model is converted into a parameter format required by the corresponding rendering tool, and the corresponding rendering tool is called according to the parameter format for rendering, so that more rendering can be adapted. tool. According to the parameter format, when the corresponding rendering tool is called for rendering, the parameter logic provided by the parameter format and the visual style is also used (for example, the visual style of the curve style will use the LineChart in EXT, and the visual style of the table style will use EXT. In the Grid, and provide the header, title and other information), call the corresponding rendering tool for rendering.

The rendering tool registers the information provided by the rendering model to the browser engine (such as inserting a <table> into the document) to complete the rendering according to its implementation. At the same time, the rendering tool may also include event monitoring logic. In this case, you need to listen to the event monitoring logic. Register to the browser engine.

If the DOM element captures an interactive event, the browser engine will call back the event listener handler, which completes the event processing logic. The logic here can be varied, either a simple alert or a data model cache. The modification of the structure may also be a manual triggering of a new query flow or rendering process.

As shown in FIG. 3, in an embodiment of the present invention, the customized interface is an IOC interface. IOC (Inversion of Control) is an important object-oriented programming rule to reduce the coupling problem of computer programs and is the core of the lightweight Spring framework. By giving control to the framework, the framework does the repetitive process, and the user only needs to focus on their business (or functionality). In the process of IOC architecture implementation, the underlying visual rendering framework is responsible for the encapsulation and implementation of a set of processes, but ignores the implementation details of all custom logic, but exposes the IOC interface to the upper layer; the middle Plugin layer is responsible for the encapsulation. Commonly used custom logic (including common data sources and common visual styles); the top layer is the logic of the final product, the coding of this layer should be as simple as possible. After the visual rendering framework and Plugin two-layer packaging, the product layer should only You need to provide the parameters necessary for different Plugins.

When designing the architecture of the IOC, the data source, visual style, and visual rendering framework are each packaged separately. The data source is configured as a plug-in. Each plug-in includes the service query address and parameter information of the data. Each data source is a data source plug-in. For example, the encapsulated data source includes minute-level statistics, second-level data statistics, and ERROR. Log segmentation statistics, single business state machine, massive slot full table traversal query and many other data sources of different formats; similarly, the visual style is also configured as a plug-in form, each plug-in includes a visual style, Each visual style is a visual style plug-in, such as graphs, pie charts, tables, and histograms. The XFLUSH also includes more complex styles such as link graphs, mesh graphs, and light graphs.

As shown in Figure 4, a practical example written for the user, he expects to present a table showing the "transaction summary" related data. The coding content he needs includes:

The first box: Provide the necessary parameters for the data source, such as schema=DataSource1 is to select a data source plug-in (DataSource1 selects the minute-level statistical data source), table is the table Show which table of statistics is selected (you can think of the results of thousands of minute-level statistical rules in XFLUSH as thousands of tables, and in this case, transaction-related data tables), and finally this data source object Also provides a special parameter for Style4: valueColIndex=3, indicating that the data representing the value in the result returned by this table will be provided in the third column to Style4.

The second box: Provide the necessary parameters for the visual style, such as the schema is to select the plugin (Style4 is the advanced table display plugin), the heads are in the definition of the header (the third column of the header is "quantity" also corresponds to valueColIndex), defaultSortColIndex=3 means sorting by column 3 by default, defaultSortCount means how many times before the default sorting is displayed.

The third box: Provide some basic information for the report, such as location, size, refresh rate, title, and more.

Only with this information, you can display the reports that users need. With the support of the increasingly rich plug-in library, the data sources and style combinations that can be supported can meet all the daily needs, and users only need simple coding. , you can easily achieve a variety of different effects.

As shown in Figure 5 and Figure 6, the role is more obvious in the scenario of multiple data sources:

In an embodiment of the present invention, it is desirable to display data of multiple data sources in the same curve report, and the user only needs to define multiple data sources (FIG. 5 defines two data source configurations of ds1 and ds2, FIG. 6 for the effect). Moreover, multiple data sources can be different plug-ins (in this case, the DataSource1 plug-in can be used in combination with any data source plug-in, as long as they all implement the association relationship that supports the visual style of the graph, for example, When the double eleventh promotion, ds1 obtains the transaction data, and ds2 obtains the microblog lyric data (the number of microblogs associated with double eleven appearing every minute), and then displays it in the same graph). Moreover, the asynchronous query link also utilizes Javascript's Deferred technology to implement a synchronous programming model, which simplifies the framework design, solves the time difference problem of multiple asynchronous query returns, and avoids inferior solutions such as polling.

Not only that, the event monitoring mechanism, interactive control, pop-up dynamic report and other functions provided by the framework are exposed to the user with the most simplified IOC interface, which minimizes the user code and only provides the customized parameters that are absolutely needed. Consider the underlying implementation details.

As shown in Figure 7, in the traditional front-end reporting technology, some can only achieve the DOM element level. Rendering and control. For example, a graph shows the data trend of 1440 minutes a day, in which there will be more than one thousand data (1440 points) to be rendered. Before the emergence of HTML5 and other technologies, front-end reporting technology is often very passive to adopt some complex solutions. It even produces DOM elements that are equivalent to the number of data points to draw the curve.

As shown in Figure 8, these <circle> elements ultimately plot the curves in the graph. This kind of practice, whether good or bad, is still slightly inferior in performance, at least in the interaction event will be very passive. For example, if you want to listen to a mouse click event at a certain point in the curve, then 1440 DOM elements should be properly registered, manage their life cycle, handle their interaction events, and so on. The DOM element is actually a relatively coarse-grained runtime object (which contains a lot of metadata and runtime data), which will put a big burden on the browser engine. Moreover, as a rendering-oriented tool, it is often difficult to add fine-grained interactive functions (such as a mouse click event that wants to listen to a "point" on the LineChart in Figure 8, the tool may not be able to open a simple API). The granularity of the interactive API exposed by the tool to the user is generally coarser (such as dragging and clicking on the entire chart).

In an implementation manner of the present application, in order to implement fine-grained interactive rendering control (such as a curve of 1440 "points", it is desirable that a certain area in the mouse click curve can pop up another detailed report, for example, to control the curve differently. The color of the area segment, such as the desire to use the graph as a node to draw a network of interlaced link diagrams, etc., using HTML5 Canvas technology to achieve a set of simple and easy to use rendering tools, which is similar to EXT, GoogleLineChart The graphics tool javascript library. The biggest difference between this tool library and the conventional implementation is the full use of the "time-for-space" design in the game engine.

In the scene rendered by the game engine client, 2D, 3D maps or models can be fully manufactured and stored as data files. The runtime dynamically loads data files according to scene switching, loads maps and model data into memory, and finally Finish rendering. For example, in a 2D game, if a map of a wild grass is a picture, it may reach 1MB (if there are 1024*1024 pixels, the RGB value of each pixel occupies one byte), the map is loaded. After that, the whole picture is drawn to the interface. The actual design is often much simpler: making 4 small pictures ABCD, reflecting slightly different vegetation features, the arrangement of these 4 small pictures creates different map scenes. (For example, A stands for pure grass, B stands for grass with small stones, C stands for grass with weeds, and D stands for bare loess. The 2D map file can be just a two-dimensional array. The elements are ABCD four. Different arrangement and combination can form different map appearances. This method can greatly reduce the burden of storage space loss, memory usage, element management and interaction control. The only increase is the logic complexity during rendering. It takes a certain amount of calculation (not as simple as drawing a large picture).

In one embodiment of the data visualization implementation method corresponding to the present application:

First, the configuration page coordinate function is configured to obtain the page coordinates of the page element corresponding to the trigger event;

Or the example of the 1440 "point" curve, the original data is Map<Time, Value>, the traditional approach is to generate 1440 DOM elements, registered to the browser engine, the latter complete rendering and element lifecycle management, event control . The method of the present invention is to provide a get page coordinate function (getPositionByEntry); for each entry in the map (that is, each point), call the page coordinate function function as a parameter (Time can calculate the x coordinate, Value can be calculated Out y coordinates); use the HTML5 Canvas to complete the "dot" drawing (draw color, size and other effects according to various personalization requirements).

Secondly, the configuration obtaining data function is configured to retrieve data corresponding to the page coordinates after acquiring the page coordinates of the page element corresponding to the trigger event; wherein each report type corresponds to only one page element.

When the mouse click event occurs, the mouse coordinate is used as a parameter to call the get data function (getEntryByPosition, the x coordinate can be used to derive the closest Entry, if the total length of the x-axis is N pixels, a total of M points, the current x coordinate is x, that is Math.round (x/(N/M)) entries); take out the data of this entry for subsequent event monitoring.

In this way, only a little more computational effort is made in the mapping and interaction, and the maintenance cost of the space and loss occupied by the 1440 DOM elements can be avoided. In addition to the graphs mentioned in the above embodiments, the processing ideas in the form of a table, a pie chart, and the like are similar, and are not described herein again.

As shown in FIG. 9, in an embodiment of the present invention, the data visualization implementing apparatus 100 includes The configuration module 10, the import module 20, and the visual rendering framework 30 are provided.

The configuration module 10 is configured to configure a data source, a visualization style, and an association relationship between the data source and the visualization style;

The import module 20 is configured to import the configuration information of the data source, the visual style, and the association relationship into the visual rendering framework 30 through the customized interface when the trigger request is received, and the visual rendering framework 30 renders according to the configuration information, and outputs the image to the browser engine. .

As shown in FIG. 2, the trigger request may be, for example, a timing trigger, a user click, etc., and a complete implementation flow is encapsulated in the visual rendering framework (this part will be described in detail below), and the customized interface is exposed to the outside. The above-mentioned data source, visual style, and configuration information of the association relationship are imported. The relationship between the data source, the visual style, and the association relationship corresponding to each part of the visual rendering framework is as shown in the figure. The circular box shown in the figure is the data source, the visual style, and the association relationship. The logical part of the configuration.

In an embodiment of the present invention, the visual rendering framework 30 includes:

The asynchronous query initiates an AJAX query to the REST service that provides the data query service to obtain data (such as JSON structure data). Specifically, the asynchronous query in the visual rendering framework 30 is configured to obtain corresponding data according to the service query address and parameter information configured in the data source, where the service query address refers to the REST service provided by the data source for the asynchronous query. The address is queried, and the parameter information includes at least one of a period, a granularity, and a data ID of the query data.

The Render Driver acquires the data in the data model cache according to certain strategies (which may be timing, manual triggering, query completion triggering, etc.), and performs rendering model conversion. Multiple associations (Adaptor) in the data source provide structural transformation logic for rendering model transformations. Here over In the process, the visual rendering framework 30 needs to convert the data into a rendering model matching the visual style according to the association relationship. More specifically, the data is first converted into a data structure matching the visual style according to the association relationship, and then the data structure is retrieved and according to The visual style associated with the data structure transforms the data structure into a rendering model that matches the visual style. Different visualization styles require different rendering models (such as timeline styles that require Map<Time, Value>, and table styles require a two-dimensional array), so each visual style corresponds to a proprietary association in a data source. Relationship, this association is responsible for transforming the original JSON into the rendering model of the visual style; at the same time, the visual style provides the structural transformation logic of the rendering tool for the rendering model transformation (such as converting the rendering model of the visual style itself into the EXT pie chart) Required parameter format).

After being converted to a Render Model, it is officially hosted to various Render tools (such as EXT). Before being hosted to the rendering tool, the visual rendering framework 30 is also used to invoke the rendering tool for rendering based on the rendering model. Specifically, according to the structural transformation logic provided by the visual style, the required rendering model is converted into a parameter format required by the corresponding rendering tool, and the corresponding rendering tool is called according to the parameter format for rendering, so that more rendering can be adapted. tool. According to the parameter format, when the corresponding rendering tool is called for rendering, the parameter logic provided by the parameter format and the visual style is also used (for example, the visual style of the curve style will use the LineChart in EXT, and the visual style of the table style will use EXT. In the Grid, and provide the header, title and other information), call the corresponding rendering tool for rendering.

The rendering tool registers the information provided by the rendering model to the browser engine (such as inserting a <table> into the document) according to the different implementations, and completes the rendering; at the same time, The rendering tool may also include event monitoring logic that the visual rendering framework 30 will register with the browser engine.

As shown in FIG. 3, in an embodiment of the present invention, the customized interface is an IOC interface. IOC (Inversion of Control) is an important object-oriented programming rule to reduce the coupling problem of computer programs and is the core of the lightweight Spring framework. By giving control to the framework, the framework does the repetitive process, and the user only needs to focus on their business (or functionality). Therefore, the data visualization implementation method provided by the present invention is actually a process of implementing the IOC architecture in the original front-end visualization implementation process, the query process and the rendering process. The underlying visual rendering framework is responsible for the encapsulation and implementation of a set of processes, but ignores the implementation details of all custom logic, but exposes the IOC interface outwards, waiting for the upper layer implementation; the middle Plugin layer is responsible for encapsulating commonly used custom logic (including common The data source and the common visual style); the top layer is the logic of the final product. The coding of this layer should be as simple as possible. After the visual rendering framework and the Plugin two-layer package, the product layer should only need to provide the parameters necessary for different Plugins. Just fine.

When designing the architecture of the IOC, the data source, visual style, and visual rendering framework are each packaged separately. The data source is configured as a plug-in. Each plug-in includes the service query address and parameter information of the data. Each data source is a data source plug-in. For example, the encapsulated data source includes minute-level statistics, second-level data statistics, and ERROR. Log segmentation statistics, single business state machine, massive slot full table traversal query and many other data sources of different formats; similarly, the visual style is also configured as a plug-in form, each plug-in includes a visual style, Each visual style is a visual style plug-in, such as graphs, pie charts, tables, histograms and other implementation logic, and can also include more complex styles such as link diagrams, mesh diagrams, and light diagrams.

The first box: Provide the necessary parameters for the data source, such as schema=DataSource1 is to select a data source plug-in (DataSource1 selects the minute-level statistical data source), and table indicates which table to select the statistical results (can be The results of thousands of minute-level statistical rules are treated as thousands of tables, and in this case, transaction-related data tables are used. Finally, this data source object also provides a unique parameter for Style4: valueColIndex=3, indicating this table. The data representing the value in the returned result is placed in the third column and supplied to Style4.

As shown in Figure 5 and Figure 6, the role in the multi-data source scenario is more obvious:

In an embodiment of the present invention, it is desirable to display data of multiple data sources in the same curve report, and the user only needs to define multiple data sources (FIG. 5 defines two data source configurations of ds1 and ds2, FIG. 6 for the effect). Moreover, multiple data sources can be different plug-ins (in this case, the DataSource1 plug-in can be used in combination with any data source plug-in, as long as they all implement the association relationship that supports the visual style of the graph, for example, When the double eleventh promotion, ds1 obtains the transaction data, and ds2 obtains the microblog lyric data (the number of microblogs associated with double eleven appearing every minute), and then displays it in the same graph). Moreover, XSTING's asynchronous query link also utilizes Javascript's Deferred technology to implement a synchronous programming model, simplifying the framework design, solving the time difference problem of multiple asynchronous query returns, and avoiding inferior solutions such as polling.

Not only that, the event monitoring mechanism, interactive control, pop-up dynamic report and other functions provided by the framework are exposed to the user with the most simplified IOC interface, which minimizes the user code and only provides absolute Customized parameters are required, and there is no need to consider the underlying implementation details.

As shown in Figure 7, in the traditional front-end reporting technology, some can only achieve DOM element level rendering and control. For example, a graph shows the data trend of 1440 minutes a day, in which there will be more than one thousand data (1440 points) to be rendered. Before the emergence of HTML5 and other technologies, front-end reporting technology is often very passive to adopt some complex solutions. It even produces DOM elements that are equivalent to the number of data points to draw the curve.

In the scene rendered by the game engine client, 2D, 3D maps or models can be fully manufactured and stored as data files. The runtime dynamically loads data files according to scene switching, loads maps and model data into memory, and finally Finish rendering. For example, in a 2D game, if a map of a wild grass is a picture, it may reach 1MB (if there are 1024*1024 pixels, the RGB value of each pixel occupies one byte), the map is loaded. After that, it’s actually the whole picture. Draw on the interface. The actual design is often much simpler: making 4 small pictures ABCD, reflecting the slightly different vegetation features, the arrangement of the 4 small pictures creates different map scenes (such as A for pure grass and B for small) Stone grass, C stands for weedy grass, D stands for bare loess, the 2D map file can be just a two-dimensional array, the elements are ABCD four, one can form different maps by different arrangement Appearance), this approach can greatly reduce the burden of storage space loss, memory footprint, element management and interaction control, the only increase is the logic complexity of rendering, requires a certain amount of calculation (not like drawing a large The picture is so simple).

Corresponding to an embodiment of the data visualization implementation device of the present application:

First, the configuration module 10 is further configured to: configure a page coordinate function to obtain a page coordinate of a page element corresponding to the trigger event;

Next, the configuration module 10 configures the acquisition data function to retrieve data corresponding to the page coordinates after acquiring the page coordinates of the page element corresponding to the trigger event; wherein each report type corresponds to only one page element.

In this way, only a little more computational effort is made in the mapping and interaction, and the maintenance cost of the space and loss occupied by the 1440 DOM elements can be avoided. In addition to the curves mentioned in the above embodiments The processing ideas in the styles of graphs, tables, and pie charts are similar, and will not be described here.

In summary, the visual rendering framework and the data source, the visual style and its associated relationships are independently encapsulated, and the user only needs to configure the data source, the visual style and its association relationship, and then can import the visual rendering framework for rendering, and improve the research and development. Efficiency and front-end performance.

A person skilled in the art can clearly understand that for the convenience and brevity of the description, the specific working process of the system, the device and the unit described above can refer to the corresponding process in the foregoing method embodiments, and details are not described herein again.

In the several embodiments provided by the present invention, it should be understood that the disclosed system, apparatus, and method may be implemented in other manners. For example, the device implementations described above are merely illustrative. For example, the division of the unit is only a logical function division. In actual implementation, there may be another division manner, for example, multiple units or components may be combined or Can be integrated into another system, or some features can be ignored or not executed. In addition, the mutual coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection through some interface, device or unit, and may be in an electrical, mechanical or other form.

The units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, may be located in one place, or may be distributed to multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.

In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above integrated unit can be implemented in the form of hardware or in the form of hardware plus software functional units.

The above-described integrated unit implemented in the form of a software functional unit can be stored in a computer readable storage medium. The software functional unit is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor to perform the method of various embodiments of the present invention. Part of the steps. The foregoing storage medium includes: a USB flash drive, a mobile hard disk, a read-only memory (ROM), A variety of media that can store program code, such as random access memory (RAM), disk, or optical disk.

Finally, it should be noted that the above embodiments are only for explaining the technical solutions of the present invention, and are not intended to be limiting; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art will understand that Modifications of the technical solutions described in the foregoing embodiments, or equivalents of the technical features of the embodiments of the present invention, are not to be construed as a departure from the spirit and scope of the embodiments of the present invention.

Claims

A method for implementing data visualization, characterized in that the method comprises:

Configuring a data source, a visualization style, and an association relationship between the data source and the visualization style;

When the trigger request is received, the configuration information of the data source, the visualization style, and the association relationship is imported into the visual rendering framework through a customized interface;

The visual rendering framework renders according to the configuration information and outputs to the browser engine.
The method for implementing data visualization according to claim 1, wherein the data source, the visualization style, and the visual rendering framework are separately packaged.
The method for implementing data visualization according to claim 1, wherein the customized interface is an IOC interface.
The method for implementing data visualization according to claim 1, wherein the data source and the visualization style are in a many-to-many association relationship, and each data source corresponds to at least one visualization style, and each visualization style corresponds to at least one A data source.
The method for implementing data visualization according to claim 1, wherein the "the rendering rendering framework performs rendering according to the configuration information" specifically includes:

Obtaining corresponding data according to the service query address and parameter information configured in the data source;

Converting the data into a rendering model of visual style matching according to the association relationship;

According to the rendering model, the rendering tool is called for rendering.
The method for implementing data visualization according to claim 5, wherein the parameter information comprises:

Query at least one of the period, granularity, and data ID of the data.
The method for implementing the data visualization according to claim 5, wherein the "recalling the rendering tool according to the rendering model" specifically includes:

Converting the rendering model to a parameter format required by the corresponding rendering tool according to the structure conversion logic provided by the visualization style;

According to the parameter format, the corresponding rendering tool is called for rendering.
The method for realizing the data visualization according to claim 7, wherein the "recalling the corresponding rendering tool according to the parameter format" specifically includes:

The corresponding rendering tool is called for rendering according to the parameter format and the parameter logic provided by the visualization style.
The method for realizing data visualization according to claim 5, wherein the "transforming the data into a rendering model matching the visual style according to the association relationship" specifically includes:

Converting the data into a data structure that is visually matched according to the association relationship;

The data structure is retrieved and converted to a rendered model of visual style matching based on a visual style associated with the data structure.
The method for implementing data visualization according to claim 5, characterized in that

The data source is in the form of a plug-in, and each plug-in includes a service query address and parameter information of the data;

The visual style is in the form of a plugin, and each plugin includes a visual style.
The method for implementing data visualization according to claim 1, wherein the method further comprises:

Register the event listener logic to the browser engine.
The method for implementing data visualization according to claim 1, wherein the method comprises:

Configuring a page coordinate function to obtain a page coordinate of a page element corresponding to the trigger event;

Configuring a data acquisition function to retrieve data corresponding to the page coordinates after acquiring the page coordinates of the page element corresponding to the trigger event;

Among them, each report type only corresponds to one page element.
An apparatus for implementing data visualization, wherein the device for implementing data visualization comprises:

a configuration module, configured to configure a data source, a visualization style, and an association relationship between the data source and the visualization style;

An import module, configured to: when the trigger request is received, the data source, the visual style, and the association relationship The configuration information is imported into the visual rendering framework through a customized interface;

The visual rendering framework is further configured to render according to the configuration information and output to a browser engine.
The apparatus for implementing data visualization according to claim 13, wherein the data source, the visualization style, and the visual rendering framework are separately packaged.
The device for implementing data visualization according to claim 13, wherein the customized interface is an IOC interface.
The apparatus for implementing data visualization according to claim 13, wherein the data source and the visualization style are in a many-to-many association relationship, and each data source corresponds to at least one visualization style, and each visualization style corresponds to at least one A data source.
The apparatus for implementing data visualization according to claim 13, wherein the visual rendering framework is specifically configured to:

Obtaining corresponding data according to the service query address and parameter information configured in the data source;

Converting the data into a rendering model of visual style matching according to the association relationship;

According to the rendering model, the rendering tool is called for rendering.
The device for implementing data visualization according to claim 17, wherein the parameter information comprises:

Query at least one of the period, granularity, and data ID of the data.
The apparatus for implementing data visualization according to claim 17, wherein the visual rendering framework is specifically configured to:

Converting the rendering model to a parameter format required by the corresponding rendering tool according to the structure conversion logic provided by the visualization style;

According to the parameter format, the corresponding rendering tool is called for rendering.
The apparatus for implementing data visualization according to claim 19, wherein the visual rendering framework is specifically configured to:

The corresponding rendering tool is called for rendering according to the parameter format and the parameter logic provided by the visualization style.
The apparatus for implementing data visualization according to claim 17, wherein the visual rendering framework is specifically configured to:

Converting the data into a data structure that is visually matched according to the association relationship;

The data structure is retrieved and converted to a rendered model of visual style matching based on a visual style associated with the data structure.
The method for implementing data visualization according to claim 17, wherein

The data source is in the form of a plug-in, and each plug-in includes a service query address and parameter information of the data;

The visual style is in the form of a plugin, and each plugin includes a visual style.
The apparatus for implementing data visualization according to claim 13, wherein the visual rendering framework is further configured to register event monitoring logic to a browser engine.
The device for implementing data visualization according to claim 13, wherein the configuration module is further configured to:

Configuring a page coordinate function to obtain a page coordinate of a page element corresponding to the trigger event;

Configuring a data acquisition function to retrieve data corresponding to the page coordinates after acquiring the page coordinates of the page element corresponding to the trigger event;

Among them, each report type only corresponds to one page element.