CN108803995B - SVG-based chart data display system - Google Patents
SVG-based chart data display system Download PDFInfo
- Publication number
- CN108803995B CN108803995B CN201810613014.9A CN201810613014A CN108803995B CN 108803995 B CN108803995 B CN 108803995B CN 201810613014 A CN201810613014 A CN 201810613014A CN 108803995 B CN108803995 B CN 108803995B
- Authority
- CN
- China
- Prior art keywords
- data
- svg
- module
- user
- calculation
- 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.)
- Active
Links
Images
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
-
- 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/04842—Selection of displayed objects or displayed text elements
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a diagram data display system based on SVG, which comprises an SVG template module, a zooming and dragging module, an inquiring and intercepting module and a calculating and analyzing module, wherein the SVG template module is used for converting source data into a data set with screen coordinates, loading the data set to an XML template file based on SVG and generating a basic SVG data diagram; the zooming and dragging module is used for zooming and dragging the SVG data chart by utilizing JavaScript; the query intercepting module is used for positioning a data point of the designated coordinate according to the designated coordinate input by the user, automatically intercepting data through the intercepted coordinate input by the user and adaptively displaying a window; and the calculation analysis module is used for calculating and analyzing the source data according to the user requirements so as to regenerate the chart. The invention can realize the dragging and lossless zooming, the query interception and the computational analysis of the chart data.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a diagram data display system based on SVG.
Background
In engineering projects, scenes for displaying mass data often exist. With the increase of the traffic, the data magnitude is larger and larger, the data density is larger and larger, the processing consumption of the data is larger and larger, and the requirement of requesting multiple data utilization at one time is more and more prominent. At present, a commonly used data display mode, for example, echarts based on canvas, is not enough to cope with repeated reuse of mass data, the display of the data is very heavy due to an excessively large data magnitude, the mass data cannot be flexibly operated, and details of the data display are invalid due to an excessively high data density. The specific defects are that operations such as revising, editing, distortion-free zooming, chart dragging and the like cannot be carried out on the generated chart; the generated chart has weak dynamic interactivity and needs to be redrawn once the data or the position changes. The defects exist because the echarts bottom layer is implemented based on canvas, the canvas technology is based on images of bitmaps, pixel-by-pixel rendering is carried out, 2D graphics are drawn through JavaScript, the resolution is depended on, an event processor is not supported, and the text rendering capability is weak.
Disclosure of Invention
The SVG-based chart data display system provided by the invention utilizes the characteristics of SVG (Scalable vector graphics) technology, such as strong interactivity, independence of resolution, support of an event processor, scalability, guarantee of image quality and the like, and can realize dragging, lossless scaling, query interception and computational analysis of the chart data.
The invention provides a diagram data display system based on SVG, which comprises:
the SVG template module is used for converting source data into a data set with screen coordinates, loading the data set into an XML template file based on SVG, and generating a basic SVG data chart;
the zooming and dragging module is connected with the SVG template module and is used for zooming and dragging the SVG data diagram by using JavaScript;
the query intercepting module is connected with the SVG template module and used for positioning a data point of the designated coordinate according to the designated coordinate input by the user, automatically intercepting data through the intercepted coordinate input by the user and self-adaptively displaying a window;
and the calculation analysis module is connected with the SVG template module and used for calculating and analyzing the source data according to the user requirements so as to regenerate the chart.
Compared with the prior art, the chart data display system based on the SVG provided by the embodiment of the invention utilizes the characteristics of strong interactivity, independence of resolution, support of an event processor, scalability, guarantee of image quality and the like of the SVG (Scalable Vector Graphics) technology, and can realize dragging, lossless scaling, query interception and computational analysis of the chart data.
Drawings
Fig. 1 is a schematic structural diagram of a diagram data display system based on SVG according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The invention provides a diagram data display system based on SVG (scalable vector graphics), which comprises an SVG template module, a zooming and dragging module, a query and interception module and a calculation and analysis module, as shown in figure 1.
The SVG template module is used for converting source data into a data set with screen coordinates, loading the data set into an XML template file based on SVG, and generating a basic SVG data chart.
For example, an SVG-based XML template file of a line graph is implemented as follows:
and the zooming and dragging module is connected with the SVG template module and is used for zooming and dragging the SVG data diagram by utilizing JavaScript.
The query intercepting module is connected with the SVG template module and used for positioning a data point of the designated coordinate according to the designated coordinate input by the user, automatically intercepting data through the intercepted coordinate input by the user and self-adaptively displaying a window;
and the calculation analysis module is connected with the SVG template module and used for calculating and analyzing the source data according to the user requirements so as to regenerate the chart.
Scalable vector graphics, SVG, is a graphics format based on the extensible markup language for describing two-dimensional vector graphics. JavaScript is an transliterated scripting language, which is a dynamic type, weak type, prototype-based language and a built-in support type.
The SVG-based chart data display system comprises an SVG template module, a zooming and dragging module, a query and intercepting module and a calculation and analysis module, wherein the SVG template module is used for converting source data into a data set with screen coordinates, loading the data set to an XML template file based on SVG and generating a basic SVG data chart; the zooming and dragging module is used for zooming and dragging the SVG data chart by utilizing JavaScript; the query intercepting module is used for positioning a data point of the designated coordinate according to the designated coordinate input by the user, automatically intercepting data through the intercepted coordinate input by the user and adaptively displaying a window; and the calculation analysis module is used for calculating and analyzing the source data according to the user requirements so as to regenerate the chart. Compared with the prior art, the invention takes the SVG technology as the basic technology, because the SVG uses XML document description to draw, the SVG is more suitable for dynamic interaction and is easy to edit, only corresponding elements need to be added or removed, meanwhile, the SVG is vector-based, all the SVG can well process the change of the size of the graph, parameters can be modified at the later stage, the SVG is amplified and reduced, has no distortion, and each graph of the SVG is an independent tag and can be independently operated. Therefore, the invention can realize the dragging and lossless scaling, query interception and computational analysis of the chart data by utilizing the characteristics of SVG (Scalable Vector Graphics) technology, such as strong interactivity, independence of resolution, support of an event handler, scalability, guarantee of image quality and the like.
Optionally, the SVG template module includes a data assembly interface for receiving source data input by a user.
Optionally, the zoom and drag module includes a zoom and drag interface, and the zoom and drag interface is configured to receive a zoom parameter or a mouse position input by a user.
Optionally, the zoom and drag module is configured to perform zoom calculation on the source data according to a zoom parameter to regenerate the graph, or perform translation calculation on the source data according to a mouse position to regenerate the graph.
For example, a basic zoom drag and drop implementation is as follows:
optionally, the query intercepting module includes a query intercepting interface, and the query intercepting interface is configured to receive the specified coordinates or the intercepted coordinates input by the user.
Wherein the truncated coordinates may be directly input by a user or determined by mouse selection.
For example, a basic query intercept implementation is as follows:
optionally, the computational analysis module comprises a computational analysis interface for providing a data computational analysis tool to a user.
Wherein the data calculation analysis tool comprises a mean calculation tool, a median calculation tool, a mode calculation tool and a variance calculation tool.
For example, a basic computational analysis is implemented as follows:
the invention provides the calculation results of the analysis data such as the average value, the median value, the mode, the variance and the like of the data in the current display window in real time, and when a user zooms, drags and intercepts the data diagram, the statistical data can change along with the data diagram, thereby facilitating the analysis and understanding of the user on the mass data.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.
The above description is only for the specific embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are included in the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (7)
1. A SVG-based chart data presentation system, said system comprising:
the SVG template module is used for converting source data into a data set with screen coordinates, loading the data set into an XML template file based on SVG, and generating a basic SVG data chart;
the zooming and dragging module is connected with the SVG template module and is used for zooming and dragging the SVG data diagram by using JavaScript;
the query intercepting module is connected with the SVG template module and used for positioning a data point of the designated coordinate according to the designated coordinate input by the user, automatically intercepting data through the intercepted coordinate input by the user and self-adaptively displaying a window;
and the calculation analysis module is connected with the SVG template module and used for calculating and analyzing the source data according to the user requirements so as to regenerate the chart.
2. The system of claim 1, wherein the SVG template module includes a data assembly interface for receiving source data input by a user.
3. The system of claim 1, wherein the zoom drag module comprises a zoom drag interface for receiving a user input of a zoom parameter or a mouse position.
4. The system of claim 1, wherein the zoom drag module is configured to perform a zoom calculation on the source data according to a zoom parameter to regenerate the graph, or perform a pan calculation on the source data according to a mouse position to regenerate the graph.
5. The system of claim 1, wherein the query intercept module comprises a query intercept interface for receiving user input of the specified coordinates or the intercepted coordinates.
6. The system of claim 1, wherein the computational analysis module comprises a computational analysis interface configured to provide a data computational analysis tool to a user.
7. The system of claim 6, wherein the data calculation analysis tools include a mean calculation tool, a median calculation tool, a mode calculation tool, and a variance calculation tool.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810613014.9A CN108803995B (en) | 2018-06-14 | 2018-06-14 | SVG-based chart data display system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810613014.9A CN108803995B (en) | 2018-06-14 | 2018-06-14 | SVG-based chart data display system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108803995A CN108803995A (en) | 2018-11-13 |
| CN108803995B true CN108803995B (en) | 2020-11-20 |
Family
ID=64086006
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810613014.9A Active CN108803995B (en) | 2018-06-14 | 2018-06-14 | SVG-based chart data display system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108803995B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111275614A (en) * | 2018-12-04 | 2020-06-12 | 苏州天鸿嘉汇软件有限公司 | Method for realizing lossless image scaling |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102340698A (en) * | 2011-10-12 | 2012-02-01 | 福建新大陆通信科技股份有限公司 | Scalable vector graphics (SVG)-based set-top box interface representation method |
| CN103020114A (en) * | 2012-11-12 | 2013-04-03 | 北京百度网讯科技有限公司 | Method and equipment for generating visual views |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070180353A1 (en) * | 2006-01-18 | 2007-08-02 | Quark, Inc. | Systems and methods for generating documents using multimedia data gathering tools |
| CN103226604B (en) * | 2013-04-27 | 2017-02-15 | 上海来信信息科技发展有限公司 | SVG-based Web GIS system and relevant energy consumption monitoring system |
| CN104680421B (en) * | 2013-11-26 | 2019-02-12 | 浙江大华系统工程有限公司 | A kind of saleable vector graphics SVG display methods and device |
| CN103970896A (en) * | 2014-05-27 | 2014-08-06 | 重庆大学 | Method and system for graphic display based on scalable vector graphic continuous information |
| CN106682218B (en) * | 2016-12-30 | 2020-12-18 | 冶金自动化研究设计院 | Industrial enterprise Web data graphical system and generation method |
| CN107871128B (en) * | 2017-12-11 | 2023-06-06 | 广州市标准化研究院（广州市组织机构代码管理中心） | High-robustness image recognition method based on SVG dynamic graph |
-
2018
- 2018-06-14 CN CN201810613014.9A patent/CN108803995B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102340698A (en) * | 2011-10-12 | 2012-02-01 | 福建新大陆通信科技股份有限公司 | Scalable vector graphics (SVG)-based set-top box interface representation method |
| CN103020114A (en) * | 2012-11-12 | 2013-04-03 | 北京百度网讯科技有限公司 | Method and equipment for generating visual views |
Non-Patent Citations (1)
| Title |
|---|
| Guo Zhimao等.G2ST: a novel method to transform GML to SVG.《Acm International Symposium on Advances in Geographic Information Systems ACM》.2003,第161-168页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108803995A (en) | 2018-11-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10147197B2 (en) | Segment content displayed on a computing device into regions based on pixels of a screenshot image that captures the content | |
| CN107832108B (en) | Rendering method and device of 3D canvas webpage elements and electronic equipment | |
| CN109472852B (en) | Point cloud image display method and device, equipment and storage medium | |
| WO2010030712A1 (en) | Methods and systems for per pixel alpha-blending of a parent window and a portion of a background image | |
| US8761519B2 (en) | System and method for selecting an object boundary in an image | |
| US20240282024A1 (en) | Training method, method of displaying translation, electronic device and storage medium | |
| US9646362B2 (en) | Algorithm for improved zooming in data visualization components | |
| US11190653B2 (en) | Techniques for capturing an image within the context of a document | |
| CN108447106B (en) | Generation method and device of venue seat map | |
| US9501812B2 (en) | Map performance by dynamically reducing map detail | |
| CN108803995B (en) | SVG-based chart data display system | |
| CN107038199B (en) | Drawing method and device | |
| KR20120075626A (en) | Apparatus and method for processing electric navigational chart in web-based service | |
| CN112416340B (en) | Webpage generation method and system based on sketch | |
| CN112598687A (en) | Image segmentation method and device, storage medium and electronic equipment | |
| CN112445394B (en) | Screenshot method and screenshot device | |
| CN109739403B (en) | Method and apparatus for processing information | |
| US20240104811A1 (en) | Image editing method and device | |
| CN113961175B (en) | Method for processing picture text and computer readable storage medium | |
| KR101768913B1 (en) | Method of partitioning a data including geographical information, apparatus performing the same and storage medium storing a program performing the same | |
| CN104517273A (en) | Image super-resolution processing method and apparatus | |
| CN113362351A (en) | Image processing method and device, electronic equipment and storage medium | |
| CN103092818A (en) | Thumbnail generation system of report table and thumbnail generation method | |
| CN107871335B (en) | Picture processing method and system and computer readable storage medium | |
| EP4152246A1 (en) | Image processing systems and methods |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20211011 Address after: 100089 building 36, courtyard 8, Dongbeiwang West Road, Haidian District, Beijing Patentee after: Dawning Information Industry (Beijing) Co.,Ltd. Patentee after: ZHONGKE SUGON INFORMATION INDUSTRY CHENGDU Co.,Ltd. Address before: 100193 No. 36 Building, No. 8 Hospital, Wangxi Road, Haidian District, Beijing Patentee before: Dawning Information Industry (Beijing) Co.,Ltd. |
|
| TR01 | Transfer of patent right |