CN111427906A - Dragging type data visualization system for multi-component mixed application - Google Patents
Dragging type data visualization system for multi-component mixed application Download PDFInfo
- Publication number
- CN111427906A CN111427906A CN202010242002.7A CN202010242002A CN111427906A CN 111427906 A CN111427906 A CN 111427906A CN 202010242002 A CN202010242002 A CN 202010242002A CN 111427906 A CN111427906 A CN 111427906A
- Authority
- CN
- China
- Prior art keywords
- data
- component
- event
- module
- submodule
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/242—Query formulation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/22—Indexing; Data structures therefor; Storage structures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/242—Query formulation
- G06F16/2428—Query predicate definition using graphical user interfaces, including menus and forms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/27—Replication, distribution or synchronisation of data between databases or within a distributed database system; Distributed database system architectures therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0486—Drag-and-drop
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Computational Linguistics (AREA)
- Human Computer Interaction (AREA)
- Mathematical Physics (AREA)
- Software Systems (AREA)
- Computing Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a dragging type multi-component mixed application data visualization system, which simplifies, systematizes and centralizes data modeling and visualization processes which are required to be carried out respectively originally by utilizing a component library which can be subjected to visualization difference configuration and self-defined introduction through a simple dragging mode, reduces professional requirements of operators in the visualization field, provides a data online visualization service system which is simple in operation, good in display effect and high in individuality degree, helps the operators to quickly construct data visualization applications such as a data large screen, a data statistical analysis report and a Chinese data report, and timely responds to data display and adjustment requirements.
Description
Technical Field
The invention relates to the technical field of data visualization, in particular to a dragging type data visualization system for multi-component mixed application.
Background
With the development of science and technology, data has been in an explosive growth situation, more and more companies pay attention to the importance of the data, but most companies have insufficient cost to invest in continuous data analysis in a short period. At present, there are many companies providing data visualization services in China, and the services provided by the companies are roughly divided into two types: one is specialized tools (e.g., BI systems), and the other is one-time customized design.
The professional tools provide some fixed display components such as various charts and form components in a data visualization part, so that the operation is simple, but the presentation effect of the components cannot be customized and modified; the limitation of disposable customized design is larger, all data modeling and visualization effects need to be completed by manual coding, and although the appearance is more attractive, the reusability is poor, the maintainability is poor, the timeliness is poor, the requirement on the skill of a developer is higher, and the data display and adjustment requirements cannot be responded in time.
Disclosure of Invention
The invention mainly aims to provide a dragging type data visualization system for multi-component hybrid application, and aims to solve the technical problems in the prior art.
In order to achieve the above object, an embodiment of the present invention provides a data visualization system for a dragging type multi-component hybrid application, where the system includes: the system comprises a data source management module, a data set management module and a data report management module;
the data source management module is used for acquiring and storing configuration information of a data source of a database type, synchronizing a table structure of a selected data table in the data source of the database type based on a synchronization rule in the configuration information, and displaying the data table meeting the synchronization rule in a data table list of the data source of the database type after synchronization is finished;
the data set management module is used for receiving a first dragging operation and a first selection operation, and associating the data table corresponding to the first dragging operation by the association type corresponding to the first selection operation to obtain a data set;
the data report management module is used for receiving a second selection operation, displaying a corresponding design panel according to the second selection operation, receiving a second dragging operation, displaying a corresponding component on the design panel according to the second dragging operation, receiving component setting information, setting a display style of the component according to the component setting information, receiving data binding configuration information, binding a corresponding data set and the component according to the data binding configuration information, converting the component in the design panel into page element space occupation, automatically carrying out equal-ratio scaling display on the page element according to resolution and browser size, acquiring data from the data set, and binding the data to the component for display.
Optionally, the data source management module is further configured to:
converting each sheet page in the excel type data source into a data table, displaying the converted data table in a data table list of the excel type data source, and modifying the data table or table field alias in the data table list when a modification operation is received.
Optionally, the data set management module is further configured to:
receiving an SQ L statement, and associating a data table corresponding to the SQ L statement to obtain a data set, wherein parameters appearing in the SQ L statement are exposed to parameters of the data set.
Optionally, the data report management module includes: the system comprises a component library, a design submodule, an event submodule and a rendering submodule, wherein the component library comprises a plurality of preset data display components and query control components; the design submodule comprises a report design panel, a large-screen design panel and a report design panel; the event submodule is used for realizing interactive linkage of data between the component and the data set on the basis of a JS event mechanism; and the rendering submodule performs visual statistical display page rendering of data based on the configuration information on the design submodule and the event submodule.
Optionally, when an import operation is received, importing a custom component corresponding to the import operation into the component library.
Optionally, when the report design panel or the large-screen design panel is displayed based on a second selection operation, the component to be displayed is selected from the component library based on the second dragging operation, the display style of the component is set based on component setting information, the component setting information includes color, margin and size, data binding configuration information is received, the data binding configuration information includes a data set and display field information, an aggregation mode of the display field is set, the aggregation mode includes a maximum value, a minimum value and an average value, and the bound data set is subjected to filtering conditions and data set parameter binding.
Optionally, the event submodule includes: the event configuration sub-module, the event monitoring sub-module, the event broadcasting sub-module and the event execution sub-module; the event configuration submodule is used for configuring linkage, skipping, exporting, displaying/hiding the event and customizing the JS event; the event monitoring submodule is used for establishing component event monitoring, and comprises a data change event of a monitoring drop-down box; the event broadcasting submodule is used for broadcasting the event by the component, and after the data of the drop-down box is changed, the event broadcasting submodule is used for broadcasting and informing other related components in the design panel that corresponding event triggering needs to be carried out; and the event execution sub-module is used for the component to execute the monitored event.
Optionally, the rendering sub-module includes: the page element rendering sub-module, the component event rendering sub-module and the component data rendering sub-module; the page element rendering sub-module is used for converting the components in the design panel into page element occupation and automatically carrying out equal-ratio zooming display on the page elements according to the resolution and the size of the browser; the component event rendering sub-module is used for calling the event sub-module to bind and execute corresponding component events, and the component events comprise various initialization events, clicking events, data change events and carriage return events on the components; and the component data rendering sub-module is used for acquiring data from the data set according to the component data configuration and binding the data to the component for display.
Optionally, the system is based on a B/S architecture.
The data visualization system of the dragging type multi-component mixed application organically combines the data source, the data set, the components, the design panel and the event together based on the function combination of the data source management module, the data set management module and the data report management module and the mixed application of all components in the data report management module, so that an operator can quickly realize the business conversion from the original data to the visualization report on the basis, the whole process does not need to master high development skills, and the data visualization system can be realized by using a simple dragging mode.
Drawings
FIG. 1 is a schematic diagram of an embodiment of a data visualization system for a dragged multi-component hybrid application according to the present invention;
FIG. 2 is a block diagram of an embodiment of the data report management module 30;
FIG. 3 is a block diagram of an embodiment of the event submodule 303;
fig. 4 is a schematic structural diagram of an embodiment of the rendering submodule 304.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
The embodiment of the invention provides a dragging type data visualization system for multi-component mixed application. The core of the embodiment is as follows: original data sources are converted into reusable data sets with business significance through the data source management module and the data set management module, and multi-dimensional diversified visual data display of the data sets is rapidly achieved through the data report management module.
Referring to fig. 1, fig. 1 is a schematic structural diagram of an embodiment of a data visualization system for a dragged multi-component hybrid application according to the present invention. As shown in FIG. 1, in one embodiment, the data visualization system for a drag-and-drop multi-component hybrid application comprises: a data source management module 10, a data set management module 20 and a data report management module 30;
the data source management module 10 is configured to acquire and store configuration information of a data source of a database type, perform table structure synchronization on a selected data table in the data source of the database type based on a synchronization rule in the configuration information, and display a data table conforming to the synchronization rule in a data table list of the data source of the database type after synchronization is completed;
in this embodiment, the data source management module 10 is responsible for accessing a data source that needs to be visually analyzed in a form configuration manner. The operator needs to fill in configuration information of a data source, the data source can be a database, and configuration information such as an IP (Internet protocol), a port, an account number, a password, a synchronization rule and the like of the database needs to be filled in during configuration. For a data source of a database type, after the data source is configured and stored, the system automatically synchronizes the table structure according to the synchronization rule specified by an operator, the synchronization rule can select which tables need to be synchronized or not, and after synchronization is completed, all data table information meeting the synchronization rule under the data source is displayed in a data table list of the data source.
Further, in an embodiment, the data source management module 10 is further configured to:
converting each sheet page in the excel type data source into a data table, displaying the converted data table in a data table list of the excel type data source, and modifying the data table or table field alias in the data table list when a modification operation is received.
In this embodiment, the data source may also be an Excel table, and the local Excel file is directly dragged and uploaded during configuration. Each sheet page of the Excel-type data source can be automatically converted into a data sheet, the converted data sheet can be displayed in a data sheet list of the data source, and an operator can continue to perform data preview, data sheet or sheet field alias modification operation on the data sheet.
The data set management module 20 is configured to receive a first dragging operation and a first selection operation, and associate a data table corresponding to the first dragging operation with an association type corresponding to the first selection operation to obtain a data set;
in this embodiment, the data set management module 20 is responsible for building a data set (multidimensional data model), selects a specific data source based on data analysis requirements, and performs associated combined modeling on a plurality of data tables in a data table list of the data source, and a simple and easy-to-use drag modeling manner may be used in the modeling process. When a dragging modeling mode is used, an operator can select a plurality of data tables and drag the data tables to a design canvas, and association types (such as inner connection, left outer connection and right outer connection) are required to be selected among the data tables for condition association to obtain a data set, so that conversion from original data to the data set meeting the service requirement is realized.
Further, in an embodiment, the data set management module 20 is further configured to:
receiving an SQ L statement, and associating a data table corresponding to the SQ L statement to obtain a data set, wherein parameters appearing in the SQ L statement are exposed to parameters of the data set.
In this embodiment, a highly professional SQ L modeling manner may also be used, the SQ L modeling requires an operator to write a general SQ L statement that meets the currently specified data source syntax specification, and the SQ L with parameter condition judgment may also be supported, for example, when a certain parameter has a value, a filtering condition is added to the SQ L logic.
For example, an order basic information table and an order detail table exist under a certain data source, the basic information table comprises order numbers, order regions, order dates, order total amounts and the like, the detail table comprises categories, commodity amounts, order numbers and the like of each commodity in the order, if commodity sales conditions of each category of each region need to be counted, an operator needs to perform relevant modeling on the two data tables in the data set, in the operation process, a data set with both regions and commodity categories can be obtained finally by using a dragging mode or a compiling L mode, visual chart components in subsequent data reports can be bound, the constructed data set comprises all table fields on the relevant data tables, the operator can perform field display hiding, alias, field data mapping values, field type conversion, data set filtering condition setting, SQ L parameters appearing in the relevant data tables, and can only perform data field addition calculation according with requirements when the data sets meet requirements of the requirements of a secondary operation system, such as the data sets meeting requirements of relevant data addition calculation and the requirements of the order.
The data report management module 30 is configured to receive a second selection operation, display a corresponding design panel according to the second selection operation, receive a second dragging operation, display a corresponding component on the design panel according to the second dragging operation, receive component setting information, set a display style of the component according to the component setting information, receive data binding configuration information, bind a corresponding data set and the component according to the data binding configuration information, convert the component in the design panel into an occupied page element, automatically perform proportional scaling display on the page element according to resolution and a browser size, acquire data from the data set, and bind the data to the component for display.
In this embodiment, the data report management module 30 is responsible for the visual design and display of various data statistical reports, Chinese complex reports, and data large screens, and an operator drags a component in the component library on the design panel, binds an associated data set and a related event on the component, and finally realizes the visual statistical display of data through the rendering module.
Referring to fig. 2, fig. 2 is a schematic structural diagram of an embodiment of the data report management module 30. As shown in fig. 2, in one embodiment, the data report management module 30 includes: the system comprises a component library 301, a design sub-module 302, an event sub-module 303 and a rendering sub-module 304, wherein the component library 301 comprises a plurality of preset data display type components and query control type components; the design submodule 302 comprises a report design panel, a large-screen design panel and a report design panel; the event submodule 303 is configured to implement interactive linkage of data between the component and the data set based on a JS event mechanism; the rendering submodule 304 performs visualization statistics of data to display page rendering based on the configuration information on the design submodule and the event submodule.
Further, in an embodiment, when an import operation is received, a custom component corresponding to the import operation is imported into the component library.
In this embodiment, a plurality of data display types and query control type components such as an Echarts chart, a CUI5 form, a multidimensional table and the like are encapsulated in the component library 301, the component library supports the introduction of a custom component, and an operator can realize the introduction of a personalized service component based on a component specification.
Further, in an embodiment, when the report design panel or the large-screen design panel is displayed based on a second selection operation, a component to be displayed is selected from a component library based on the second selection operation, a display style of the component is set based on component setting information, the component setting information includes color, margin and size, data binding configuration information is received, the data binding configuration information includes a data set and display field information, an aggregation mode of display fields is set, the aggregation mode includes a maximum value, a minimum value and an average value, and filtering conditions and data set parameter binding are performed on the bound data set.
In this embodiment, the design sub-module 302 provides a report design panel based on grid layout, a large screen design panel based on absolute layout, and a report design panel similar to Excel according to different application modes. The method comprises the steps that display style information such as background colors, canvas themes and canvas sizes can be set on a design panel, an operator selects components to be displayed from a component library in a dragging mode on a report design panel and a large-screen design panel, the display styles of the components such as colors, margins, sizes and the like are set, data sets and display field information are bound in data binding configuration, the display fields can set aggregation modes such as maximum values, minimum values, average values and the like, and meanwhile, filtering conditions and data set parameter binding can be continuously carried out on the bound data sets. For example, the sales of each region in a certain year needs to be counted, an operator drags out a ring diagram component from a component library to a design panel, binds an order data set, sets the graph dimension as a region field, sets the graph measure as the sales, sets the aggregation mode of the graph measure as summation, and sets the filtering condition of the data set as the year equal to a specified year value. A plurality of chart or form components can be dragged and dropped according to business analysis requirements on the design panel, and each component can also be bound with different data sets, so that data statistics visualization application of a plurality of data sets under multiple dimensions is realized. The design panel provides a custom configuration function for the chart assembly based on Echarts packaging, and an operator can set configuration information conforming to the Echarts attribute specification to realize the display effect of a data chart with richer display styles, such as the gradient color of the chart and the like.
On a report design panel similar to Excel, an operator can perform report data visualization design like operating an Excel form, and various complex Chinese data report applications such as a grouped cross table, a main sub table, a multi-source fragmented report, subtotal total and the like are quickly realized based on a function expression built in the report design panel. By providing a report design panel similar to Excel, an operator can be helped to realize Chinese complex statistical reports which are difficult to realize on the original common forms.
Referring to fig. 3, fig. 3 is a schematic structural diagram of an embodiment of the event submodule 303. As shown in fig. 3, the event submodule 303 includes: an event configuration sub-module 3031, an event monitoring sub-module 3032, an event broadcasting sub-module 3033 and an event execution sub-module 3034;
the event configuration submodule 3031 is used for configuring component linkage, skipping, exporting, displaying/hiding events and customizing JS events; the event monitoring submodule 3032 is used for creating component event monitoring, including monitoring data change events of a drop-down box; the event broadcasting submodule 3033 is used for broadcasting an event by the component, and after the data of the drop-down box is changed, the event broadcasting submodule is used for broadcasting and informing other related components in the design panel that corresponding event triggering needs to be carried out; an event execution submodule 3034 is used for the component to execute the monitored event.
In this embodiment, the event sub-module provides an event configuration sub-module, an event monitoring sub-module, an event broadcasting sub-module, and an event execution sub-module. The event submodule associates each component on the design panel according to actual services to realize visual dynamic analysis application of data, for example, when a certain year is selected by a drop-down box component on the design panel, all other charts on the panel automatically perform data filtering according to the year, and refresh a data statistical chart. The event configuration submodule is used for configuring common events such as component linkage, skipping, exporting, displaying/hiding and the like and customizing a JS event; the event monitoring submodule is used for creating component event monitoring, such as monitoring data change events of a drop-down box; the event broadcasting submodule is used for broadcasting an event by the component, for example, after the data of the drop-down box is changed, the event broadcasting submodule needs to broadcast to inform other related components in the design panel that corresponding event triggering needs to be carried out; the event execution submodule is used for the component to execute the monitored event action, such as re-acquiring the component data and refreshing the data display chart. Each component on the component library has different event support according to different types, such as a chart supporting a single-click event and a drop-down box supporting a data change event, so that one-to-one or one-to-many event interaction logic is realized.
Referring to fig. 4, fig. 4 is a schematic structural diagram of an embodiment of the rendering submodule 304. As shown in fig. 4, the rendering sub-module 304 includes: a page element rendering sub-module 3041, a component event rendering sub-module 3042, and a component data rendering sub-module 3043;
a page element rendering sub-module 3041, configured to convert components in the design panel into page element space occupation, and automatically perform scaling display on the page elements according to resolution and browser size; the component event rendering submodule 3042 is configured to invoke the event submodule to bind and execute a corresponding component event, where the component event includes various initialization events, a single-click event, a data change event, and an enter event on the component; and a component data rendering sub-module 3043, configured to obtain data from the data set according to the component data configuration, and bind the data to the component for display.
In this embodiment, the rendering sub-module is responsible for converting configuration information generated when an operator operates in the design sub-module and the event sub-module into a real data visualization report or a large-screen page through the page rendering engine, so that the configuration information can be directly viewed by a user through a browser, the design panel only provides one design view and does not perform data assembly or event assembly, and the rendering sub-module serves to perform page component occupation, event and data rendering based on the configuration information of the design panel. The module provides a page element rendering sub-module, a component event rendering sub-module, and a component data rendering sub-module. The page element rendering sub-module is responsible for converting the components in the design panel into page element space occupation, such as each diagram, form and other component elements on the page, and automatically carrying out equal-ratio scaling display on the page elements according to the system resolution and the size of the browser; the component event rendering sub-module is responsible for calling an event module to bind and execute corresponding component events, such as various events on the component, such as initialization, clicking, data change, carriage return and the like; and the component data rendering sub-module is responsible for acquiring corresponding statistical data from the data set module according to the component data configuration and binding the statistical data to the component for display.
Further, in one embodiment, the system is based on a B/S architecture.
In the embodiment, the system is realized based on a B/S architecture, has small dependence on the environment, and can quickly respond to the service requirement adjustment by modifying the component configuration on the design panel when the service has the requirement change.
Through the embodiment, the data source, the data set, the components, the design panel and the events are organically combined together based on the functional combination of the data source management module, the data collection management module and the data report management module and the mixed application of the components in the data report management module, so that an operator can quickly realize the service conversion from the original data to the visual report on the basis, the whole process does not need to master high development skills, and the operation can be realized by using a simple dragging mode.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for causing a terminal device to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (9)
1. A system for visualizing data in a dragged, multi-component, hybrid application, the system comprising: the system comprises a data source management module, a data set management module and a data report management module;
the data source management module is used for acquiring and storing configuration information of a data source of a database type, synchronizing a table structure of a selected data table in the data source of the database type based on a synchronization rule in the configuration information, and displaying the data table meeting the synchronization rule in a data table list of the data source of the database type after synchronization is finished;
the data set management module is used for receiving a first dragging operation and a first selection operation, and associating the data table corresponding to the first dragging operation by the association type corresponding to the first selection operation to obtain a data set;
the data report management module is used for receiving a second selection operation, displaying a corresponding design panel according to the second selection operation, receiving a second dragging operation, displaying a corresponding component on the design panel according to the second dragging operation, receiving component setting information, setting a display style of the component according to the component setting information, receiving data binding configuration information, binding a corresponding data set and the component according to the data binding configuration information, converting the component in the design panel into page element space occupation, automatically carrying out equal-ratio scaling display on the page element according to resolution and browser size, acquiring data from the data set, and binding the data to the component for display.
2. The system of claim 1, wherein the data source management module is further to:
converting each sheet page in the excel type data source into a data table, displaying the converted data table in a data table list of the excel type data source, and modifying the data table or table field alias in the data table list when a modification operation is received.
3. The system of claim 1, wherein the data set management module is further to:
receiving an SQ L statement, and associating a data table corresponding to the SQ L statement to obtain a data set, wherein parameters appearing in the SQ L statement are exposed to parameters of the data set.
4. The system of claim 1, wherein the data report management module comprises: the system comprises a component library, a design submodule, an event submodule and a rendering submodule, wherein the component library comprises a plurality of preset data display components and query control components; the design submodule comprises a report design panel, a large-screen design panel and a report design panel; the event submodule is used for realizing interactive linkage of data between the component and the data set on the basis of a JS event mechanism; and the rendering submodule performs visual statistical display page rendering of data based on the configuration information on the design submodule and the event submodule.
5. The system of claim 4, wherein when an import operation is received, importing a custom component corresponding to the import operation into the component library.
6. The system of claim 4, wherein when the report design panel or the large screen design panel is displayed based on the second selection operation, a component to be displayed is selected from the component library based on the second drag operation, a display style of the component is set based on component setting information, the component setting information includes a color, an edge distance, and a size, data binding configuration information is received, the data binding configuration information includes a data set and display field information, an aggregation manner of the display fields is set, the aggregation manner includes a maximum value, a minimum value, and an average value, and filtering conditions and data set parameter binding are performed on the bound data set.
7. The system of claim 4, wherein the event submodule comprises: the event configuration sub-module, the event monitoring sub-module, the event broadcasting sub-module and the event execution sub-module; the event configuration submodule is used for configuring linkage, skipping, exporting, displaying/hiding the event and customizing the JS event; the event monitoring submodule is used for establishing component event monitoring, and comprises a data change event of a monitoring drop-down box; the event broadcasting submodule is used for broadcasting the event by the component, and after the data of the drop-down box is changed, the event broadcasting submodule is used for broadcasting and informing other related components in the design panel that corresponding event triggering needs to be carried out; and the event execution sub-module is used for the component to execute the monitored event.
8. The system of claim 4, wherein rendering the sub-module comprises: the page element rendering sub-module, the component event rendering sub-module and the component data rendering sub-module; the page element rendering sub-module is used for converting the components in the design panel into page element occupation and automatically carrying out equal-ratio zooming display on the page elements according to the resolution and the size of the browser; the component event rendering sub-module is used for calling the event sub-module to bind and execute corresponding component events, and the component events comprise various initialization events, clicking events, data change events and carriage return events on the components; and the component data rendering sub-module is used for acquiring data from the data set according to the component data configuration and binding the data to the component for display.
9. The system of any one of claims 1 to 8, wherein the system is based on a B/S architecture.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010242002.7A CN111427906B (en) | 2020-03-30 | 2020-03-30 | Data visualization system for drag-and-drop multi-component hybrid applications |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010242002.7A CN111427906B (en) | 2020-03-30 | 2020-03-30 | Data visualization system for drag-and-drop multi-component hybrid applications |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111427906A true CN111427906A (en) | 2020-07-17 |
| CN111427906B CN111427906B (en) | 2023-06-09 |
Family
ID=71550014
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010242002.7A Active CN111427906B (en) | 2020-03-30 | 2020-03-30 | Data visualization system for drag-and-drop multi-component hybrid applications |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111427906B (en) |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112565847A (en) * | 2021-02-22 | 2021-03-26 | 成都云帆数联科技有限公司 | Large-screen display control method and device |
| CN112685423A (en) * | 2020-12-31 | 2021-04-20 | 天津浪淘科技股份有限公司 | Multi-source data report generation method, system and execution method |
| CN112799668A (en) * | 2021-02-23 | 2021-05-14 | 上海数依数据科技有限公司 | Front-end multi-data-source visual configuration method |
| CN113609235A (en) * | 2021-08-03 | 2021-11-05 | 上海卓钢链科技有限公司 | Report data visualization system and visualization method |
| CN113835694A (en) * | 2021-09-24 | 2021-12-24 | 上海宝康电子控制工程有限公司 | Visual display platform for user-defined data |
| CN114238859A (en) * | 2021-12-17 | 2022-03-25 | 北京达佳互联信息技术有限公司 | Data processing system, method, electronic device, and storage medium |
| CN114296722A (en) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | Visual rapid development method and system applied to digital reform |
| CN114911387A (en) * | 2022-01-13 | 2022-08-16 | 北京网界科技有限公司 | Data processing system and method thereof |
| CN115048156A (en) * | 2022-08-12 | 2022-09-13 | 北京拓普丰联信息科技股份有限公司 | Method and device for determining business decision, electronic equipment and storage medium |
| CN115114320A (en) * | 2022-06-29 | 2022-09-27 | 东方合智数据科技(广东)有限责任公司 | Data visualization large screen creating method and related equipment for corrugated industry |
| CN115757573A (en) * | 2022-11-07 | 2023-03-07 | 中电科大数据研究院有限公司 | Map data processing method and device and storage medium |
| CN117873413A (en) * | 2024-01-26 | 2024-04-12 | 联通(广东)产业互联网有限公司 | Visual large screen configuration method and system |
| EP4209933A4 (en) * | 2020-09-04 | 2024-04-17 | Beijing Wodong Tianjun Information Technology Co., Ltd. | Data processing method and apparatus, and electronic device and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107544999A (en) * | 2016-06-28 | 2018-01-05 | 百度在线网络技术（北京）有限公司 | Sychronisation and synchronous method, searching system and method for searching system |
| CN108319687A (en) * | 2018-02-01 | 2018-07-24 | 中国农业银行股份有限公司 | A kind of SQL Rule Builders pulling technology based on JS |
| CN109213765A (en) * | 2018-08-20 | 2019-01-15 | 中国平安人寿保险股份有限公司 | The associated method, apparatus of tables of data, computer equipment and storage medium |
| CN110597586A (en) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | Method and device for large screen layout of componentized layout based on dragging |
-
2020
- 2020-03-30 CN CN202010242002.7A patent/CN111427906B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107544999A (en) * | 2016-06-28 | 2018-01-05 | 百度在线网络技术（北京）有限公司 | Sychronisation and synchronous method, searching system and method for searching system |
| CN108319687A (en) * | 2018-02-01 | 2018-07-24 | 中国农业银行股份有限公司 | A kind of SQL Rule Builders pulling technology based on JS |
| CN109213765A (en) * | 2018-08-20 | 2019-01-15 | 中国平安人寿保险股份有限公司 | The associated method, apparatus of tables of data, computer equipment and storage medium |
| CN110597586A (en) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | Method and device for large screen layout of componentized layout based on dragging |
Cited By (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP4209933A4 (en) * | 2020-09-04 | 2024-04-17 | Beijing Wodong Tianjun Information Technology Co., Ltd. | Data processing method and apparatus, and electronic device and storage medium |
| CN112685423A (en) * | 2020-12-31 | 2021-04-20 | 天津浪淘科技股份有限公司 | Multi-source data report generation method, system and execution method |
| CN112565847B (en) * | 2021-02-22 | 2021-07-13 | 成都云帆数联科技有限公司 | Large-screen display control method and device |
| CN112565847A (en) * | 2021-02-22 | 2021-03-26 | 成都云帆数联科技有限公司 | Large-screen display control method and device |
| CN112799668A (en) * | 2021-02-23 | 2021-05-14 | 上海数依数据科技有限公司 | Front-end multi-data-source visual configuration method |
| CN113609235A (en) * | 2021-08-03 | 2021-11-05 | 上海卓钢链科技有限公司 | Report data visualization system and visualization method |
| CN113835694A (en) * | 2021-09-24 | 2021-12-24 | 上海宝康电子控制工程有限公司 | Visual display platform for user-defined data |
| CN113835694B (en) * | 2021-09-24 | 2023-11-03 | 上海宝康电子控制工程有限公司 | Visual display platform of custom data |
| CN114296722A (en) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | Visual rapid development method and system applied to digital reform |
| CN114238859A (en) * | 2021-12-17 | 2022-03-25 | 北京达佳互联信息技术有限公司 | Data processing system, method, electronic device, and storage medium |
| CN114911387B (en) * | 2022-01-13 | 2023-07-28 | 北京网界科技有限公司 | Data processing system and method thereof |
| CN114911387A (en) * | 2022-01-13 | 2022-08-16 | 北京网界科技有限公司 | Data processing system and method thereof |
| CN115114320A (en) * | 2022-06-29 | 2022-09-27 | 东方合智数据科技(广东)有限责任公司 | Data visualization large screen creating method and related equipment for corrugated industry |
| CN115048156B (en) * | 2022-08-12 | 2022-11-08 | 北京拓普丰联信息科技股份有限公司 | Method and device for determining business decision, electronic equipment and storage medium |
| CN115048156A (en) * | 2022-08-12 | 2022-09-13 | 北京拓普丰联信息科技股份有限公司 | Method and device for determining business decision, electronic equipment and storage medium |
| CN115757573A (en) * | 2022-11-07 | 2023-03-07 | 中电科大数据研究院有限公司 | Map data processing method and device and storage medium |
| CN115757573B (en) * | 2022-11-07 | 2023-11-14 | 中电科大数据研究院有限公司 | Processing method and device of map data and storage medium |
| WO2024098517A1 (en) * | 2022-11-07 | 2024-05-16 | 中电科大数据研究院有限公司 | Graph data processing method and apparatus, and storage medium |
| CN117873413A (en) * | 2024-01-26 | 2024-04-12 | 联通(广东)产业互联网有限公司 | Visual large screen configuration method and system |
| CN117873413B (en) * | 2024-01-26 | 2024-06-11 | 联通(广东)产业互联网有限公司 | Visual large screen configuration method and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111427906B (en) | 2023-06-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111427906B (en) | Data visualization system for drag-and-drop multi-component hybrid applications | |
| US7594181B2 (en) | Prototyping graphical user interfaces | |
| CN114035773B (en) | Configuration-based low-code form development method, system and device | |
| CN101593209B (en) | Alternating type online statistical map generation and releasing device and method thereof | |
| CN110597586A (en) | Method and device for large screen layout of componentized layout based on dragging | |
| US7707490B2 (en) | Systems and methods for flexible report designs including table, matrix and hybrid designs | |
| CN108563666B (en) | Data visualization processing system and method based on big data technology | |
| US7880749B2 (en) | Apparatus and method for data charting with an extensible visualization library | |
| EP2463790B1 (en) | Manipulation of elements and their attributes in graphical user interfaces | |
| CN107766043B (en) | Large-screen data visualization based realization method and system | |
| CA2733037A1 (en) | Systems and methods for flexibly scheduled dashboard creation | |
| US7760405B2 (en) | Apparatus and method for integrating print preview with data modeling document editing | |
| JP6813634B2 (en) | WEB reporting design system for programming event behavior based on graphic interface | |
| CN112527373A (en) | Visual platform expanding method based on operation integrated management center service | |
| US20150067520A1 (en) | System for generating a plurality of graphical reports from a data set | |
| CN105868289B (en) | A kind of multimedia courseware generation method and device | |
| CN111966761A (en) | Multi-dimensional model data visualization customization platform and method based on DataV | |
| US8302074B1 (en) | “If” and “switch” as drag and drop objects | |
| CN109885301B (en) | Method, device, storage medium and equipment for generating scalable vector graphics | |
| US8543978B2 (en) | Systems and methods for creating software | |
| CN113867858A (en) | Data visualization large-screen display system | |
| CN115840567A (en) | Application editing method and related equipment | |
| CN113468261B (en) | Method and system for constructing entity relationship of Internet of things based on graphic editing engine | |
| CN114706584A (en) | Data visualization display manufacturing system | |
| US20030174140A1 (en) | Method, program and apparatus for managing display colors of three-dimensional virtual model |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 518000 building 501, 502, 601, 602, building D, wisdom Plaza, Qiaoxiang Road, Gaofa community, Shahe street, Nanshan District, Shenzhen City, Guangdong Province Applicant after: China Southern Power Grid Digital Platform Technology (Guangdong) Co.,Ltd. Address before: 518000 building 501, 502, 601, 602, building D, wisdom Plaza, Qiaoxiang Road, Gaofa community, Shahe street, Nanshan District, Shenzhen City, Guangdong Province Applicant before: China Southern Power Grid Shenzhen Digital Power Grid Research Institute Co.,Ltd. Address after: 518000 building 501, 502, 601, 602, building D, wisdom Plaza, Qiaoxiang Road, Gaofa community, Shahe street, Nanshan District, Shenzhen City, Guangdong Province Applicant after: China Southern Power Grid Shenzhen Digital Power Grid Research Institute Co.,Ltd. Address before: 518000 building 501, 502, 601, 602, building D, wisdom Plaza, Qiaoxiang Road, Gaofa community, Shahe street, Nanshan District, Shenzhen City, Guangdong Province Applicant before: SHENZHEN COMTOP INFORMATION TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |