CN107918516A - A kind of system and method for Visual Dynamic configuration generation chart - Google Patents
A kind of system and method for Visual Dynamic configuration generation chart Download PDFInfo
- Publication number
- CN107918516A CN107918516A CN201710964819.3A CN201710964819A CN107918516A CN 107918516 A CN107918516 A CN 107918516A CN 201710964819 A CN201710964819 A CN 201710964819A CN 107918516 A CN107918516 A CN 107918516A
- Authority
- CN
- China
- Prior art keywords
- configuration
- parameter
- list
- area
- chart
- 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.)
- Pending
Links
Classifications
-
- 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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- 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/34—Graphical or visual programming
-
- 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
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses the system and method that a kind of Visual Dynamic configures generation chart, which includes rendering visual edit interface, operation behavior monitor and the configuration parameter verification unit in area and configuration code show area equipped with list configuring area, chart.This method includes：The configurations parameter inputted according to configurations area, loading render corresponding parameter configuration area；Monitor the chart configuration parameter that input is determined in the list of list configuring area；Chart renders area and configures parameter according to the chart listened to, renders corresponding chart；Configuration code show area configures parameter according to the chart listened to, and generation shows corresponding configuration code.The present invention is easy to operate, and developing basic personnel suitable for no front end uses, and reduces the threshold of front end chart configuration generation operation, and has expanded the function point of visualization front-end configuration instrument.The system and method that the present invention configures generation chart as a kind of Visual Dynamic can be widely applied in Front-end Design field.
Description
Technical field
The present invention relates to chart treatment technology, more particularly to a kind of system of Visual Dynamic configuration generation chart and side
Method.
Background technology
Technology word is explained：
Chart：Chart refers to displayed in the screen, can intuitively show statistical information attribute (timeliness, quantitative etc.),
Experienced knowledge excavation and information dramatic the graphic structure of key effect, be one kind well by object attribute data
Intuitively, the means visually " visualized ".
List：Element in HTML, including different types of input elements, check box, radio button, submitting button etc.
Deng.
In recent years, with attention of the development and people of front end data to big data, various big data diagrammatic representation instruments
It is increasingly appearing in the visual field of developer, highcharts such as echarts, HIGHSOFT company of Baidu,
Front end the graph tool outstanding FusionCharts of InfoSoft Global companies etc..Due to currently used various outstanding
Front end graph tool direct use be need to have front-end technology exploitation grounding in basic skills, so this just will largely without exploitation work(
The personnel at bottom refuse in outdoors.However, in the production work of reality, the personnel there are many no front end development abilities also need
To be generated using the graph tool to dynamic editor to carry out the configuration of chart, editing affairs report, big data such as on website
Feedback visualization presentation etc. is monitored in real time.As it can be seen that in practical application scene, the personnel of no development Experience are than there is development Experience
Colony is more, and big more than exploitation scene in the scene of practical application.Therefore how to formulate reasonable, feasible, science and can be applicable in
Have great importance in the front end chart configuration generation scheme that basic personnel are developed in no front end.
The content of the invention
In order to solve the above-mentioned technical problem, the first object of the present invention, which is to provide one kind, to develop base suitable for no front end
The system for the front end Visual Dynamic configuration generation chart that plinth personnel use.
The second object of the present invention is to provide that a kind of the front end that basic personnel use can be developed suitable for no front end visual
Change the method for dynamic configuration generation chart.
The technical solution adopted in the present invention is：A kind of system of Visual Dynamic configuration generation chart, the system include：
Visual edit interface, includes and the list configuring area of parameter form is configured for providing chart, for according to defeated
The chart configuration parameter and/or configuration code entered, the chart for rendering correspondence graph render area and the figure for showing input
The configuration code show area of configuration code corresponding to table configuration parameter；Wherein, the list configuring area includes configurations area
With parameter configuration area；
Operation behavior monitor, the configurations parameter of input, root are determined in the list for monitoring configurations area
The configurations parameter obtained according to monitoring, dynamic load and the list for rendering corresponding parameter configuration area；
Parameter verification unit is configured, for carrying out filling in prompting to the list in parameter configuration area, and to parameter configuration
The configuration information that list in area is inputted carries out monitoring verification.
Further, the configuration parameter verification unit specifically includes：
Reminding module, for carrying out filling in prompting to the list in parameter configuration area；
Correction verification module, for traveling through the Form Element in parameter configuration area, the Custom Attributes in Form Element passes
Pass verification rule；When there are it is default verification parameter of regularity when, then monitoring verification is carried out to corresponding list in parameter configuration area
The binding of mode.
Further, the monitoring verification mode includes mandatory verification, text formatting verification and/or range check.
Further, the configurations area is used to provide configurations parameter form, the configurations parameter form bag
Third party's tool storage room list, subtype list and configuration mode list are included.
Further, third party's tool storage room list provides third party's tool storage room of selection and includes front end js icons
Storehouse, the subtype that the subtype list provides selection include column figure, line chart, pie chart, radar map and/or map,
The configuration mode that the configuration mode list provides selection includes basic list configuration mode, advanced list configuration mode
And/or code pattern.
Further, the operation behavior monitor specifically includes：
First monitors module, for when it is basic list configuration mode to monitor obtained configuration mode, then matching somebody with somebody in parameter
Put dynamic load in area and render basic form module；
Second monitors module, for when it is advanced list configuration mode to monitor obtained configuration mode, then matching somebody with somebody in parameter
Put dynamic load in area and render basic form module and extension form module；
And/or
3rd monitors module, for when it is code pattern to monitor obtained configuration mode, then disabling parameter configuration area, and
Configuration code show area is made to be in editable state.
Another technical solution of the present invention is：A kind of method of Visual Dynamic configuration generation chart, this method
Comprise the following steps：
Operation behavior monitor monitors the configurations parameter that input is determined in the list in configurations area, according to monitoring
Obtained configurations parameter, dynamic load and the list for rendering corresponding parameter configuration area, and configure parameter verification
Unit to the list in parameter configuration area fill in prompting, and to configuration information that the list in parameter configuration area is inputted
Carry out monitoring verification；
Monitor the chart configuration parameter that input is determined in the list of list configuring area；Wherein, the list configuring area bag
Area containing configurations and parameter configuration area, the chart configuration parameter include the configurations parameter inputted in configurations area
And the configuration information inputted in parameter configuration area；
Chart renders the chart that area is obtained according to monitoring and configures parameter, renders corresponding chart；
The chart that configuration code show area is obtained according to monitoring configures parameter, shows corresponding configuration code.
Further, the step for configuration information that the list in the area to parameter configuration is inputted carries out monitoring verification,
It specifically includes following sub-step：
The Form Element in parameter configuration area is traveled through, the Custom Attributes transmission verification rule in Form Element；
When there are it is default verification parameter of regularity when, then monitoring verification mode is carried out to corresponding list in parameter configuration area
Binding.
Further, the monitoring verification mode includes mandatory verification, text formatting verification and/or range check.
Further, the configurations area is used to provide configurations parameter form, the configurations parameter form bag
Third party's tool storage room list, subtype list and configuration mode list are included.
Further, third party's tool storage room list provides third party's tool storage room of selection and includes front end js icons
Storehouse, the subtype that the subtype list provides selection include column figure, line chart, pie chart, radar map and/or map,
The configuration mode that the configuration mode list provides selection includes basic list configuration mode, advanced list configuration mode
And/or code pattern.
Further, described according to the obtained configurations parameter of monitoring, dynamic load simultaneously renders corresponding parameter and matches somebody with somebody
The step for putting the list in area, it includes following sub-step：
When it is basic list configuration mode to monitor obtained configuration mode, then dynamic load and wash with watercolours in parameter configuration area
Dye basic form module；
When it be advanced list configuration mode to monitor obtained configuration mode, then the dynamic load simultaneously wash with watercolours in parameter configuration area
Dye basic form module and extension form module；
And/or
When it is code pattern to monitor obtained configuration mode, then parameter configuration area is disabled, and make configuration code show area
In editable state.
The beneficial effect of the method for the present invention and system is：, can be with visualization by using the system and method for the present invention
List mode of operation realize the edit operation to third party's graph tool, generate the chart needed for user, operation side in real time
Just it is quick, develop basic personnel suitable for no front end and use, greatly reduce the threshold of front end chart configuration generation operation, and
The system and method for the present invention can also be compatible suitable for visualizing front-end configuration instrument, solves conventional visualization front-end configuration work
The function of chart can not be generated in tool, has expanded the function point of visualization front-end configuration instrument.
Brief description of the drawings
Fig. 1 is a kind of step flow diagram of the method for Visual Dynamic configuration generation chart of the present invention；
Fig. 2 is that one specific embodiment of system of present invention Visual Dynamic configuration generation chart a kind of realizes steps flow chart
Schematic diagram；
Fig. 3 is visual edit interface schematic diagram.
Embodiment
Embodiment 1
A kind of system of Visual Dynamic configuration generation chart, the system include：
Visual edit interface, includes and the list configuring area of parameter form is configured for providing chart, for according to defeated
The chart configuration parameter and/or configuration code entered, the chart for rendering correspondence graph render area and the figure for showing input
The configuration code show area of configuration code corresponding to table configuration parameter；Wherein, the list configuring area includes configurations area
With parameter configuration area；
Operation behavior monitor, the configurations parameter of input, root are determined in the list for monitoring configurations area
The configurations parameter obtained according to monitoring, dynamic load and the list for rendering corresponding parameter configuration area；
Parameter verification unit is configured, for carrying out filling in prompting to the list in parameter configuration area, and to parameter configuration
The configuration information that list in area is inputted carries out monitoring verification.
Preferred embodiment is further used as, the configuration parameter verification unit specifically includes：
Reminding module, for carrying out filling in prompting to the list in parameter configuration area；
Correction verification module, for traveling through the Form Element in parameter configuration area, the Custom Attributes in Form Element passes
Pass verification rule；When there are it is default verification parameter of regularity when, then monitoring verification is carried out to corresponding list in parameter configuration area
The binding of mode.
Be further used as preferred embodiment, the monitoring verification mode include mandatory verification, text formatting verification and/
Or range check.
Preferred embodiment is further used as, the configurations area is used to provide configurations parameter form, described
Configurations parameter form includes third party's tool storage room list, subtype list and configuration mode list.
Preferred embodiment is further used as, third party's tool storage room list provides third party's tool storage room of selection
Include front end js icon libraries, the subtype that the subtype list provides selection include column figure, line chart, pie chart,
Radar map and/or map, the configuration mode that the configuration mode list provides selection include basic list configuration mode, height
Level list configuration mode and/or code pattern.
Preferred embodiment is further used as, the operation behavior monitor specifically includes：
First monitors module, for when it is basic list configuration mode to monitor obtained configuration mode, then matching somebody with somebody in parameter
Put dynamic load in area and render basic form module；
Second monitors module, for when it is advanced list configuration mode to monitor obtained configuration mode, then matching somebody with somebody in parameter
Put dynamic load in area and render basic form module and extension form module；
And/or
3rd monitors module, for when it is code pattern to monitor obtained configuration mode, then disabling parameter configuration area, and
Configuration code show area is made to be in editable state.
The content of said system embodiment is suitable for following embodiment.
Embodiment 2
As shown in Figure 1, a kind of method of Visual Dynamic configuration generation chart, this method comprise the following steps：
Operation behavior monitor monitors the configurations parameter that input is determined in the list in configurations area, according to monitoring
Obtained configurations parameter, dynamic load and the list for rendering corresponding parameter configuration area, and configure parameter verification
Unit to the list in parameter configuration area fill in prompting, and to configuration information that the list in parameter configuration area is inputted
Carry out monitoring verification；
The chart configuration parameter that input is determined in the list of list configuring area is monitored, when all tables in parameter configuration area
When single verification passes through, then the chart configuration parameter for obtaining determining input in the list of list configuring area is monitored；Wherein, the table
Single configuring area includes configurations area and parameter configuration area, and the chart configuration parameter includes the base inputted in configurations area
Plinth configures the configuration information inputted in parameter and parameter configuration area；
Chart renders the chart that area is obtained according to monitoring and configures parameter, renders corresponding chart；
The chart that configuration code show area is obtained according to monitoring configures parameter, shows corresponding configuration code.
It is further used as preferred embodiment, the configuration information that the list in the area to parameter configuration is inputted carries out
The step for monitoring verification, it specifically includes following sub-step：
The Form Element in parameter configuration area is traveled through, the Custom Attributes transmission verification rule in Form Element；
When there are it is default verification parameter of regularity when, then monitoring verification mode is carried out to corresponding list in parameter configuration area
Binding.
Be further used as preferred embodiment, the monitoring verification mode include mandatory verification, text formatting verification and/
Or range check.
Preferred embodiment is further used as, the configurations area is used to provide configurations parameter form, described
Configurations parameter form includes third party's tool storage room list, subtype list and configuration mode list.
Preferred embodiment is further used as, third party's tool storage room list provides third party's tool storage room of selection
Include front end js icon libraries, the subtype that the subtype list provides selection include column figure, line chart, pie chart,
Radar map and/or map, the configuration mode that the configuration mode list provides selection include basic list configuration mode, height
Level list configuration mode and/or code pattern.
It is further used as preferred embodiment, the configurations parameter obtained according to monitoring, dynamic load and wash with watercolours
The step for dyeing the list in corresponding parameter configuration area, it includes following sub-step：
When it is basic list configuration mode to monitor obtained configuration mode, then dynamic load and wash with watercolours in parameter configuration area
Dye basic form module；
When it be advanced list configuration mode to monitor obtained configuration mode, then the dynamic load simultaneously wash with watercolours in parameter configuration area
Dye basic form module and extension form module；
And/or
When it is code pattern to monitor obtained configuration mode, then parameter configuration area is disabled, and make configuration code show area
In editable state.
Embodiment 3
The present invention is elaborated with reference to preferred embodiment below.
Threshold is used using various third party's graph tool galleries in order to reduce, the object of the present invention is to provide a finding
That is gained, and develop suitable for no front end the chart Visual Dynamic configuration generation scheme of basic personnel, corresponding to it is specific
Program product is preferably a chart edit tool.
As shown in Fig. 2, a kind of scheme of Visual Dynamic configuration generation chart of the present invention, it implements the following institute of step
Show.
Step 1：Build visual edit interface.
The front end graph tool realized of the present invention is can be operated according to the list of user and dynamic generation is corresponding
Configuration item, then guides user to carry out the selection operation of corresponding configuration parameter according to prompting, is inputted just so as to fulfill by list
It can configure and render the required parameter configuration in third party's chart storehouse.As it can be seen that the front end chart work realized for the present invention
Tool, as shown in figure 3, its visual edit interface has specifically included three parts：List configuring area, chart render area, configuration code
Show area.
For the list configuring area, it is mainly used for providing chart configuration parameter form, for user's selection operation, and
According to the option of user, the required list of the corresponding form parameters of dynamic generation interacts operation；
Area is rendered for chart, it is mainly used for the list according to user's operation and determines the chart configuration parameter of input,
Corresponding chart is rendered on interface, realizes What You See Is What You Get；
For configuration code show area, it is mainly used for the list according to user's operation and determines the chart configuration ginseng of input
Number, the corresponding configuration code of dynamic generation, and be shown on interface, basic personnel can not only be so developed easy to no front end
The code directly configured using this, the Code copying that this has been configured, which pastes specified region, just can directly display corresponding figure
Table, and the advanced level user that can also conveniently possess front end Develop ability directly carries out debugging modification.
Step 2：Structure monitors interactive operation behavior, realizes What You See Is What You Get.
Realizing the Core Feature of operation interface has at 2 points：1st, operation behavior monitor；2nd, configuration parameter verifies in real time.
(1), operation behavior monitor
Two regions are distinguished in above-mentioned list configuration：Configurations area and parameter configuration area.
For the configurations area, it is mainly used for the use option, the chart that provide the user with third party's tool storage room
Type uses option and the use option of configuration mode, that is to say, that the configurations area is mainly used for providing basis
Parameter form is configured, and the configurations parameter form includes third party's tool storage room list, subtype list and matches somebody with somebody
Put pattern list.
Third party's tool storage room that third party's tool storage room list provides selection includes echarts, highcharts
Deng front end js icon libraries；Subtype refers to the chart that corresponding third party's instrument place is supported, e.g., selects echarts charts storehouse
With regard to supporting pillar figure, line chart, pie chart, radar map, map etc., that is to say, that subtype list provides the subtype of selection
Can according to the different and different of third party's tool storage room of selection, its may include to have column figure, line chart, pie chart, radar map and/or
Map；The configuration mode that the configuration mode list provides selection includes basic list configuration mode, the configuration of advanced list
Pattern and/or code pattern；When configuration mode elects basic list configuration mode as, then dynamic load is simultaneously in parameter configuration area
Render basic form module, the list in basic form module corresponding to only containing configurations parameter, by list into
Row selects and/or fills in operation, determines the configurations parameter of input, just can so generate and render in area is rendered in chart
Simple chart, and generation shows corresponding configuration code in configuration code area；When the configuration mode choosing that monitoring obtains
For advanced list configuration mode when, then in parameter configuration area dynamic load and render basic form module and extension list
Module, the extension form module for more can autonomous configuration form module, allow user to have more operating rights, order is follow-up
It is finer to render the chart for generating and, more meets the needs of users；When the configuration mode that monitoring obtains elects code pattern as,
Parameter configuration area is then disabled, and makes configuration code show area be in editable state, that is, opens code show area into edlin, this
When can by edit the configuration code in configuration code show area carry out page rendering, rendered in chart renders area generate with
The corresponding chart of configuration code.As it can be seen that rendering area for the chart, when configuration mode elects code pattern as, it is also
Corresponding chart can dynamically be rendered according to the configuration code in configuration code show area in real time.
For the parameter configuration area, it is after the confirmation of configurations area option, by program dynamic load and wash with watercolours
Dye what is come, that is to say, that for operation behavior monitor, it, which is used to monitor, determines that the basis of input is matched somebody with somebody in configurations area
Parameter is put, according to the obtained configurations parameter of monitoring, dynamic load and the list for rendering corresponding parameter configuration area.Example
Such as, when third party's tool storage room of selection is echarts, the subtype of selection is column figure, and the configuration mode of selection is basic table
During single configuration mode, system can perform following operation：1. asking the dependence of third party's tool storage room, echarts.min.js is loaded,
After the complete echarts.min.js of Asynchronous loading, continue to load core configuration file echarts.config.min.js (this documents
For for developer component)；2. determining the configurations parameter of input according to configurations area, overall interface, dynamic are initialized
The base configuration file of echarts storehouses center pillar figure is loaded out, and adds corresponding event；3. matching somebody with somebody in initiation parameter configuring area
Confidence ceases real-time checking routine, monitors the change of configuration list in real time.
(2), configuration parameter verifies in real time
The configurations parameter obtained according to monitoring, corresponding fill in is carried out to the list in the parameter configuration area of dynamic generation
Prompting, and the configuration information inputted to the list in parameter configuration area carry out monitoring verification, such as mandatory verification, parameter school
Test, display data source verification etc..
The configuration information that list in the area to parameter configuration is inputted carries out monitoring verification, it specifically includes following son
Step：
2.1st, the Form Element in parameter configuration area is traveled through；
Illustrate by application technology of jQuery selectors, pass through $ (' #form ') .find (' input '), $ (' #form ')
.find the methods of (' input '), $ (' #form ') .find (' textarea), all Form Elements are got；
2.2nd, the Custom Attributes transmission verification rule in the Form Element of dynamic generation；
Using input elements as example, using searching loop, verification rule ginseng predetermined in each input element is obtained
Number, and default rule parameter has been rendered up when dynamic generation.In transmittance process, when detecting the presence of
During predetermined verification parameter of regularity, then to corresponding list in parameter configuration area monitor the binding of verification mode；
2.3rd, the binding of verification mode is monitored；
Verification mode is monitored mainly including but not limited to having：Whether mandatory verification, text formatting verification (meet translation rule
Then), range check etc.；
Wherein, mandatory verification refers to there must be the verification that numerical value could pass through；Text formatting verification refers to verifying
Whether the numerical value filled in meets text, must have character in the background color frame that must such as fill out ' # ', data are filled in necessary in module
It is to be cut etc. with ', ' number；Range check refers to judging the input range of input frame, and such as scope have to be larger than 0.
After the list generation in parameter configuration area, checking routine will monitor all Form Elements.Only
When the list in all parameter configuration areas just can in real time carry out that chart renders and code area code renders by verification
It has been shown that, realizes the operation of What You See Is What You Get, that is to say, that by the list of verification, the data of its corresponding input are just definite
The parameter of input.
Step 3：What You See Is What You Get, realizes that diversification is used.
By the instrument realized of the present invention, the required chart of user can be generated with dynamic configuration, and can be to scheme
Shape and the result of code are presented.And the instrument that the present invention is realized can be used in a variety of different scenes, it is compatible
Applicability, commerciality and generalization are all very high, and specifically, the exercisable scene of instrument that the present invention is realized includes：
With scene one：Issue generation chart html application, specifically, can be with after the various parameters for configuring good luck
By a key issue function, by configuration application generation one static html page, and provide a url address to
Family, user can carry out insertion use in page code by iframe modes；
With scene two：Issue generation chart picture, specifically, with ready-made js plug-in units, by canvas (echarts
Deng the element of third party's tool storage room generation chart), svg (third party such as highcharts tool storage room generates the element of chart) generation
Chart picture, is saved in local system；
With scene three：With reference to visual edit instrument, the Code copying configured is pasted specified region just can be straight
Display is connect, is mainly used for making front-end interface utilization, suggestion for operation is strong.
As it can be seen that the present invention is interacted by list mode of operation with operating user, dynamic generation difference third party library, no
With the configuration list of subtype, user can just generate the chart needed for itself by different configuration parameter forms；
The data that configuration can be monitored in real time at the same time render effect, and the corresponding configuration code of displaying in time, realize finding i.e. institute
The chart mode of operation obtained.Thus, the advantage of the invention is that：1st, the threshold that uses of user is reduced, the present invention passes through dynamic
State generates allocation list folk prescription formula, just the configuration of simple list can be utilized just to render required chart；2nd, compatible visual
Change front-end configuration instrument, by introducing instrument, can solve partial visual front-end configuration instrument cannot generate the function of chart,
The function point of visualization front-end configuration instrument is expanded.
Above is the preferable of the present invention is implemented to be illustrated, but the invention is not limited to the implementation
Example, those skilled in the art can also make a variety of equivalent variations on the premise of without prejudice to spirit of the invention or replace
Change, these equivalent deformations or replacement are all contained in the application claim limited range.
Claims (10)
- A kind of 1. system of Visual Dynamic configuration generation chart, it is characterised in that：The system includes：Visual edit interface, includes and the list configuring area of parameter form is configured for providing chart, for according to input Chart configures parameter and/or configuration code, and the chart for rendering correspondence graph renders area and for showing that the chart of input is matched somebody with somebody Put the configuration code show area of the configuration code corresponding to parameter；Wherein, the list configuring area includes configurations area and ginseng Number configuring area；Operation behavior monitor, the configurations parameter of input is determined in the list for monitoring configurations area, according to prison The configurations parameter being audible, dynamic load and the list for rendering corresponding parameter configuration area；Parameter verification unit is configured, for carrying out filling in prompting to the list in parameter configuration area, and in parameter configuration area The configuration information that is inputted of list carry out monitoring verification.
- A kind of 2. system of Visual Dynamic configuration generation chart according to claim 1, it is characterised in that：The configuration ginseng Number verification unit specifically includes：Reminding module, for carrying out filling in prompting to the list in parameter configuration area；Correction verification module, for traveling through the Form Element in parameter configuration area, the Custom Attributes in Form Element transmits school Test rule；When there are it is default verification parameter of regularity when, then monitoring verification mode is carried out to corresponding list in parameter configuration area Binding.
- A kind of 3. system of Visual Dynamic configuration generation chart according to claim 2, it is characterised in that：The monitoring school Proved recipe formula includes mandatory verification, text formatting verification and/or range check.
- 4. according to a kind of any one of claim 1-3 systems of Visual Dynamic configuration generation chart, it is characterised in that：Institute State configurations area to be used to provide configurations parameter form, the configurations parameter form includes third party's tool storage room table Single, subtype list and configuration mode list.
- A kind of 5. system of Visual Dynamic configuration generation chart according to claim 4, it is characterised in that：The third party Third party's tool storage room that tool storage room list provides selection includes front end js icon libraries, and the subtype list provides choosing The subtype selected includes column figure, line chart, pie chart, radar map and/or map, and the configuration mode list provides selection Configuration mode includes basic list configuration mode, advanced list configuration mode and/or code pattern.
- A kind of 6. system of Visual Dynamic configuration generation chart according to claim 5, it is characterised in that：The operation row Specifically included for monitor：First monitors module, when the configuration mode for being obtained when monitoring is basic list configuration mode, then in parameter configuration area Middle dynamic load simultaneously renders basic form module；Second monitors module, when the configuration mode for being obtained when monitoring is advanced list configuration mode, then in parameter configuration area Middle dynamic load simultaneously renders basic form module and extension form module；And/or3rd monitors module, for when it is code pattern to monitor obtained configuration mode, then disabling parameter configuration area, and make and matching somebody with somebody Put code show area and be in editable state.
- A kind of 7. method of Visual Dynamic configuration generation chart, it is characterised in that：This method comprises the following steps：Operation behavior monitor monitors the configurations parameter that input is determined in the list in configurations area, is obtained according to monitoring Configurations parameter, dynamic load and the list for rendering corresponding parameter configuration area, and configure parameter verification unit List in parameter configuration area is carried out to fill in prompting, and the configuration information for inputting the list in parameter configuration area carries out Monitor verification；Monitor the chart configuration parameter that input is determined in the list of list configuring area；Wherein, the list configuring area includes base Plinth configuring area and parameter configuration area, chart configuration parameter include the configurations parameter that is inputted in configurations area and The configuration information inputted in parameter configuration area；Chart renders the chart that area is obtained according to monitoring and configures parameter, renders corresponding chart；The chart that configuration code show area is obtained according to monitoring configures parameter, shows corresponding configuration code.
- A kind of 8. method of Visual Dynamic configuration generation chart according to claim 7, it is characterised in that：It is described to parameter The step for configuration information that list in configuring area is inputted carries out monitoring verification, it specifically includes following sub-step：The Form Element in parameter configuration area is traveled through, the Custom Attributes transmission verification rule in Form Element；When there are it is default verification parameter of regularity when, then to corresponding list in parameter configuration area carry out monitoring verification mode tie up It is fixed.
- 9. according to a kind of method of Visual Dynamic configuration generation chart of claim 7 or 8, it is characterised in that：The base Plinth configuring area is used to provide configurations parameter form, the configurations parameter form include third party's tool storage room list, Subtype list and configuration mode list.
- A kind of 10. method of Visual Dynamic configuration generation chart according to claim 9, it is characterised in that：Described 3rd Third party's tool storage room that square tool storage room list provides selection includes front end js icon libraries, and the subtype list is provided The subtype of selection includes column figure, line chart, pie chart, radar map and/or map, and the configuration mode list provides selection Configuration mode include basic list configuration mode, advanced list configuration mode and/or code pattern.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710964819.3A CN107918516A (en) | 2017-10-17 | 2017-10-17 | A kind of system and method for Visual Dynamic configuration generation chart |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710964819.3A CN107918516A (en) | 2017-10-17 | 2017-10-17 | A kind of system and method for Visual Dynamic configuration generation chart |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107918516A true CN107918516A (en) | 2018-04-17 |
Family
ID=61894752
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710964819.3A Pending CN107918516A (en) | 2017-10-17 | 2017-10-17 | A kind of system and method for Visual Dynamic configuration generation chart |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107918516A (en) |
Cited By (17)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109542438A (en) * | 2018-11-19 | 2019-03-29 | 成都淞幸科技有限责任公司 | One kind being based on visual chart development approach |
| CN109710686A (en) * | 2018-12-27 | 2019-05-03 | 杭州火树科技有限公司 | The analysis system of visualization building chart |
| CN109710910A (en) * | 2018-12-29 | 2019-05-03 | 益萃网络科技（中国）有限公司 | Document generation method and system, storage medium |
| CN111104781A (en) * | 2018-10-26 | 2020-05-05 | 珠海格力电器股份有限公司 | Chart processing method and device |
| CN111177251A (en) * | 2020-01-16 | 2020-05-19 | 创意信息技术股份有限公司 | Data visualization display platform |
| CN111274781A (en) * | 2020-01-21 | 2020-06-12 | 北京三快在线科技有限公司 | Table display method and device, storage medium and electronic equipment |
| CN111309317A (en) * | 2020-02-09 | 2020-06-19 | 北京工业大学 | Code automation method and device for realizing data visualization |
| CN111414404A (en) * | 2020-03-20 | 2020-07-14 | 北京东方金信科技有限公司 | Data visualization device and method |
| CN111880771A (en) * | 2020-07-06 | 2020-11-03 | 北京达佳互联信息技术有限公司 | Method and device for generating data visualization module |
| CN111949260A (en) * | 2020-06-24 | 2020-11-17 | 武汉烽火众智数字技术有限责任公司 | Mobile terminal service configuration method and system |
| CN112241267A (en) * | 2020-09-16 | 2021-01-19 | 武汉木仓科技股份有限公司 | Configuration tool and method for realizing form page development by using same |
| CN112328349A (en) * | 2020-11-05 | 2021-02-05 | 金蝶云科技有限公司 | Parameter setting method and related equipment |
| CN112632650A (en) * | 2020-12-18 | 2021-04-09 | 华荣科技股份有限公司 | Intelligent design system and method for nonstandard explosion-proof electric appliance product |
| CN112764740A (en) * | 2021-01-26 | 2021-05-07 | 北京融和友信科技股份有限公司 | Shell-based processing method applied to file interaction between systems |
| CN113434590A (en) * | 2021-07-21 | 2021-09-24 | 中国工商银行股份有限公司 | Lightweight data visualization method and device |
| CN113791774A (en) * | 2021-09-24 | 2021-12-14 | 中船黄埔文冲船舶有限公司 | Construction method, device, equipment and storage medium of ship industry system |
| CN113791774B (en) * | 2021-09-24 | 2024-07-26 | 中船黄埔文冲船舶有限公司 | Construction method, device, equipment and storage medium of ship industry system |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100005411A1 (en) * | 2008-07-02 | 2010-01-07 | Icharts, Inc. | Creation, sharing and embedding of interactive charts |
| CN104899027A (en) * | 2015-05-22 | 2015-09-09 | 国云科技股份有限公司 | Universal form verification method for js |
| CN106126154A (en) * | 2016-08-31 | 2016-11-16 | 浪潮软件集团有限公司 | Large-screen display configuration method |
-
2017
- 2017-10-17 CN CN201710964819.3A patent/CN107918516A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100005411A1 (en) * | 2008-07-02 | 2010-01-07 | Icharts, Inc. | Creation, sharing and embedding of interactive charts |
| CN104899027A (en) * | 2015-05-22 | 2015-09-09 | 国云科技股份有限公司 | Universal form verification method for js |
| CN106126154A (en) * | 2016-08-31 | 2016-11-16 | 浪潮软件集团有限公司 | Large-screen display configuration method |
Non-Patent Citations (2)
| Title |
|---|
| 易程铖: "基于MVC框架的通用统计图表生成***", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
| 梁先勇: "基于SVG的图表组件设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111104781A (en) * | 2018-10-26 | 2020-05-05 | 珠海格力电器股份有限公司 | Chart processing method and device |
| CN109542438A (en) * | 2018-11-19 | 2019-03-29 | 成都淞幸科技有限责任公司 | One kind being based on visual chart development approach |
| CN109710686A (en) * | 2018-12-27 | 2019-05-03 | 杭州火树科技有限公司 | The analysis system of visualization building chart |
| CN109710910A (en) * | 2018-12-29 | 2019-05-03 | 益萃网络科技（中国）有限公司 | Document generation method and system, storage medium |
| CN111177251A (en) * | 2020-01-16 | 2020-05-19 | 创意信息技术股份有限公司 | Data visualization display platform |
| CN111274781A (en) * | 2020-01-21 | 2020-06-12 | 北京三快在线科技有限公司 | Table display method and device, storage medium and electronic equipment |
| CN111309317A (en) * | 2020-02-09 | 2020-06-19 | 北京工业大学 | Code automation method and device for realizing data visualization |
| CN111414404A (en) * | 2020-03-20 | 2020-07-14 | 北京东方金信科技有限公司 | Data visualization device and method |
| CN111949260A (en) * | 2020-06-24 | 2020-11-17 | 武汉烽火众智数字技术有限责任公司 | Mobile terminal service configuration method and system |
| CN111880771A (en) * | 2020-07-06 | 2020-11-03 | 北京达佳互联信息技术有限公司 | Method and device for generating data visualization module |
| CN111880771B (en) * | 2020-07-06 | 2024-03-19 | 北京达佳互联信息技术有限公司 | Method and device for generating data visualization module |
| CN112241267A (en) * | 2020-09-16 | 2021-01-19 | 武汉木仓科技股份有限公司 | Configuration tool and method for realizing form page development by using same |
| CN112328349A (en) * | 2020-11-05 | 2021-02-05 | 金蝶云科技有限公司 | Parameter setting method and related equipment |
| CN112632650A (en) * | 2020-12-18 | 2021-04-09 | 华荣科技股份有限公司 | Intelligent design system and method for nonstandard explosion-proof electric appliance product |
| CN112632650B (en) * | 2020-12-18 | 2023-02-10 | 华荣科技股份有限公司 | Intelligent design system and method for nonstandard explosion-proof electric appliance product |
| CN112764740A (en) * | 2021-01-26 | 2021-05-07 | 北京融和友信科技股份有限公司 | Shell-based processing method applied to file interaction between systems |
| CN113434590A (en) * | 2021-07-21 | 2021-09-24 | 中国工商银行股份有限公司 | Lightweight data visualization method and device |
| CN113791774A (en) * | 2021-09-24 | 2021-12-14 | 中船黄埔文冲船舶有限公司 | Construction method, device, equipment and storage medium of ship industry system |
| CN113791774B (en) * | 2021-09-24 | 2024-07-26 | 中船黄埔文冲船舶有限公司 | Construction method, device, equipment and storage medium of ship industry system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107918516A (en) | A kind of system and method for Visual Dynamic configuration generation chart | |
| US11263228B2 (en) | Continuously scrollable calendar user interface | |
| CN108052365B (en) | User interface component generation method and device | |
| US7017145B2 (en) | Method, system, and program for generating a user interface | |
| CN109062567B (en) | B/S structure-based information management system rapid development platform | |
| US20230111594A1 (en) | Simplified website creation, configuration, and customization system | |
| US20170004638A1 (en) | Chart data-binding design time user experience with dynamic sample generation | |
| US20050183008A1 (en) | Method and system for separation of content and layout definitions in a display description | |
| CN107766043B (en) | Large-screen data visualization based realization method and system | |
| US8943406B2 (en) | Generating user help information for customized user interface | |
| US20140019834A1 (en) | Method of encapsulating diverse user interface components while consistently enforcing external constraints | |
| US20140331179A1 (en) | Automated Presentation of Visualized Data | |
| CN114239524A (en) | Questionnaire generation method, questionnaire generation device, computer equipment and storage medium | |
| CN115599363A (en) | Configuration method, device and system of visual component | |
| CN103593188A (en) | System and method for managing what-you-see-is-what-you-get menus of instrument | |
| Yoshioka et al. | Unified Symbol Framework to Improve UI Comprehension | |
| CN107783744A (en) | The data of Mosaic screen are shown, control method and device, system, display device | |
| CN102789379A (en) | Method and device for constructing user interface | |
| CN117215585B (en) | Visual description and dynamic control method and device for interface component attribute | |
| US20240202432A1 (en) | Conditional validation for view builder | |
| Sluÿters et al. | Engineering slidable graphical user interfaces with slime | |
| Scogings et al. | Linking tasks, dialogue and GUI design: a method involving UML and Lean Cuisine+ | |
| Paterno et al. | The role of HCI models in service front-end development | |
| CN116521162A (en) | Low-code-based visual CRM system, page building method and storage medium | |
| Duarte | MAMA: A Model-driven Approach Minding Accessibility |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180417 |
|
| RJ01 | Rejection of invention patent application after publication |