CN109783089A - Data drawing list dynamic interaction system, calculates equipment and readable storage medium storing program for executing at method - Google Patents
Data drawing list dynamic interaction system, calculates equipment and readable storage medium storing program for executing at method Download PDFInfo
- Publication number
- CN109783089A CN109783089A CN201910022401.XA CN201910022401A CN109783089A CN 109783089 A CN109783089 A CN 109783089A CN 201910022401 A CN201910022401 A CN 201910022401A CN 109783089 A CN109783089 A CN 109783089A
- Authority
- CN
- China
- Prior art keywords
- grid
- list
- uuid
- chart
- dynamic interaction
- 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
Abstract
The invention discloses a kind of data drawing list dynamic interaction method, this method obtains the list of grid grid and chart container list mutually bound by building grid layout；Render the grid grid list and the chart container list；According to the chart container of the operation respective operations binding to grid grid, to realize chart interaction.The present invention also discloses a kind of data drawing list dynamic interaction system, a kind of calculating equipment and a kind of readable storage medium storing program for executing.Technical solution of the present invention is by being used in combination ECharts tool and vue-grid-layout tool, realize can dynamic interaction Visual Chart, efficiently solve the demand for carrying out complex interaction in practical application for Visual Chart, and in this technical foundation, it is customizable to realize more more complicated dynamic interaction functions, to be obviously improved the usage experience of Visual Chart.
Description
Technical field
The present invention relates to data drawing list interaction technique fields, and in particular to a kind of data drawing list dynamic interaction system, one kind
Data drawing list dynamic interaction method, a kind of calculating equipment and a kind of readable storage medium storing program for executing.
Background technique
Data drawing list visualization technique based on ECharts tool is the technical solution of current mainstream, in this technical solution,
As long as inputting the data of specified format, by simply configuring, i.e., the datagram of beautiful multiplicity is generated using ECharts tool
Table.Although the entire implementation process of above-mentioned technical proposal is very convenient, the data drawing list of output but also limit heavy, nothing
Method interacts.Such as: chart size is fixed, and operation can not be zoomed in and out；Chart position and sequence are fixed, can not carry out drag and drop
Dynamically to change position etc..In brief, the data drawing list visualization scheme for relying on ECharts tool single at present, can not
It realizes complicated dynamic interaction process, is limited in practical applications a lot of.
Therefore, it is necessary to optimization be improved to existing data drawing list visualization scheme, to support increasingly complex move
State interactive process meets the data drawing list visualization requirement in practical application.
Summary of the invention
The present invention provides a kind of data drawing list dynamic interaction system, method, calculates equipment and readable storage medium storing program for executing, solves mesh
The dynamic interaction process that the preceding single data drawing list visualization scheme for relying on ECharts tool cannot achieve complexity uses limited etc.
Problem.
According to an aspect of the present invention, a kind of data drawing list dynamic interaction method is provided, is included the following steps:
Grid layout is constructed, the list of grid grid and chart container list mutually bound are obtained；
Render the grid grid list and the chart container list；
According to the chart container of the operation respective operations binding to grid grid.
The building grid layout in one of the embodiments, obtains the grid grid list mutually bound and figure
The step of table container list, specifically comprise the following steps:
Calculate the chart quantity for needing to show；
The pond uuid is constituted according to the uuid that the quantity of chart generates respective numbers；
Circulation extracts the uuid, and the grid grid and chart container of binding are generated to each uuid；
Form the list of grid grid and chart container list of binding.
At least use uuid as grid Marking the cell in one of the embodiments, and at least use uuid as
Chart container identification.
When circulation extracts the uuid in one of the embodiments, include the steps that judging whether the pond uuid is sky,
If it is, the grid grid list and the chart container list are rendered, if it is not, then continuing to extract the uuid.
According to another aspect of the present invention, a kind of data drawing list dynamic interaction system is also provided, comprising:
Module is constructed, for constructing grid layout, obtains the list of grid grid and chart container list mutually bound；
Rendering module, for rendering the grid grid list and the chart container list；
Interactive module, for the chart container according to the operation respective operations binding to grid grid.
The building module includes: in one of the embodiments,
Computing unit, for calculating the chart quantity for needing to show；
Uuid generation unit, the uuid for generating respective numbers according to the quantity of chart constitute the pond uuid；
Extraction unit extracts the uuid for recycling, the grid grid and chart of binding is generated to each uuid
Container；
List cell is used to form the list of grid grid and chart container list of binding.
At least use uuid as grid Marking the cell in one of the embodiments, and at least use uuid as
Chart container identification.
The extraction unit is also used to judge whether the pond uuid is empty step in one of the embodiments, if so,
Then rendering module renders the grid grid list and the chart container list, if it is not, then continuing to extract the uuid.
According to another aspect of the present invention, a kind of calculating equipment is also provided, comprising:
Processor；And
Memory is stored thereon with executable code, when the executable code is executed by the processor, makes described
Processor executes method described in above-mentioned any one.
According to another aspect of the present invention, a kind of non-transitory machinable medium is also provided, is stored thereon with
Executable code executes the processor any of the above-described when the executable code is executed by the processor of calculating equipment
Method described in.
Data drawing list dynamic interaction system, method, calculating equipment and readable storage medium storing program for executing according to an embodiment of the present invention, lead to
Building grid layout is crossed, the list of grid grid and chart container list mutually bound are obtained；Render the grid mesh column
Table and the chart container list；According to the chart container of the operation respective operations binding to grid grid, to realize chart
Interaction.For the technical program by the way that ECharts tool and vue-grid-layout tool is used in combination, realizing can dynamic interaction
Visual Chart, the demand for carrying out complex interaction in practical application for Visual Chart is efficiently solved, and in this skill
On the basis of art, it may customize and realize more more complicated dynamic interaction functions, to be obviously improved the usage experience of Visual Chart.
Detailed description of the invention
By reading detailed description of non-limiting embodiments referring to the drawings, other feature of the invention,
Objects and advantages will become more apparent upon, wherein the same or similar appended drawing reference indicates the same or similar feature.
Fig. 1 shows the data drawing list dynamic interaction method flow diagram of one embodiment of the invention；
Fig. 2 shows the data drawing list dynamic interaction method flow diagrams of another embodiment of the present invention；
Fig. 3 shows the chart container nesting schematic diagram of one embodiment of the invention；
Fig. 4 shows the data drawing list dynamic interaction system schematic of one embodiment of the invention.
Specific embodiment
The feature and exemplary embodiment of various aspects of the invention is described more fully below, in order to make mesh of the invention
, technical solution and advantage be more clearly understood, below in conjunction with drawings and the specific embodiments, the present invention is carried out further detailed
Description.It should be understood that specific embodiment described herein is only configured to explain the present invention, it is not configured as limiting this hair
It is bright.To those skilled in the art, the present invention can be in the case where not needing some details in these details
Implement.The description of embodiment is preferably managed just for the sake of being provided by showing example of the invention of the invention below
Solution.
It should be noted that, in this document, relational terms such as first and second and the like are used merely to a reality
Body or operation are distinguished with another entity or operation, are deposited without necessarily requiring or implying between these entities or operation
In any actual relationship or order or sequence.Moreover, the terms "include", "comprise" or its any other variant are intended to
Non-exclusive inclusion, so that the process, method, article or equipment including a series of elements is not only wanted including those
Element, but also including other elements that are not explicitly listed, or further include for this process, method, article or equipment
Intrinsic element.In the absence of more restrictions, the element limited by sentence " including ... ", it is not excluded that including
There is also other identical elements in the process, method, article or equipment of the element.
As shown in Figure 1, being the data drawing list dynamic interaction method flow diagram of one embodiment of the invention；
As shown in Fig. 2, being the data drawing list dynamic interaction method flow diagram of another embodiment of the present invention；
As shown in figure 3, being the chart container nesting schematic diagram of one embodiment of the invention.
With reference to Fig. 1, a kind of data drawing list dynamic interaction method 200, this method comprises the following steps:
Step S210: building grid layout obtains the list of grid grid and chart container list mutually bound.
By setting grid grid list and the binding of chart container list, for realizing interaction.Can specifically it lead to
It crosses and identical mark realization is set.
Specifically, above-mentioned steps S210 includes the following steps: with reference to Fig. 2
Step S212: the chart quantity for needing to show is calculated.
Step S214: the pond uuid is constituted according to the uuid that the quantity of chart generates respective numbers.
Step S216: circulation extracts the uuid, and the grid grid and chart container of binding are generated to each uuid.
Wherein, wherein at least use uuid as grid Marking the cell, and at least use uuid as chart container identification.
Wherein, when circulation extracts the uuid, include the steps that judging whether the pond uuid is empty, if it is, rendering
The grid grid list and the chart container list, if it is not, then continuing to extract the uuid.
Step S218: the list of grid grid and chart container list of binding are formed.
The chart sum for needing to show is calculated first to generate the uuid of respective numbers according to chart sum and be put into uuid
Chi Zhong；Then circulation extracts uuid and generates a grid grid, uuid is as grid for each uuid from the pond uuid
A part of mark, while a chart container (i.e. div tag) is generated, uuid is also used as a part of container identification.It is above-mentioned
After the completion of step, a grid grid list and a chart container list are generated.
Step S230: the grid grid list and the chart container list are rendered.
Each grid grid is nested in grid (as shown in Figure 3) as outer layer container, corresponding chart container.
Each grid grid and chart container have shared a uuid, it is achieved that grid grid and the relationship of chart container are tied up
It is fixed.
Step S250: according to the chart container of the operation respective operations binding to grid grid.
In previous step, grid grid and chart container realize relationship binding.Therefore, grid grid is dragged,
Scaling can find corresponding chart container by the uuid of operated grid grid, and pass through with order rearrangement operation
Event notice realizes the identical operation of chart real-time response.Specifically, realizing the real-time sound of the data drawing list of ECharts tool
It answers.
Data drawing list dynamic interaction method according to an embodiment of the present invention, by the way that ECharts tool and vue- is used in combination
Grid-layout tool, realize can dynamic interaction Visual Chart, efficiently solve in practical application for visualization figure
Table carries out the demand of complex interaction, and in this technical foundation, may customize and realizes more more complicated dynamic interaction functions, with
It is obviously improved the usage experience of Visual Chart.
Data drawing list dynamic interaction method according to the present invention above is described in detail by reference to attached drawing 1-3.
In addition, being also implemented as a kind of computer program or computer program product, the meter according to the method for the present invention
Calculation machine program or computer program product include the calculating for executing the above steps limited in the above method of the invention
Machine program code instruction.
Alternatively, the present invention can also be embodied as a kind of (or the computer-readable storage of non-transitory machinable medium
Medium or machine readable storage medium), it is stored thereon with executable code (or computer program or computer instruction code),
When the executable code (or computer program or computer instruction code) by electronic equipment (or calculate equipment, server
Deng) processor execute when, so that the processor is executed each step according to the above method of the present invention.
It is the data drawing list dynamic interaction system schematic of one embodiment of the invention shown in Fig. 4.
With reference to Fig. 4, a kind of data drawing list dynamic interaction system 100, comprising: building module 110, rendering module 130, interaction mould
Block 150.Wherein, building module 110 constructs grid layout, obtains the grid grid list mutually bound and chart container column
Table, rendering module 130 render the grid grid list and the chart container list, and interactive module 150 is according to grid net
The chart container of the operation respective operations binding of lattice.
Wherein, building module 110 further comprises: computing unit 111, uuid generation unit 113；Extraction unit 115, column
Table unit 117.Computing unit 111 calculates the chart quantity for needing to show；Uuid generation unit 113 is generated according to the quantity of chart
The uuid of respective numbers constitutes the pond uuid, and the circulation of extraction unit 115 extracts the uuid, generates binding to each uuid
Grid grid and chart container；Wherein, it at least uses uuid as grid Marking the cell, and at least uses uuid as figure
Table container identification.List cell 117 forms the list of grid grid and chart container list of binding.
Further, extraction unit is also used to judge whether the pond uuid is empty step, if it is, rendering module renders
The grid grid list and the chart container list, if it is not, then continuing to extract the uuid.
Those skilled in the art will also understand is that, various illustrative logical blocks, mould in conjunction with described in disclosure herein
Block, circuit and algorithm steps may be implemented as the combination of electronic hardware, computer software or both.
The flow chart and block diagram in the drawings show the possibility of the system and method for multiple embodiments according to the present invention realities
Existing architecture, function and operation.In this regard, each box in flowchart or block diagram can represent module, a journey
A part of sequence section or code, a part of the module, section or code include one or more for realizing defined
The executable instruction of logic function.It should also be noted that in some implementations as replacements, the function of being marked in box can also
To be occurred with being different from the sequence marked in attached drawing.For example, two continuous boxes can actually be basically executed in parallel,
They can also be executed in the opposite order sometimes, and this depends on the function involved.It is also noted that block diagram and/or stream
The combination of each box in journey figure and the box in block diagram and or flow chart, can the functions or operations as defined in executing
Dedicated hardware based system realize, or can realize using a combination of dedicated hardware and computer instructions.
Various embodiments of the present invention are described above, above description is exemplary, and non-exclusive, and
It is not limited to disclosed each embodiment.Without departing from the scope and spirit of illustrated each embodiment, for this skill
Many modifications and changes are obvious for the those of ordinary skill in art field.The selection of term used herein, purport
In the principle, practical application or improvement to the technology in market for best explaining each embodiment, or make the art
Other those of ordinary skill can understand each embodiment disclosed herein.
Claims (10)
1. a kind of data drawing list dynamic interaction method, which comprises the steps of:
Grid layout is constructed, the list of grid grid and chart container list mutually bound are obtained；
Render the grid grid list and the chart container list；
According to the chart container of the operation respective operations binding to grid grid.
2. data drawing list dynamic interaction method according to claim 1, which is characterized in that the building grid layout obtains
The step of taking the list of grid grid and chart container list mutually bound, specifically comprises the following steps:
Calculate the chart quantity for needing to show；
The pond uuid is constituted according to the uuid that the quantity of chart generates respective numbers；
Circulation extracts the uuid, and the grid grid and chart container of binding are generated to each uuid；
Form the list of grid grid and chart container list of binding.
3. data drawing list dynamic interaction method according to claim 1 or 2, which is characterized in that at least use uuid as
Grid Marking the cell, and at least use uuid as chart container identification.
4. data drawing list dynamic interaction method according to claim 2, which is characterized in that when circulation extracts the uuid,
Include the steps that judging whether the pond uuid is empty, if it is, rendering the grid grid list and chart container column
Table, if it is not, then continuing to extract the uuid.
5. a kind of data drawing list dynamic interaction system characterized by comprising
Module is constructed, for constructing grid layout, obtains the list of grid grid and chart container list mutually bound；
Rendering module, for rendering the grid grid list and the chart container list；
Interactive module, for the chart container according to the operation respective operations binding to grid grid.
6. data drawing list dynamic interaction system according to claim 5, which is characterized in that the building module includes:
Computing unit, for calculating the chart quantity for needing to show；
Uuid generation unit, the uuid for generating respective numbers according to the quantity of chart constitute the pond uuid；
Extraction unit extracts the uuid for recycling, the grid grid and chart container of binding is generated to each uuid；
List cell is used to form the list of grid grid and chart container list of binding.
7. data drawing list dynamic interaction system according to claim 5 or 6, which is characterized in that at least use uuid as
Grid Marking the cell, and at least use uuid as chart container identification.
8. data drawing list dynamic interaction system according to claim 5, which is characterized in that the extraction unit is also used to sentence
Whether the disconnected pond uuid is empty step, if it is, rendering module renders the grid grid list and chart container column
Table, if it is not, then continuing to extract the uuid.
9. a kind of calculating equipment, comprising:
Processor；And
Memory is stored thereon with executable code, when the executable code is executed by the processor, makes the processing
Device executes the method as described in any one of claim 1-4.
10. a kind of non-transitory machinable medium, is stored thereon with executable code, when the executable code is counted
When calculating the processor execution of equipment, the processor is made to execute such as method of any of claims 1-4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910022401.XA CN109783089A (en) | 2019-01-10 | 2019-01-10 | Data drawing list dynamic interaction system, calculates equipment and readable storage medium storing program for executing at method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910022401.XA CN109783089A (en) | 2019-01-10 | 2019-01-10 | Data drawing list dynamic interaction system, calculates equipment and readable storage medium storing program for executing at method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109783089A true CN109783089A (en) | 2019-05-21 |
Family
ID=66499292
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910022401.XA Pending CN109783089A (en) | 2019-01-10 | 2019-01-10 | Data drawing list dynamic interaction system, calculates equipment and readable storage medium storing program for executing at method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109783089A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114116106A (en) * | 2021-11-30 | 2022-03-01 | 上海商汤科技开发有限公司 | Chart display method and device, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102257489A (en) * | 2008-12-18 | 2011-11-23 | 微软公司 | Bi-directional update of a grid and associated visualizations |
| CN107111545A (en) * | 2014-11-05 | 2017-08-29 | 起元科技有限公司 | Debugging figure |
| CN108647026A (en) * | 2018-05-15 | 2018-10-12 | 中国电子科技集团公司第二十九研究所 | Visualization interface integrated approach based on dynamic grid and system |
-
2019
- 2019-01-10 CN CN201910022401.XA patent/CN109783089A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102257489A (en) * | 2008-12-18 | 2011-11-23 | 微软公司 | Bi-directional update of a grid and associated visualizations |
| CN107111545A (en) * | 2014-11-05 | 2017-08-29 | 起元科技有限公司 | Debugging figure |
| CN108647026A (en) * | 2018-05-15 | 2018-10-12 | 中国电子科技集团公司第二十九研究所 | Visualization interface integrated approach based on dynamic grid and system |
Non-Patent Citations (2)
| Title |
|---|
| WEIXIN_34019144: "使用vue实现grid-layout功能", 《HTTPS://BLOG.CSDN.NET/WEIXIN_34019144/ARTICLE/DETAILS/91432159》 * |
| 孤星伴明月: "echart 拖动图形以改变数据", 《HTTPS://WWW.JIANSHU.COM/P/3CC04DDA525B》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114116106A (en) * | 2021-11-30 | 2022-03-01 | 上海商汤科技开发有限公司 | Chart display method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Jünger et al. | Graph drawing software | |
| CN104572096B (en) | A kind of multimodal data visual development method and platform based on WEB | |
| Dwyer et al. | IPSep-CoLa: An incremental procedure for separation constraint layout of graphs | |
| CN107450972A (en) | A kind of dispatching method, device and electronic equipment | |
| CN107103113A (en) | Towards the Automation Design method, device and the optimization method of neural network processor | |
| CN108628608A (en) | A kind of method and device of data visualization | |
| Rufiange et al. | Treematrix: A hybrid visualization of compound graphs | |
| CN104239044A (en) | Dynamic generation method for graphical user interface | |
| Gajer et al. | A multi-dimensional approach to force-directed layouts of large graphs | |
| US20150310643A1 (en) | Methods and Software for Visualizing Data By Applying Physics-Based Tools To Data Objectifications | |
| Yoghourdjian et al. | High-quality ultra-compact grid layout of grouped networks | |
| Hop et al. | Using Hierarchical Edge Bundles to visualize complex ontologies in GLOW | |
| Gajer et al. | A fast multi-dimensional algorithm for drawing large graphs | |
| CN110021070A (en) | FBX threedimensional model is converted to the method, equipment and system of glTF threedimensional model | |
| CN110531976A (en) | The method of charting is matched in modularization in a kind of visualization large-size screen monitors | |
| CN108829854A (en) | For generating the method, apparatus, equipment and computer readable storage medium of article | |
| CN110348109A (en) | The method and terminal device of three-dimensional artificial training data processing | |
| Papadopoulos et al. | Drawing graphs using modular decomposition | |
| CN109783089A (en) | Data drawing list dynamic interaction system, calculates equipment and readable storage medium storing program for executing at method | |
| CN113657812A (en) | Method and system for intelligent decision-making of store operation based on big data and algorithm | |
| Telea et al. | A framework for interactive visualization of component-based software | |
| CN104239606A (en) | UML (Unified Modeling Language) modeling method and device capable of supporting screen touch under web environment | |
| Lai et al. | Perturbation-based thresholding search for packing equal circles and spheres | |
| Kato et al. | Automatic drawing of biological networks using cross cost and subcomponent data | |
| KR101490697B1 (en) | Visualizing apparatus and method for providing dynamic menu based on simulation data |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190521 |
|
| WD01 | Invention patent application deemed withdrawn after publication |