CN105739975A - WEB browser based fishbone diagram online editing method - Google Patents
WEB browser based fishbone diagram online editing method Download PDFInfo
- Publication number
- CN105739975A CN105739975A CN201610051254.5A CN201610051254A CN105739975A CN 105739975 A CN105739975 A CN 105739975A CN 201610051254 A CN201610051254 A CN 201610051254A CN 105739975 A CN105739975 A CN 105739975A
- Authority
- CN
- China
- Prior art keywords
- fish
- fishbone
- cause
- effect matrix
- spicules
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The present invention provides a WEB browser based fishbone diagram online editing method. The method comprises the following steps: step 1, storing each node of a fishbone diagram into a database, enabling a browser to load a web application, extracting the node by means of a background server, and generating an original fishbone diagram on the browser; step 2, if a selected fishbone is to be deleted, directly deleting the fishbone, and if a fishbone is to be added, and if the to-be-added fishbone is a first-grade fishbone, enabling a distance between the first-grade fishbone and a fish head or fish tail to be at least 100 pixels, if the to-be-added fishbone is a second-grade fishbone, enabling a distance between the second-grade fishbone and a main fishbone to be at least 70 pixels, and if the to-be-added fishbone is a third-grade fishbone, enabling a distance between the third-grade fishbone and the first-grade fishbone to be at least 100 pixels; and step 3, adding a text frame on each grade of fishbone, and inserting a word, so as to complete editing a desired fishbone diagram. The method makes it convenient for the user to directly edit the fishbone diagram on the WEB browser.
Description
Technical field
The present invention relates to a kind of Cause and Effect matrix online editing method based on web browser.
Background technology
Event occur many reasons in, as long as first solve wherein 20% main cause, all the other reasons of 80% also can solve therewith, then the problem of whole event also just solves, here it is management instrument-" Cause and Effect matrix "." Cause and Effect matrix " is also known as " characteristic diagram ", it is simply that will result in numerous reasons of a certain result, illustrates it in the way of system.Namely graphically carry out the relation of expression of results and reason, because its figure is as fishbone, therefore be referred to as " Cause and Effect matrix ".
The basic configuration of Cause and Effect matrix, as shown in Figure 1: illustrate: 1 representing characteristic, represents the problem needing to solve；The 2 main bones representing Cause and Effect matrix；6 represent factor, and the branch at 3 places represents the DAGU of Cause and Effect matrix (i.e. one-level fish spicule)；The 4 middle bones (i.e. two grades of fish spicules) representing Cause and Effect matrix, 5 represent the ossiculum (i.e. three grades of fish spicules) of Cause and Effect matrix, and middle bone is the principal element affecting DAGU, and ossiculum is the principal element of bone in impact, by that analogy.
In Cause and Effect matrix establishment, traditional mapping software such as Word, Visio etc., go out fish head, main bone, factor, DAGU, middle bone, ossiculum and fish tail etc. by arbitrary shape such as line, arrow, text boxes, and choose shape to generate required Cause and Effect matrix by sorting and aliging.But, although can generate the Cause and Effect matrix of any shape in mapping software according to demand, but under web browser environment, these mapping softwares cannot use.It can be said that the Cause and Effect matrix that above-mentioned instrument generates can only be browsed under browser environment in the way of picture, it is impossible to edit according to dynamic need in real time, change fishbone, fish spicule and editor's factor etc. including pulling with additions and deletions.It is to say, when adjusting fishbone, fish spicule and factor, can only import on browser after mapping software regenerates a Cause and Effect matrix, this makes operation very loaded down with trivial details again.Additionally, due to the use habit of each operator is different with proficiency, utilize the standard that Cause and Effect matrix that mapping software makes is ununified, and spend operator's too much time.Therefore, it is necessary to exploitation has the Cause and Effect matrix control of online editing function.
Summary of the invention
The technical problem to be solved in the present invention, is in that to provide a kind of Cause and Effect matrix online editing method based on web browser.
The present invention is achieved in that a kind of Cause and Effect matrix online editing method based on web browser, comprises the steps:
Step 1, preserving each nodal community data of Cause and Effect matrix to data base, browser loads weblication, extracts described nodal community data by background server, generates original Cause and Effect matrix on a web browser；
Step 2, choose fish spicule to delete this, then directly delete；
To add fish spicule:
If adding fish spicule is one-level fish spicule, then the distance of described one-level fish spicule distance fish head or fish tail is at least 100 pixels；
If adding fish spicule is two grades of fish spicules, then described two grades of fish spicules are at least 70 pixels apart from the distance of main bone；
If adding fish spicule is three grades of fish spicules, then the distance of described three grades of fish spicules distance one-level fish spicule is at least 100 pixels；
Step 3, on fish spicules at different levels, add text box, and insert word, complete the editor of required Cause and Effect matrix.
Further, in described step 1, when front end to generate certain Cause and Effect matrix, preserving each nodal community data of Cause and Effect matrix to data base, background server, by accessing data base, extracts all of preservation nodal community data；Described node includes father node, this node and child node, and described node can be passed to front end with the form of JSON array by background server, makes front end pass through nodal community data and generates original Cause and Effect matrix on a web browser.
Further, the width of described two grades of fish spicules is at least 70 pixels.
Further, also include step 4, the node coordinate of the Cause and Effect matrix edited is preserved in XML file.
Present invention have the advantage that
1, Cause and Effect matrix online editing control need not install and depend on third party's plug-in unit, control is made up of JavaScript script, at all leading browsers, can run including IE, Firefox, Chrome etc., it is not necessary to any plug-in unit is installed on a web browser and security permission is set.
2, control can realize Cause and Effect matrix is carried out online editing, can directly on a web browser the information such as the data on figure, position and content be modified as required.
3, utilize the Cause and Effect matrix style that control generates more unified, control provides unified template, operator adding, delete, when pulling fish head, fish tail, fishbone, fish spicule and editor's factor word, the global shape that can keep fishbone is indeformable, and the annexation of fishbone and fish spicule will not be disturbed.
4, utilize the Cause and Effect matrix that control generates more attractive in appearance, on fish spicule the pattern of word can carry out single choose amendment also can all modify uniformly, namely the type and size of character script single amendment also can unify amendment, and this allows the whole space of a whole page be that the text style adjustment carried out attractive in appearance becomes more convenient also hommization more.
5, Cause and Effect matrix can preserve at any time and recover, this Cause and Effect matrix is when next time opens after being saved, the data being shown that the result of last preservation but not be originally generated, the newly-built Cause and Effect matrix of user with reference to the Cause and Effect matrix that last time preserves and revise herein above, can also make work efficiency have and be obviously improved.
Accompanying drawing explanation
The present invention is further illustrated in conjunction with the embodiments with reference to the accompanying drawings.
Fig. 1 is the structural representation of Cause and Effect matrix of the present invention.
Fig. 2 is overall system architecture figure of the present invention.
Fig. 3 is the flow chart pulling fish spicule in the present invention.
Fig. 4 is the flow chart adding fish spicule in the present invention.
Detailed description of the invention
The present invention based on the Cause and Effect matrix online editing method of web browser,
Cause and Effect matrix online editing control is made up of JavaScript script, it is possible at all leading browsers, runs including IE, Firefox, Chrome etc., it is not necessary to installs any plug-in unit on a web browser and arranges security permission.Overall system architecture figure is Fig. 2 such as, and mentality of designing is as follows:
1, when browser loads control, the information in server database is first transferred on backstage, without preservation, then according to template generation standard Cause and Effect matrix, otherwise passes to, with JSON string, the Cause and Effect matrix preserved before browser is drawn by preserving data.
2, control is a weblication with interactive drawing function, the each shape drawn includes one or more div element, control employs basic vector graphics languages, vector graphics languages is equivalent to paintbrush, the figure wanted can be realized, and in conjunction with JavaScript script, it is possible to allow figure produce dynamic effect.Additionally, the figure of vector can arbitrarily drag, edits, zoom and do not lose the quality of figure.
3, during online editing Cause and Effect matrix, directly on a web browser the information such as the data on figure, position and content can being modified as required, and the global shape of fishbone can be kept indeformable, the annexation of fish spicule and fishbone will not be disturbed.Additionally, the pattern of word can single choice also can be modified by multiselect on Cause and Effect matrix fish spicule, this allows the whole space of a whole page be that the text style adjustment carried out attractive in appearance becomes more convenient also more hommization.And, in the operation of fish spicule, Cause and Effect matrix can according to the demand of user and the space of a whole page attractive in appearance need carry out fish spicule and be symmetrical in the horizontally or vertically upset of higher level's fish spicule, when fish spicule overturns, its all sub-fish spicules also can and then overturn.
4, after Cause and Effect matrix editor, the parameters such as the father node of each shape, child node, abscissa, vertical coordinate are saved in XML file by control, and pass back on server, when preserving this Cause and Effect matrix next time opens after being saved, it is shown that the result of last preservation but not the data that are originally generated.
Six, the technical scheme implemented, please describe concrete steps and cooperation figure illustrates:
1, initializing Cause and Effect matrix step as follows: when front end to generate certain Cause and Effect matrix, background server, by accessing data base, extracts all of preservation node data.All nodes are divided into three levels, are father node, this node, child node respectively.Each node and respective father, child node can be passed to web front-end with the form of JSON array by background server, make web front-end obtain the tree structure of Cause and Effect matrix by each father, child node relationships thus generating this Cause and Effect matrix.
2, the step selecting fishbone and fish spicule is as follows: first, it is determined that currently whether this root fish spicule is the fish spicule chosen, if it is not, then judge whether this fish spicule has sub-fish spicule, if not, next root peer fish spicule is carried out same judgement；If having, then its all sub-fish spicules being carried out Ergodic judgement, need again when each root fish spicule is judged it is done the judgement stinging as father, namely first whether disconnected this root fish spicule current is the fish spicule chosen, then judgement step by step proceeded as above, finally obtains that root fish spicule chosen.
3, pulling step, what can pull in Cause and Effect matrix has fish head, fish tail and fish spicule at different levels, and wherein fish head and fish tail can only horizontal direction pull, and one-level fish spicule and three grades of fish spicules also can only horizontal direction pull, and two grades of fish spicules can only pull by tilted direction.As it is shown on figure 3, specifically comprise the following steps that
(1) horizontal direction of one-level fish spicule pulls, during such as this one-level fish spicule toward Zola, then to limit this one-level fish spicule and fish tail right-hand end minimum range can not less than 100 pixels, when pulling outside this distance range, as long as the width of fish body is increased, revise the abscissa of fish tail simultaneously.If to turn right and draw by this one-level fish spicule, then to limit this one-level fish spicule and fish head right-hand end minimum range can not less than 100 pixels, when pulling outside this distance range, as long as the width increase of fish body is revised the abscissa of fish head simultaneously.
The tilted direction of (2) two grades of fish spicules pulls, and in time requiring to pull, these two grades of fish spicules can not less than except 70 pixels from main bone, and other are not intended to be limited in any.
The horizontal direction of (3) three grades of fish spicules pulls, judge whether only have three grades of fish spicules under same node, if it is, the width of two grades of fish spicules at these three grades of fish spicule places only need to be increased, and revise the coordinate of these three grades of fish spicules, simultaneously defined two grades of fish spicule distances from place are not less than 70 pixels；If more than three grades of fish spicules, then first to find out that abscissa is minimum and second two little fish spicules, when minimum abscissa fish spicule pulls the fish spicule that will not exceed to the right the second little abscissa, only the abscissa of two grades of fish spicules of the abscissa of these three grades of fish spicules and place and width need to be made an amendment.
The horizontal direction of (4) three grades of fish spicules pulls walking direction when pulling, if these three grades of fish spicules are turned right draw, need to judge turns right draws the three grades of fish spicules of peer whether exceeding that root of rightmost, if having, then limiting these three grades of fish spicules and can not be pulled through to the right its affiliated one-level fish spicule, if being not above, two grades of fish spicule coordinates and two grades away from place be the fish spicule distances of restriction of revising place are not less than 70 pixels.
(5) except above-mentioned several special situations, as long as the width revising its affiliated two grades of fish spicules when pulling of three grades of fish spicules and abscissa, revise the abscissa of these three grades of fish spicules oneself simultaneously.
4, fish spicule is added, as shown in Figure 4:
The interpolation of (1) two grade of fish spicule, the summit of two grades of fish spicule elements is first inserted during interpolation, initial position during insertion is determined with this, when adding two grades of fish spicules every time, if judging that it is arranged in above fishbone, its position vertical coordinate increases by 70 pixels, vertical coordinate when if it is positioned at below fishbone, corresponding reducing by 70 pixels, abscissa is the width of the two grades of fish spicules pixel that subtracts 70.
Text box adjustment on (2) two grades of fish spicules, judge whether the text box on fish spicule has content, if, not arranging the content to show, then arrange and to insert two grades of fish spicule attributes of an element and insert, finally the length that his father stings is set to the vertical coordinate of piece two grades of fish spicules of outermost, the attributes such as the father node of this element, level and direction are carried out assignment.
(3) three grades of fish spicules are also similar with two grades of fish spicules with the interpolation of one-level fish spicule.
Note: overall general thinking is carried out an extension, and can illustrate in conjunction with figure.Suggestion circuit diagram uses protel to draw, and structure chart uses cad to draw, and block diagram and flow chart use visio to draw.
Although the foregoing describing the specific embodiment of the present invention; but those familiar with the art is to be understood that; we are merely exemplary described specific embodiment; rather than for the restriction to the scope of the present invention; those of ordinary skill in the art, in the equivalent modification made according to the spirit of the present invention and change, should be encompassed in the scope of the claimed protection of the present invention.
Claims (4)
1. the Cause and Effect matrix online editing method based on web browser, it is characterised in that: comprise the steps:
Step 1, preserving each nodal community data of Cause and Effect matrix to data base, browser loads weblication, extracts described nodal community data by background server, generates original Cause and Effect matrix on a web browser；
Step 2, choose fish spicule to delete this, then directly delete；
To add fish spicule:
If adding fish spicule is one-level fish spicule, then the distance of described one-level fish spicule distance fish head or fish tail is at least 100 pixels；
If adding fish spicule is two grades of fish spicules, then described two grades of fish spicules are at least 70 pixels apart from the distance of main bone；
If adding fish spicule is three grades of fish spicules, then the distance of described three grades of fish spicules distance one-level fish spicule is at least 100 pixels；
Step 3, on fish spicules at different levels, add text box, and insert word, complete the editor of required Cause and Effect matrix.
2. a kind of Cause and Effect matrix online editing method based on web browser according to claim 1, it is characterized in that: in described step 1, when front end to generate certain Cause and Effect matrix, each nodal community data of Cause and Effect matrix are preserved to data base, background server, by accessing data base, extracts all of preservation nodal community data；Described node includes father node, this node and child node, and described node can be passed to front end with the form of JSON array by background server, makes front end pass through nodal community data and generates original Cause and Effect matrix on a web browser.
3. a kind of Cause and Effect matrix online editing method based on web browser according to claim 1, it is characterised in that: the width of described two grades of fish spicules is at least 70 pixels.
4. a kind of Cause and Effect matrix online editing method based on web browser according to claim 1, it is characterised in that: also include step 4, the node coordinate of the Cause and Effect matrix edited is preserved in XML file.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610051254.5A CN105739975A (en) | 2016-01-26 | 2016-01-26 | WEB browser based fishbone diagram online editing method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610051254.5A CN105739975A (en) | 2016-01-26 | 2016-01-26 | WEB browser based fishbone diagram online editing method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105739975A true CN105739975A (en) | 2016-07-06 |
Family
ID=56246617
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610051254.5A Pending CN105739975A (en) | 2016-01-26 | 2016-01-26 | WEB browser based fishbone diagram online editing method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105739975A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108008937A (en) * | 2017-12-14 | 2018-05-08 | 携程计算机技术（上海）有限公司 | Flowcharting method and system |
| CN110706309A (en) * | 2018-07-10 | 2020-01-17 | 百度在线网络技术（北京）有限公司 | Method and device for generating fishbone map |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020042731A1 (en) * | 2000-10-06 | 2002-04-11 | King Joseph A. | Method, system and tools for performing business-related planning |
| US20020186238A1 (en) * | 2001-06-08 | 2002-12-12 | Sylor Mark W. | Interactive hierarchical status display |
| CN102185899A (en) * | 2011-04-18 | 2011-09-14 | 北京神州数码思特奇信息技术股份有限公司 | Method for constructing service flow chart in browser/server (B/S) architecture and B/S architecture |
| US20130232426A1 (en) * | 2012-03-02 | 2013-09-05 | GuessN LLC | System and method for creating and managing dynamic propositions for online community feedback |
| CN103678341A (en) * | 2012-09-07 | 2014-03-26 | 鸿富锦精密工业（深圳）有限公司 | Database interaction system and method |
-
2016
- 2016-01-26 CN CN201610051254.5A patent/CN105739975A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020042731A1 (en) * | 2000-10-06 | 2002-04-11 | King Joseph A. | Method, system and tools for performing business-related planning |
| US20020186238A1 (en) * | 2001-06-08 | 2002-12-12 | Sylor Mark W. | Interactive hierarchical status display |
| CN102185899A (en) * | 2011-04-18 | 2011-09-14 | 北京神州数码思特奇信息技术股份有限公司 | Method for constructing service flow chart in browser/server (B/S) architecture and B/S architecture |
| US20130232426A1 (en) * | 2012-03-02 | 2013-09-05 | GuessN LLC | System and method for creating and managing dynamic propositions for online community feedback |
| CN103678341A (en) * | 2012-09-07 | 2014-03-26 | 鸿富锦精密工业（深圳）有限公司 | Database interaction system and method |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108008937A (en) * | 2017-12-14 | 2018-05-08 | 携程计算机技术（上海）有限公司 | Flowcharting method and system |
| CN110706309A (en) * | 2018-07-10 | 2020-01-17 | 百度在线网络技术（北京）有限公司 | Method and device for generating fishbone map |
| CN110706309B (en) * | 2018-07-10 | 2023-05-23 | 百度在线网络技术（北京）有限公司 | Method and device for generating fishbone map |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105786526B (en) | A kind of efficient flow figure drawing system and method based on Web | |
| CN108279932B (en) | Method and device for dynamically configuring user interface of mobile terminal | |
| US8959142B2 (en) | Combining server-side and client-side user interface elements | |
| CN103597469B (en) | Live browser instrument in IDE | |
| CN112506493A (en) | Table configuration method, device, equipment and medium based on vue | |
| CN106293664A (en) | Code generating method and device | |
| US9460062B2 (en) | Local rendering of an object as an image | |
| CN106250128A (en) | The display processing method of user interface and device | |
| US20170205982A1 (en) | Data-driven schema for describing and executing management tasks in a graphical user interface | |
| CN105094815A (en) | Method and device for map route compilation | |
| CN104461484A (en) | Front-end template implementation method and device | |
| CN105843787B (en) | A kind of RichText Edition method and system | |
| CN103631877A (en) | Webpage table processing method | |
| CN108108194B (en) | User interface editing method and user interface editor | |
| JP7373563B2 (en) | Systems and methods for creating and processing configurable applications for website building systems | |
| CN102135873A (en) | Method and device for creating user interface | |
| CN109165014B (en) | Method, device and equipment for editing control and computer storage medium | |
| CN105739975A (en) | WEB browser based fishbone diagram online editing method | |
| CN105912328A (en) | Method and device for displaying web system page, and web system | |
| CN104050190A (en) | Method and system for processing link data, and client | |
| CN109032599B (en) | Method, device, equipment and medium for generating interactive flow chart based on XML (extensive Makeup language) representation | |
| CN113934957A (en) | Method and system for generating rendering sketch file from webpage | |
| CN112527288A (en) | Visual system prototype design method, system and storage medium capable of generating codes | |
| US20130239085A1 (en) | Automated detection and implementation of state and object modifications | |
| CN107408104B (en) | Declarative cascading reordering of styles |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20160706 |