CN117093219A - Visualization method based on data source, electronic equipment and storage medium - Google Patents
Visualization method based on data source, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN117093219A CN117093219A CN202311361622.2A CN202311361622A CN117093219A CN 117093219 A CN117093219 A CN 117093219A CN 202311361622 A CN202311361622 A CN 202311361622A CN 117093219 A CN117093219 A CN 117093219A
- Authority
- CN
- China
- Prior art keywords
- data
- data source
- target component
- source
- visualization
- 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
- 238000007794 visualization technique Methods 0.000 title claims abstract description 25
- 230000000007 visual effect Effects 0.000 claims abstract description 32
- 238000007726 management method Methods 0.000 claims abstract description 21
- 238000012800 visualization Methods 0.000 claims abstract description 10
- 238000013079 data visualisation Methods 0.000 claims abstract description 9
- 238000009877 rendering Methods 0.000 claims abstract description 4
- 230000003068 static effect Effects 0.000 claims description 61
- 238000013499 data model Methods 0.000 claims description 40
- 238000011045 prefiltration Methods 0.000 claims description 18
- 238000000034 method Methods 0.000 claims description 17
- 238000001914 filtration Methods 0.000 claims description 14
- 238000006243 chemical reaction Methods 0.000 claims description 12
- 230000001502 supplementing effect Effects 0.000 claims description 2
- 238000012545 processing Methods 0.000 abstract description 7
- 238000013523 data management Methods 0.000 abstract description 4
- 238000012423 maintenance Methods 0.000 abstract description 4
- 239000008186 active pharmaceutical agent Substances 0.000 description 20
- 230000006870 function Effects 0.000 description 11
- 238000012986 modification Methods 0.000 description 6
- 230000004048 modification Effects 0.000 description 6
- 238000002347 injection Methods 0.000 description 3
- 239000007924 injection Substances 0.000 description 3
- 238000013507 mapping Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013506 data mapping Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000000243 solution Substances 0.000 description 1
- 239000013589 supplement Substances 0.000 description 1
- 238000010200 validation analysis Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/547—Remote procedure calls [RPC]; Web services
-
- 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)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a visualization method based on a data source, electronic equipment and a storage medium, and belongs to the technical field of data processing. The visualization method is applied to a data visualization system, the data visualization system comprises a visualization editing platform and a data source management platform, and the visualization method comprises the following steps: generating a target component, and uploading the target component to a pre-created visual editing platform; dragging a target component to a corresponding position in an editing interface of the visual editing platform, binding a data source for the target component, and generating page JSON data; rendering the page JSON data to obtain a target page. The invention provides an intermediate data service of full-flow data management maintenance, modifiable, editable, mock data and the like.
Description
Technical Field
The invention belongs to the technical field of data processing, and particularly relates to a visualization method based on a data source, electronic equipment and a storage medium.
Background
The existing data source visualization method in the market adopts a mode of configuring an interface on a component attribute panel to acquire data, and the mode has the problems of excessive parameters and over-technically-known nouns, so that many non-developers cannot understand, cannot use or cannot use the data easily. The partial data source visualization method only supports a fixed data source configuration mode, and the mode configuration is dead, low in flexibility, weak in expansibility and high in maintenance cost of corresponding components. In summary, the existing data source visualization method has a large threshold for common users to use the visualized data source, and is a technical obstacle which is difficult to popularize for the visualized items; in order to facilitate more people in the project to maximize the best of the visualized data sources, it is highly desirable to provide a low-code visualization method that simplifies the data sources.
Disclosure of Invention
The invention aims to overcome the defects of the prior art and provides a data source-based visualization method, electronic equipment and a storage medium.
The aim of the invention is realized by the following technical scheme:
the first aspect of the invention provides a data source-based visualization method, which is applied to a data visualization system, wherein the data visualization system comprises a visualization editing platform and a data source management platform, and the visualization method comprises the following steps:
generating a target component and uploading the target component to a visual editing platform;
dragging a target component to a corresponding position in an editing interface of the visual editing platform, binding a data source for the target component, and generating page JSON data;
rendering the page JSON data to obtain a target page.
Further, generating the target component includes:
and developing target components according to the functional distinction of the target pages, wherein the target components support to receive and display the data sources transmitted by the visual editing platform.
Further, the target component is configured with the attribute of the current target component when uploading the visual editing platform, and the attribute of the target component comprises the version, the name, the label, the layout type, whether the current component is used or not and the mode of the component.
Further, the types of the data sources are divided into dynamic data sources, static data sources, pre-filling data sources, platform built-in data sources and platform static data sources.
Further, the creation of the dynamic data source includes:
newly creating and storing a data source with dynamic types on a data source management platform;
carrying out API configuration on a data source management platform and/or a visual editing platform, wherein the API configuration comprises filling interface information of a data source, a request head and request parameters;
setting a pre-filter, wherein the pre-filter is used for filtering data belonging to a preset type;
the configuration of the API is saved and previewed if the returned data is correct.
Further, the creating of the static data source includes:
newly creating and storing a data source with static types on a data source management platform;
setting a conversion mode, a data source format and a data mode of data in a data model;
adding data form items according to configuration, and storing a data model after completion;
data is added in the static data source according to the created form as data of the static data source.
Further, the creation of the pre-populated data source includes:
newly creating and storing a data source with dynamic types on a data source management platform;
carrying out API configuration on a data source management platform and/or a visual editing platform, wherein the API configuration comprises filling interface information of a data source, a request head and request parameters;
setting a pre-filter, wherein the pre-filter is used for filtering data belonging to a preset type;
saving the configuration of the API and previewing whether the returned data is correct;
setting a conversion mode, a data source format and a data mode of data in a data model;
adding data form items according to configuration, and storing a data model after completion;
the real data is pre-filled in the static data source, the filled real data is edited, and the data is newly built according to the created data model as required to be used as the data of the pre-filled data source.
Further, binding a data source for a target component, comprising:
automatically matching in the existing data source list, and judging whether a data source required by a target component exists or not;
if the data source needed by the target component does not exist, a corresponding data source is newly built;
if the data source needed by the target component exists, judging whether the data source can be directly used, and if the data source cannot be directly used, modifying and supplementing the data source.
A second aspect of the present invention provides an electronic device comprising:
a memory storing execution instructions; and
and a processor executing the execution instructions stored in the memory, so that the processor executes the visualization method according to the first aspect of the present invention.
A third aspect of the present invention provides a computer readable storage medium having stored therein execution instructions which when executed by a processor are adapted to carry out the visualisation method of the first aspect of the present invention.
The beneficial effects of the invention are as follows:
(1) The invention provides a full-flow data management maintenance, modifiable, editable, mock data and other intermediate data service, and after being processed by the full-flow data management platform, a data source list is formed, so that a user can bind any data source to any component at a visual platform;
(2) The invention provides the association relation between the uncoupled component and the data source, provides good definition, verification and friendly interaction prompt of the data model, and reduces the confusion of the user;
(3) The invention provides a data visual checking function, and the capability of selecting part of data sets or certain field data from the loaded data source again is convenient for the assembly to consume data, and the page assembly is more flexible;
(4) The invention manages the complex operations such as data source creation, configuration, modification and the like by using the data source management platform, simplifies the data source operation of the visual editing platform, only needs to bind the data source, and does not need other configurations; when a built-in data source is used in the visual editing platform, the configuration is less and simpler; the built-in dynamic data source can access the data only by selecting the data source and configuring the parameters required by the data source; the built-in static data source has fewer fields, and the component can correspondingly identify the display data;
(5) The data source data of the invention supports proxy/cross-domain/parameter configuration; meanwhile, the API under the multi-level domain name can be called; the domain names are all protected and limited, data access under the same domain is carried out, the cross-domain can be intercepted, the traditional mode needs to carry out operations such as multi-stage domain name configuration on each project, the maintenance is not easy, the current API configuration can directly configure corresponding cross-domain information, and the modification of a component model is not needed;
(6) The invention can directly pull the static data source data of the data source server; or pulling the data definition of the dynamic data source (such as: { url: remote service url, params: { }, headers: { }, maps: { }, filters: xxx. }), pulling the remote service data, and analyzing according to the information such as data mapping, configuration and the like to obtain final data; or the visual editing platform directly pulls the built-in remote data (such as global service data) in advance and integrates the data result into the data source loading flow.
Drawings
FIG. 1 is a flow chart of a visualization method of the present invention;
FIG. 2 is a flow chart of binding dynamic data sources in accordance with the present invention;
FIG. 3 is a flow chart of a binding dynamic data source according to the present invention;
FIG. 4 is a flow chart of binding pre-filled data sources in accordance with the present invention.
Detailed Description
The technical solutions of the present invention will be clearly and completely described below with reference to the embodiments, and it is apparent that the described embodiments are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by a person skilled in the art without any inventive effort, are intended to be within the scope of the present invention, based on the embodiments of the present invention.
Referring to fig. 1 to 4, the present invention provides a data source-based visualization method, an electronic device, and a storage medium:
a first aspect of the present embodiment provides a data source-based visualization method, which is applied to a data visualization system, where the data visualization system includes a visualization editing platform and a data source management platform. As shown in fig. 1, the visualization method includes steps S100 to S300.
And S100, generating a target component, and uploading the target component to a pre-created visual editing platform.
The target component in this embodiment refers to a control that forms a target page, and a user may use the target component to form different attribute values to present different styles, which is developed by a developer.
In some embodiments, generating the target component includes: according to the target page, the target components are developed according to the function distinction, the target components are self-defined with configurable attributes and are correspondingly processed, and the data sources transmitted by the visual editing platform are supported to be received and displayed during development.
After uploading the target component to the visual editing platform, the user may drag the target component in the visual editing platform to generate the page. The property of the current target component can be configured when the target component is uploaded, and the visual editing platform supports and processes the property of the target component, wherein the property of the target component comprises the version, the name, the label, the layout type, whether the current component is used, the mode and the like of the component.
And S200, dragging the target component to a corresponding position in an editing interface of the visual editing platform, binding a data source for the target component, and generating page JSON data.
And dragging the target component by utilizing the visual editing platform component in a container and component mode according to the final page effect of the target page to form the target page.
In this embodiment, the data sources required by the target component are classified according to different service scenarios, and different types of data sources are applicable to different service scenarios. The types of data sources are classified into dynamic data sources, static data sources, pre-filled data sources, platform built-in data sources and platform static data sources.
Dynamic data source: the real data of the database is obtained through the interface, the dynamic data can be obtained through configuration of dynamic parameters, the data are supported to be processed by a filter in a way of writing JS functions and returned to the processed data, and only required fields are supported to be returned by data model filtering. The data model of the dynamic data source is further provided with a series of association relations, and the association relations are used for setting the corresponding relation between the current field and the real data field. The dynamic data source has the widest use scene, can acquire real data, but has limited operation on the data.
Static data source: static data is created by creating a data model, which is a model from which forms that create the static data are generated. The data model includes field Chinese name, type, field name. The data model supports multiple input types, such as text, rich text, numbers, pictures, dates, files, etc., and the data model supports type discrimination of arrays and objects. Any data model can be created through the data source type, and the data created according to the data model can be newly added, edited and deleted for the second time. The multiple input types cover most practical use scenes, the data operability is strongest, the data model supports the data variability strongest, but the data source data is fixed static data.
Prefill data source: the pre-filling data source combines the advantages of the dynamic data source and the static data source, real data is obtained through the configuration interface, a data model of the pre-filling data source is consistent with the dynamic data source, and an association relation is required to be created. The data filtered by the interface can be filled according to the data model, and the data can be added, edited and deleted on the basis. The basic real data not only avoids frequently inputting data, but also can be well integrated in the project which actually needs static data.
And a data source is arranged in the platform: frequently used dynamic data sources can be built into the visual editing platform according to project requirements, and components can be directly bound. This type of data source interface address is fixed, but part of the variable parameters support filling in the property panel.
Platform static data source: in the actual service scene, the most commonly used data list supports query selection in a platform static data source and also supports custom data, and comprises fields such as a name, a cover map, a jump address and the like. Operations such as creating a static data source, a data model or a pre-filling data source are reduced, and the method is built in a visual editing platform.
In some embodiments, binding a data source for a target component includes: determining a corresponding data source for the target component; binding the data source with the corresponding target component.
For a target component needing to be bound with a dynamic data source, a static data source or a pre-filling data source, firstly, automatic matching is carried out in an existing data source list, whether the data source needed by the target component exists or not is judged, if the data source needed by the target component does not exist, a corresponding data source is newly built, if the data source needed by the target component exists, whether the data source can be directly used is judged, and if the data source cannot be directly used, modification and supplement are carried out on the data source.
When a data source is newly built, the newly built data source needs to meet the principles of high availability, high multiplexing, low coupling and the like; the new construction of the data source mainly comprises operations such as interface address parameter filling, data source filtering, data model creation, static data creation and the like. And finally, storing the data source required by the target component in a server, and pulling the target component by calling and acquiring the data source information interface. "high availability, high multiplexing, low coupling" means that one data source is available for multiple target components, and that one target component can use multiple data sources, minimizing the similarity between different data sources.
In some embodiments, the creation of the dynamic data source includes: newly creating and storing a data source with static types on a data source management platform; setting a conversion mode, a data source format and a data mode of data in a data model; adding data form items according to configuration, and storing a data model after completion; data is added in the static data source according to the created form as data of the static data source.
In some embodiments, the creation of the dynamic data source includes: creating a dynamic data source; filling in interface address and parameters, wherein the parameters support to take page address column parameters or current domain name by using a "$+ variable name" mode; the data returned by the interface is processed to a certain extent by utilizing the pre-filter or the post-filter, and the specific operation is that a JS function is written at a corresponding position, wherein a first parameter of the JS function is data, and the data is required to be returned after the logic for processing the data is written; and after the interface is stored, testing the interface, and previewing the result of the interface returned data after the filter processing.
In some embodiments, the creation of the static data source includes: newly creating and storing a data source with static types on a data source management platform; setting a data conversion mode, a data source format and a data mode in a data model; adding data form items according to configuration, configuring names, types, english names and the like of the form items, and storing a data model after completion; data is added in the static data according to the created form as data of the static data source.
In some embodiments, the creation of the static data source includes: creating a static data source; creating a data model of the static data source, wherein the field name, the type and the English name can be singly filled in during the creation; the data source format comprises an array and an object, wherein the array returns the whole list, and the object only returns the first piece of data; newly adding static data, creating data according to the data model, and storing the generated data source into a data source server database.
In some embodiments, the creation of the pre-filled data source includes: newly creating and storing a data source with dynamic types on a data source management platform; carrying out API configuration on a data source management platform and/or a visual editing platform, wherein the API configuration comprises filling interface information of a data source, a request head and request parameters; setting a pre-filter, wherein the pre-filter is used for filtering data belonging to a preset type; saving the configuration of the API and previewing whether the returned data is correct; setting a conversion mode, a data source format and a data mode of data in a data model; adding data form items according to configuration, and storing a data model after completion; the real data is pre-filled in the static data source, the filled real data is edited, and the data is newly built according to the created data model as required to be used as the data of the pre-filled data source.
In some embodiments, the creation of the pre-fill data includes: filling in information such as interface address, parameters, request head and the like, obtaining data, and filtering the data by using a filter according to the need; creating a data model, including an association relation, and corresponding a model field and an interface return field; and filling interface data, continuously adding, editing and deleting data on the basis, and finally forming static data and storing the static data in a server.
For example, the data total statistics part in this example uses text components to display data in a mode of binding dynamic data sources and selecting keys as num. As shown in fig. 2, creating a dynamic data source, and obtaining interface data by configuring interfaces and parameters; filtering and assembling required fields by utilizing a pre-filter; dragging the text component to a corresponding position of the page in the visual editing platform; the data source button is turned on, the created dynamic data source is selected, and the mun field is selected to obtain the value to be presented.
For example, in this example, the column ranking component is implemented using a dynamic data source, and the data is passed to the component in the form of address column parameters by the dynamic data source in combination with a filter. As shown in fig. 3, a dynamic data source is created, interface addresses and parameters are configured, wherein time parameters are used with address bar variables, such as $start_time; judging the interface return state in the pre-filter, and returning data if successful; ordering the data in a post-filter; and dragging the article ranking component to a position corresponding to the page, and binding the article ranking component with the created data source.
For example, in the graph portion of the present example, the data presentation is performed by pre-populating the data source with graph components. As shown in fig. 4, a pre-filled data source is created, interfaces and parameters are configured; configuring required fields, selecting field corresponding relation with interface data, and forming a data model; clicking pre-filling real data in the static data, creating data and editing data at a required position to form a final data source; and dragging the graph component to a position corresponding to the page, and selecting the configured data source.
The method for binding the built-in data source and the target component of the platform comprises the following steps: built-in data sources (a specific platform built-in data source is selected when the data source is selected) of the visual editing platform pair component binding platform, such as commonly used data sources including an active data source, an article list data source, a live broadcasting machine position data source, an APP factory data source and the like; after the components are bound, configuring parameters needed by corresponding data sources; the component takes the corresponding data.
The method for binding the static data source and the target component of the platform comprises the following steps: binding static data to the component at the visual editing platform;
newly adding items in the data list, and configuring a guide chart, a title, a jump link and the like; the component takes the data after the creation of the data list is completed.
In some embodiments, post-filtering is performed on the target component that completes the data source binding at the visual editing platform, including data interception, selecting fields, and the like.
The data source interception mainly refers to processing the data source of the array type, and can designate the beginning subscript and the ending subscript of the array to obtain required data and transmit the required data to the component.
Selecting a field of data refers to transferring the value of a field to a component in the returned data, the result of the data source is typically an object or array, and the component may select a field to be transferred to the component as the data source when the component only needs the value of a field.
And S300, rendering the page JSON data to obtain a target page.
The dynamic data source, the static data source and the pre-filled data source only store data source related information and do not store data. The dynamic data source built in the platform stores the data source type and parameters, and the static data source of the platform stores the generated data. And finally, analyzing the relevant data according to JSON in the preview page.
In some embodiments, the first scenario step, the data structure required by the component is:
{
tittle, 'time component',
startTime, 'start time',
endTime:'2020-01-30',
IntervalNum: 'time interval'
}
And step two, the data structure returned by the data source interface is as follows:
{
code：200;
data:{
time:{
name:xx,
timeStart:'2020-01-01',
timeEnd:'2020-01-30'
},
text:{
title:'xxxxxx',
age:'20'
}
}
}
a third scene step, wherein the pre-filter selects a corresponding filter to obtain:
{name:xx,timeStart:'2020-01-01',timeTime:'2020-01-30'}
scene step four, model conversion: the data source name maps with the component field title, the data source timeStart maps with the component field startTime, the data source timeEnd maps with the component field endTime,
{
tittle, 'time component',
startTime:'2020-01-01',
endTime:'2020-01-30',
}
scene step five, post filter: the field intervalNum is added, the end time (endTime) minus the start time (startTime) is used
Scene step six, generating a new field, wherein the new field contains a component data format:
{
tittle, 'time component',
startTime:'2020-01-01',
endTime:'2020-01-30',
intervalNum:29
}
the dynamic data source supports configuration api interface, and the component configures the dynamic data source to realize real-time data update. Specific:
K101. and creating a dynamic data source in the data source management platform, and storing the data source.
K102. The API configuration is filled with interface basic information of data sources, request heads and request parameters.
Configuring url configuration corresponding to the api interface; and (3) configuring parameter settings corresponding to the api interface, filling in interface addresses and parameters, and taking page address column parameters or current domain names in a mode of using "$+ variable names" by parameter support.
Three-party data are obtained through the steps K101 and K102, and an example of data content refers to the scene step I.
K103. The pre-filter filters the data.
The data returned by the interface of the pre-filter or the post-filter is processed to a certain extent, and the specific operation is that the JS function is written in the corresponding position, the first parameter of the JS function is the data, and the data is required to be returned after the logic for processing the data is written.
And configuring a pre-filter of the api interface, wherein the pre-filter is used for providing a built-in filter and also supports customization.
The data of the scene step I and the scene step II are inconsistent, and the component model needs time components data bit time objects in the scene step II. At this time, pre-filtering is required to be set, and the data returned in the second scene step is filtered through the pre-filtering.
K104. Post-filter filters the data.
When the data source is mapped with the component data, a field difference is found, that is, a certain field in the component model has no appropriate field in the data source, and a post-filter is needed: the specific implementation mode is as follows: passing the data through js method in post filter, adding a field, namely a module model data field: intervalNum, the final data structure refers to scene step six.
K105. And after the completion, the API configuration, the test interface and the full-flow data source program data management generation are saved.
Component model data API creation: through K101-K105, the association relation between the third party data and the component model data is established, but the data interface used by the component model is not a third party data source API, and through the steps, a corresponding data field is newly added to the API interface, and the returned data of the interface is completely consistent with the data structure of the component model, namely, the whole-flow data management platform is realized.
Component data multiplexing: the same set of modeling creates multiple data sources.
Static data source: the data is manually imported through the data model, but all the data needs to be manually imported, which is controllable and time-consuming.
When there is no third party API nor pre-filled data present, a static data source may be used; the page data is changed less frequently, but static data sources can be used when changes are occasionally needed.
K201. Newly creating a static data source in the data source full-flow management platform and storing the static data source;
K202. setting a data conversion mode, a data source format and a data mode in a data model;
the conversion mode can be selected to be custom or component, the component mode can be selected to be component in the existing component, and the data form configuration is filled quickly, so that the conversion mode is applicable to some common fields such as numbers, dates and the like. The customization is to customize the configuration form item, and some special fields are used for customization.
The data source format comprises an array and an object, wherein the array mode can be added with a plurality of pieces of data, the object mode can be added with only one piece of data, and the object mode is used for the situation that the array mode is used when a list of a plurality of pieces of data needs to be displayed, the single piece of data displays details and the like.
The data mode comprises list superposition and list emptying, wherein the superposition mode is newly added when static data is added, and the list emptying is the data before the addition can be emptied. It is more recommended to use a list flush data format when the data source format is object mode.
K203. Adding data form items according to configuration, configuring names, types, english names and the like of the form items, and storing a data model after completion; the English name corresponds to the field name of the data, and the naming needs to be paid attention to the field corresponding to the use of the component.
Form configuration is a model of creating data, which is created as once as possible, and subsequent addition or deletion will add an operation of modifying static data.
K204. Data is added in the static data according to the created form as data of the static data source.
The created data is the data transmitted to the component, the data is unified in specification during creation, and the single data can be edited or deleted after the creation.
Prefill data source: to solve the problem of time and effort for manual entry in some cases, a pre-filled data source was introduced.
The pre-filling data source acquires remote data through the dynamic data source, automatically importing the data to serve as a static data source through a scene step IV, and then has all the characteristics of the static data source, so that frequent manual data input is reduced.
The pre-filled data source is suitable for the following case: for example, the article listing component obtains third party data via a dynamic data source, and the first and second pieces of data need to be transposed for purposes of illustration with an urgent temporary adjustment, but without contacting the third party company. For example, in order to show a list of large-screen city articles, city information needs to be added before a title, but original data is not affected, the case operation can be completed within 2 minutes after the data source is pre-filled, and compared with the traditional method of modifying a database and contacting three-party manufacturers, and the like, the method is convenient.
K301. Pre-filling data configuration: step synchronization K101 is achieved.
K302. The pre-filling interface APi is configured to realize step synchronization K102.
K303. Prefill interface API, pre-configuration filtering, implementing step synchronization K103.
K304. Prefill interface API configuration, post configuration filtering, and step synchronization K105 is realized.
K305. The pre-filled component model map implementation.
The data and component models are field mapped.
The method comprises the steps of creating a data model, realizing step synchronization K202 and K203, and ensuring that the prefilled data sources are different in that reference relations are added in form configuration, wherein the reference relations refer to the corresponding mapping relations between the form items and the real data, so that the corresponding filling data in the follow-up prefilling process are facilitated.
The mapping is to associate two irrelevant fields to realize information synchronization.
The data value of K304 is third party data, the content field of which is not matched with the component model field, so that the data cannot be bound, at this time, the data returned by K103 (scene step three) and the corresponding field of the component model (scene step one) need to be mapped, and the corresponding relation refers to the scene step four, and the implementation mode is as follows: and adding unique ids to the data source field and the field needing to be mapped by the component model, and realizing mapping through js logic processing.
K306. The static data is pre-filled with data source data and the data is edited.
The real data which can be obtained according to the interface of the API configuration according to the reference relation is mapped into static data after the form configuration conversion. The mapped data can be modified and added, so that the data can be modified on the original data without influencing the real data.
K500. When the component is developed: defining the data source data structure configuration information (i.e., data model definition) required by the component, uploading the component to the component server, and storing the data structure configuration information. K500 is a method of operation subsequent to the pre-filled data source of an embodiment.
The model determines the basic structure of data, key value convention, chinese convention, verification rule and other information.
K501. When the component is loaded:
(1) Loading the data source configuration data structure information uploaded by the K500 into a memory;
(2) If the component has bound a data source, the data injection callback function is added to the task queue of the data source, the data is automatically pulled and processed, and then the function in the task queue is executed.
K502. When the component data sources are switched: selecting one data source from any one of the data source lists, adding the data injection callback function of the component to the execution queue of the data source, and deleting the callback function of the component already injected in the task queue of other data sources. And then reading the selected loaded data source data in the memory and injecting the data into the component, or directly requesting the selected data source data to inject the component and storing the data source data into the memory.
K503. When the component data source is configured: and after the read-in data source data is obtained, re-selecting the existing data.
(1) Inputting a data set interval (startIndex) such as what number of data is set to what number of data is;
(2) Or selecting the first several strips, and inputting a length parameter dataLength;
(3) Or just pick a certain field. The method is to set the keyPath parameter using the data visualization tool JSONEDItor select field.
For example:
the data source returns data { name: xxx, age: xxx }, the keyPath selects the name to return the data string of the name.
Data returned by the data source [ { name: xxx, id:1}, { name: xxx, id: 2}, { name: xxx, id: 3}, { name: xxx, id: 4} ],
using the dataset interval (2, 3) will return [ { name: xxx, id: 2}, { name: xxx, id: 3} ];
using a length dataLength of 2 will return [ { name: xxx, id:1}, { name: xxx, id: 2} ].
K504. When the component data source is injected: and comparing the data structure information in the S701 memory with the data to be injected, and verifying the information such as the basic format of the data, the definition completion degree of the key name, the key value type and the like. It is the basis for checking whether the data can be injected or not and providing interactive information such as warning.
For example:
the component requires the data format [ { name: xxx }, { name: xxx } ]. The data structure representing the component definition is an array, and the data must contain a name field { name }.
If data source A provides [ { name: xxx } ], or data source B provides [ { name: xxx, age: xxx }, { name: xxx, age xxx, { name }: xxx, age: xxx }) are validated. Selecting a data source A and a data source B to correctly render data;
if data source C provides { name: xxx, or data source D provides [ { age: xxx ] that will fail validation and indicate errors, reject data injection, and fail to render the data correctly.
A second aspect of the present embodiments provides an electronic device comprising a memory and a processor. The memory stores execution instructions; the processor executes the execution instructions stored in the memory, so that the processor executes the visualization method according to the first aspect of the present embodiment.
A third aspect of the present embodiment provides a computer-readable storage medium having stored therein execution instructions which, when executed by a processor, are configured to implement the visualization method according to the first aspect of the present embodiment
The foregoing is merely a preferred embodiment of the invention, and it is to be understood that the invention is not limited to the form disclosed herein but is not to be construed as excluding other embodiments, but is capable of numerous other combinations, modifications and environments and is capable of modifications within the scope of the inventive concept, either as taught or as a matter of routine skill or knowledge in the relevant art. And that modifications and variations which do not depart from the spirit and scope of the invention are intended to be within the scope of the appended claims.
Claims (10)
1. The visualization method based on the data source is applied to a data visualization system, and the data visualization system comprises a visualization editing platform and a data source management platform, and is characterized by comprising the following steps:
generating a target component and uploading the target component to a visual editing platform;
dragging a target component to a corresponding position in an editing interface of the visual editing platform, binding a data source for the target component, and generating page JSON data;
rendering the page JSON data to obtain a target page.
2. The method of data source-based visualization of claim 1, wherein generating the target component comprises:
and developing target components according to the functional distinction of the target pages, wherein the target components support to receive and display the data sources transmitted by the visual editing platform.
3. The visualization method according to claim 1, wherein the target component configures the attribute of the current target component when uploading the visualization editing platform, and the attribute of the target component includes a version, a name, a label, a layout type, whether the current component is used, and a mode of the target component.
4. The method of claim 1, wherein the types of data sources are classified into dynamic data sources, static data sources, pre-filled data sources, platform built-in data sources, and platform static data sources.
5. The method of data source-based visualization of claim 4, wherein the creation of the dynamic data source comprises:
newly creating and storing a data source with dynamic types on a data source management platform;
carrying out API configuration on a data source management platform and/or a visual editing platform, wherein the API configuration comprises filling interface information of a data source, a request head and request parameters;
setting a pre-filter, wherein the pre-filter is used for filtering data belonging to a preset type;
the configuration of the API is saved and previewed if the returned data is correct.
6. The method of data source-based visualization of claim 4, wherein the creating of the static data source comprises:
newly creating and storing a data source with static types on a data source management platform;
setting a conversion mode, a data source format and a data mode of data in a data model;
adding data form items according to configuration, and storing a data model after completion;
data is added in the static data source according to the created form as data of the static data source.
7. The method of data source-based visualization of claim 4, wherein the creating of the pre-populated data source comprises:
newly creating and storing a data source with dynamic types on a data source management platform;
carrying out API configuration on a data source management platform and/or a visual editing platform, wherein the API configuration comprises filling interface information of a data source, a request head and request parameters;
setting a pre-filter, wherein the pre-filter is used for filtering data belonging to a preset type;
saving the configuration of the API and previewing whether the returned data is correct;
setting a conversion mode, a data source format and a data mode of data in a data model;
adding data form items according to configuration, and storing a data model after completion;
the real data is pre-filled in the static data source, the filled real data is edited, and the data is newly built according to the created data model as required to be used as the data of the pre-filled data source.
8. The method of data source-based visualization of claim 4, wherein binding the data source for the target component comprises:
automatically matching in the existing data source list, and judging whether a data source required by a target component exists or not;
if the data source needed by the target component does not exist, a corresponding data source is newly built;
if the data source needed by the target component exists, judging whether the data source can be directly used, and if the data source cannot be directly used, modifying and supplementing the data source.
9. An electronic device, comprising:
a memory storing execution instructions; and
a processor executing the memory-stored execution instructions, causing the processor to perform the visualization method of any one of claims 1 to 8.
10. A computer readable storage medium, characterized in that the computer readable storage medium has stored therein execution instructions, which when executed by a processor are adapted to carry out the visualization method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311361622.2A CN117093219B (en) | 2023-10-20 | 2023-10-20 | Visualization method based on data source, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311361622.2A CN117093219B (en) | 2023-10-20 | 2023-10-20 | Visualization method based on data source, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117093219A true CN117093219A (en) | 2023-11-21 |
| CN117093219B CN117093219B (en) | 2023-12-26 |
Family
ID=88783353
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311361622.2A Active CN117093219B (en) | 2023-10-20 | 2023-10-20 | Visualization method based on data source, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117093219B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117519889A (en) * | 2024-01-05 | 2024-02-06 | 北京中盈安信技术服务股份有限公司 | Form component switching method and device, storage medium and electronic equipment |
| CN117539870A (en) * | 2024-01-09 | 2024-02-09 | 福建亚拉拉特网络科技服务股份有限公司 | Entertainment place data table management method and system |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170093652A1 (en) * | 2015-09-28 | 2017-03-30 | Microsoft Technology Licensing, Llc | Visualization hypertext |
| US20200236013A1 (en) * | 2019-01-22 | 2020-07-23 | Servicenow, Inc. | Systems and method for shared visualization library |
| CN113918144A (en) * | 2021-10-12 | 2022-01-11 | 湖南映客互娱网络信息有限公司 | Method and system for generating reusable page based on image |
| CN114048111A (en) * | 2021-11-16 | 2022-02-15 | 江苏省未来网络创新研究院 | Vue framework-based user-defined data visualization large-screen implementation method |
| CN114296722A (en) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | Visual rapid development method and system applied to digital reform |
| CN115390840A (en) * | 2022-08-01 | 2022-11-25 | 广州市齐明软件科技有限公司 | Visual page generation method, device and system |
| CN115510361A (en) * | 2022-10-19 | 2022-12-23 | 北京磨铁数盟信息技术有限公司 | Data chart page generation method based on visual configuration and related equipment |
| CN115617327A (en) * | 2022-11-08 | 2023-01-17 | 浙江极氪智能科技有限公司 | Low code page building system, method and computer readable storage medium |
| CN116523041A (en) * | 2023-05-06 | 2023-08-01 | 北京邮电大学 | Knowledge graph construction method, retrieval method and system for equipment field and electronic equipment |
| CN116775013A (en) * | 2023-05-23 | 2023-09-19 | 北京邮电大学 | Development system of visual low-code platform |
-
2023
- 2023-10-20 CN CN202311361622.2A patent/CN117093219B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170093652A1 (en) * | 2015-09-28 | 2017-03-30 | Microsoft Technology Licensing, Llc | Visualization hypertext |
| US20200236013A1 (en) * | 2019-01-22 | 2020-07-23 | Servicenow, Inc. | Systems and method for shared visualization library |
| CN113918144A (en) * | 2021-10-12 | 2022-01-11 | 湖南映客互娱网络信息有限公司 | Method and system for generating reusable page based on image |
| CN114048111A (en) * | 2021-11-16 | 2022-02-15 | 江苏省未来网络创新研究院 | Vue framework-based user-defined data visualization large-screen implementation method |
| CN114296722A (en) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | Visual rapid development method and system applied to digital reform |
| CN115390840A (en) * | 2022-08-01 | 2022-11-25 | 广州市齐明软件科技有限公司 | Visual page generation method, device and system |
| CN115510361A (en) * | 2022-10-19 | 2022-12-23 | 北京磨铁数盟信息技术有限公司 | Data chart page generation method based on visual configuration and related equipment |
| CN115617327A (en) * | 2022-11-08 | 2023-01-17 | 浙江极氪智能科技有限公司 | Low code page building system, method and computer readable storage medium |
| CN116523041A (en) * | 2023-05-06 | 2023-08-01 | 北京邮电大学 | Knowledge graph construction method, retrieval method and system for equipment field and electronic equipment |
| CN116775013A (en) * | 2023-05-23 | 2023-09-19 | 北京邮电大学 | Development system of visual low-code platform |
Non-Patent Citations (2)
| Title |
|---|
| L. CHEN 等: "Research and application of dynamic and interactive data visualization based on D3", 《2016 INTERNATIONAL CONFERENCE ON AUDIO, LANGUAGE AND IMAGE PROCESSING (ICALIP)》, pages 150 - 155 * |
| 孙瑞 等: "基于JSON技术的多源异构环保信息可视化界面开发实例", 《工业控制计算机》, vol. 30, no. 09, pages 50 - 51 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117519889A (en) * | 2024-01-05 | 2024-02-06 | 北京中盈安信技术服务股份有限公司 | Form component switching method and device, storage medium and electronic equipment |
| CN117519889B (en) * | 2024-01-05 | 2024-03-29 | 北京中盈安信技术服务股份有限公司 | Form component switching method and device, storage medium and electronic equipment |
| CN117539870A (en) * | 2024-01-09 | 2024-02-09 | 福建亚拉拉特网络科技服务股份有限公司 | Entertainment place data table management method and system |
| CN117539870B (en) * | 2024-01-09 | 2024-05-14 | 福建亚拉拉特网络科技服务股份有限公司 | Entertainment place data table management method and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117093219B (en) | 2023-12-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN117093219B (en) | Visualization method based on data source, electronic equipment and storage medium | |
| CN110325961B (en) | Spreadsheet-based software application development | |
| CN109614424B (en) | Page layout generation method, device, computing equipment and medium | |
| US10534842B2 (en) | Systems and methods for creating, editing and publishing cross-platform interactive electronic works | |
| US8341528B2 (en) | Managing the content of shared slide presentations | |
| CN109408764B (en) | Page area dividing method, device, computing equipment and medium | |
| US9069830B2 (en) | Retrieving data objects | |
| US20060161533A1 (en) | Data source task pane | |
| CN111259303A (en) | System and method for automatically generating front-end page of WEB information system | |
| CN111819534A (en) | Spreadsheet-based software application development | |
| US20110209042A1 (en) | Information Technology Standard Inventory Utility | |
| US11797258B2 (en) | Conversational analytics with data visualization snapshots | |
| US7818328B2 (en) | API for obtaining unambiguous representation of objects in a relational database | |
| US20080263142A1 (en) | Meta Data Driven User Interface System and Method | |
| US20170031887A1 (en) | Contextual editing in a page rendering system | |
| BR112021009093A2 (en) | website development system, and method for a website development system | |
| US11435871B1 (en) | Workflow assembly tool and workflow model for runtime execution | |
| US20080263018A1 (en) | Method and System for Mapping Business Objects to Relational Database Tables | |
| CN111949915A (en) | Visual customization method and system for production process of remote sensing product | |
| US20220350447A1 (en) | Editor for the creation and modification of data model metadata | |
| CN111694723B (en) | Method for editing nodes and components when product runs under H5 and storage medium | |
| US20230082639A1 (en) | Plugin management system for an interactive system or platform | |
| KR20100122151A (en) | Method of generating database application based on auto-generated form and computer-readable medium having thereon program performing function embodying the same | |
| CN116738941A (en) | Multi-chapter document online collaborative editing method, system, terminal and server | |
| Curtis | Efficient control of assets in a modern production pipeline |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |