CN108803995A - Chart data display systems based on SVG - Google Patents
Chart data display systems based on SVG Download PDFInfo
- Publication number
- CN108803995A CN108803995A CN201810613014.9A CN201810613014A CN108803995A CN 108803995 A CN108803995 A CN 108803995A CN 201810613014 A CN201810613014 A CN 201810613014A CN 108803995 A CN108803995 A CN 108803995A
- Authority
- CN
- China
- Prior art keywords
- data
- svg
- interception
- user
- scaling
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; 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 OR CALCULATING; 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 OR CALCULATING; 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)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
The present invention provides a kind of chart data display systems based on SVG, the system comprises SVG formwork modules, scaling is modules dragged, inquires interception module and computation analysis module, the SVG formwork modules, for source data to be converted to the data group with screen coordinate, the data group is loaded to the XML masterplate files based on SVG, and generates basic SVG data drawing lists；The scaling is modules dragged, for utilizing scalings and dragging of the JavaScript to the SVG data drawing lists；The inquiry interception module, the data point for positioning the specified coordinate according to specified coordinate input by user, and pass through the automatic data intercept of interception coordinate input by user and adaptive display window；The computation analysis module, for calculate analysis to the source data to regenerate chart according to user demand.The present invention can realize that the dragging to chart data is analyzed with lossless scaling, inquiry interception and calculating.
Description
Technical field
The present invention relates to field of computer technology more particularly to a kind of chart data display systems based on SVG.
Background technology
In engineering project, it is frequently present of the scene of mass data displaying.With the increase of portfolio, data magnitude is more next
Bigger, packing density is increasing, and the processing of data expends increasing, once asks multiple using the demand of data to seem more
More to protrude.Currently used data exhibition method, for example, the echarts based on canvas, is not enough to reply mass data
Repeatedly reuse, data magnitude is excessive cause the displaying of data is very heavy, mass data can not flexible operating, the density of data
The excessively high details for causing data to show failure.Specific defect is to the chart generated can not change again, edit, nothing
The operations such as distortion scaling, chart dragging；The chart dynamic interactivity of generation is not strong, once data change or position occurs
Change with regard to needing to repaint.And it is because echarts bottoms are based on canvas realizations, and canvas technologies there are drawbacks described above
It is the image based on bitmap, is rendered pixel-by-pixel, 2D figures is drawn by JavaScript, resolution ratio is relied on, does not prop up
Event handler is held, text rendering capability is weak.
Invention content
Chart data display systems provided by the invention based on SVG, utilize SVG (Scalable
VectorGraphics, scalable vector graphics) technology interactivity it is strong, do not depend on resolution ratio, support event handler, can stretch
The characteristics such as contracting and guarantee picture quality can realize that the dragging to chart data is intercepted and counted with lossless scaling, inquiry
Point counting is analysed.
The present invention provides a kind of chart data display systems based on SVG, the system comprises：
SVG formwork modules load the data group to base for source data to be converted to the data group with screen coordinate
In the XML masterplate files of SVG, and generate basic SVG data drawing lists；
Scale modules dragged, connect with the SVG formwork modules, for using JavaScript to the SVG datagrams
The scaling of table and dragging；
Interception module is inquired, is connect with the SVG formwork modules, for according to described in specified coordinate input by user positioning
The data point of specified coordinate, and pass through the automatic data intercept of interception coordinate input by user and adaptive display window；
Computation analysis module is connect with the SVG formwork modules, based on being carried out to the source data according to user demand
Point counting is analysed to regenerate chart.
Chart data display systems provided in an embodiment of the present invention based on SVG utilize SVG compared with prior art
The interactivity of (Scalable Vector Graphics, scalable vector graphics) technology is strong, does not depend on resolution ratio, support event
The characteristics such as processor, scalability and guarantee picture quality, can realize the dragging to chart data and lossless scaling, inquiry
Interception and calculating analysis.
Description of the drawings
Fig. 1 is the structural schematic diagram of chart data display systems of the one embodiment of the invention based on SVG.
Specific implementation mode
In order to make the object, technical scheme and advantages of the embodiment of the invention clearer, below in conjunction with the embodiment of the present invention
In attached drawing, technical scheme in the embodiment of the invention is clearly and completely described, it is clear that described embodiment is only
It is only a part of the embodiment of the present invention, instead of all the embodiments.Based on the embodiments of the present invention, ordinary skill
The every other embodiment that personnel are obtained without making creative work, shall fall within the protection scope of the present invention.
The present invention provides a kind of chart data display systems based on SVG, as shown in Figure 1, the system comprises SVG templates
Module, scaling are modules dragged, inquire interception module and computation analysis module.
Wherein, SVG formwork modules load the data for source data to be converted to the data group with screen coordinate
Group generates basic SVG data drawing lists to the XML masterplate files based on SVG.
For example, the XML masterplate files realization based on SVG of a line chart is as follows：
The scaling is modules dragged, is connect with the SVG formwork modules, for utilizing JavaScript to the SVG numbers
Scaling according to chart and dragging.
Interception module is inquired, is connect with the SVG formwork modules, for according to described in specified coordinate input by user positioning
The data point of specified coordinate, and pass through the automatic data intercept of interception coordinate input by user and adaptive display window；
Computation analysis module is connect with the SVG formwork modules, based on being carried out to the source data according to user demand
Point counting is analysed to regenerate chart.
Wherein, scalable vector graphics SVG is to be based on extensible markup language, one kind for describing two-dimension vector graphics
Graphical format.JavaScript is a kind of literal translation formula script, is a kind of regime type, weak type, the language based on prototype,
Built-in support type.
Chart data display systems provided in an embodiment of the present invention based on SVG, the system comprises SVG formwork modules,
Scale modules dragged, inquiry interception module and computation analysis module, the SVG formwork modules, for source data to be converted to tool
The data group for having screen coordinate loads the data group to the XML masterplate files based on SVG, and generates basic SVG datagrams
Table；The scaling is modules dragged, for utilizing scalings and dragging of the JavaScript to the SVG data drawing lists；The inquiry
Interception module, the data point for positioning the specified coordinate according to specified coordinate input by user, and inputted by user
The automatic data intercept of interception coordinate and adaptive display window；The computation analysis module is used for according to user demand to institute
It states source data and calculate analysis to regenerate chart.Compared with prior art, the present invention is using SVG technologies as basic skill
Art is more suitable for for doing dynamic interaction, and be easy editor, it is only necessary to increase because SVG is to be described using XML document to draw
Add or remove corresponding element, at the same SVG be based on vector, it is all it can be good at handling changing for feature size
Become, the later stage can change parameter and carry out free zoom, and undistorted, each figure of SVG is independent label, can be carried out
Independent operation.Therefore the present invention is by using SVG (Scalable Vector Graphics, scalable vector graphics) technology
Interactivity is strong, do not depend on resolution ratio, support event handler, scalability and ensures the characteristics such as picture quality, can realize
The dragging and lossless scaling, inquiry interception and calculating of chart data are analyzed.
Optionally, the SVG formwork modules include data Assembly interface, the data Assembly interface, for receiving user
The source data of input.
Optionally, it includes scaling dragging interface that the scaling is modules dragged, and the scaling drags interface, for receiving user
The zooming parameter or mouse position of input.
Optionally, the scaling is modules dragged, for zooming in and out calculating to the source data with weight according to zooming parameter
Newly-generated chart, or translation calculation is carried out to regenerate chart to the source data according to mouse position.
For example, a basic scaling drag and drop realization is as follows：
Optionally, the inquiry interception module includes inquiry interception interface, and the inquiry intercepts interface, for receiving user
The specified coordinate or interception coordinate of input.
Wherein, the interception coordinate can be that user directly inputs or be determined by mouse selection.
For example, a basic inquiry interception realization is as follows：
Optionally, the computation analysis module includes calculating analysis interface, the calculating analysis interface, for being put forward to user
For data calculation analysis tools.
Wherein, the data calculation analysis tools include mean value calculation tool, median calculating instrument, mode calculating work
Tool and variance calculating instrument.
For example, a basic calculating analysis realization is as follows：
The present invention provides the analysis data such as average value, median, mode, variance of the data in current display window in real time
Result of calculation, when user scaling, dragging, data intercept chart when, statistical data can also change therewith, facilitate user to magnanimity
The analysis and understanding of data.
One of ordinary skill in the art will appreciate that realizing all or part of flow in above-described embodiment method, being can be with
Relevant hardware is instructed to complete by computer program, the program can be stored in a computer read/write memory medium
In, the program is when being executed, it may include such as the flow of the embodiment of above-mentioned each method.Wherein, the storage medium can be magnetic
Dish, CD, read-only memory (Read-Only Memory, ROM) or random access memory (Random Access
Memory, RAM) etc..
The above description is merely a specific embodiment, but scope of protection of the present invention is not limited thereto, any
Those familiar with the art in the technical scope disclosed by the present invention, all answer by the change or replacement that can be readily occurred in
It is included within the scope of the present invention.Therefore, protection scope of the present invention should be subject to the protection scope in claims.
Claims (7)
1. a kind of chart data display systems based on SVG, which is characterized in that the system comprises：
SVG formwork modules load the data group to being based on for source data to be converted to the data group with screen coordinate
The XML masterplate files of SVG, and generate basic SVG data drawing lists；
Scale modules dragged, connect with the SVG formwork modules, for using JavaScript to the SVG data drawing lists
Scaling and dragging；
Interception module is inquired, is connect with the SVG formwork modules, for described specified according to specified coordinate input by user positioning
The data point of coordinate, and pass through the automatic data intercept of interception coordinate input by user and adaptive display window；
Computation analysis module is connect with the SVG formwork modules, is divided for the source data calculate according to user demand
Analysis is to regenerate chart.
2. system according to claim 1, which is characterized in that the SVG formwork modules include data Assembly interface, described
Data Assembly interface, for receiving source data input by user.
3. system according to claim 1, which is characterized in that the modules dragged scaling includes scaling dragging interface, institute
Scaling dragging interface is stated, for receiving zooming parameter or mouse position input by user.
4. system according to claim 1, which is characterized in that the scaling is modules dragged, for according to zooming parameter pair
The source data zooms in and out calculating to regenerate chart, or carries out translation calculation to the source data according to mouse position
To regenerate chart.
5. system according to claim 1, which is characterized in that the inquiry interception module includes inquiry interception interface, institute
Inquiry interception interface is stated, for receiving specified coordinate input by user or interception coordinate.
6. system according to claim 1, which is characterized in that the computation analysis module includes calculating analysis interface, institute
Calculating analysis interface is stated, for providing a user data calculation analysis tools.
7. system according to claim 6, which is characterized in that the data calculation analysis tools include mean value calculation work
Tool, median calculating instrument, mode calculating instrument and variance calculating instrument.
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 true CN108803995A (en) | 2018-11-13 |
| CN108803995B 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) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111275614A (en) * | 2018-12-04 | 2020-06-12 | 苏州天鸿嘉汇软件有限公司 | Method for realizing lossless image scaling |
Citations (8)
| 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 |
| 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 |
| CN103226604A (en) * | 2013-04-27 | 2013-07-31 | 上海先之决信息科技发展有限公司 | SVG-based Web GIS system and relevant energy consumption monitoring system |
| CN103970896A (en) * | 2014-05-27 | 2014-08-06 | 重庆大学 | Method and system for graphic display based on scalable vector graphic continuous information |
| CN104680421A (en) * | 2013-11-26 | 2015-06-03 | 浙江大华系统工程有限公司 | Scalable vector graphics (SVG) display method and device |
| CN106682218A (en) * | 2016-12-30 | 2017-05-17 | 冶金自动化研究设计院 | Industrial enterprise Web data graphical system and generation method |
| CN107871128A (en) * | 2017-12-11 | 2018-04-03 | 广州市标准化研究院（广州市组织机构代码管理中心） | A kind of high robust image-recognizing method based on SVG dynamic charts |
-
2018
- 2018-06-14 CN CN201810613014.9A patent/CN108803995B/en active Active
Patent Citations (8)
| 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 |
| 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 |
| CN103226604A (en) * | 2013-04-27 | 2013-07-31 | 上海先之决信息科技发展有限公司 | SVG-based Web GIS system and relevant energy consumption monitoring system |
| CN104680421A (en) * | 2013-11-26 | 2015-06-03 | 浙江大华系统工程有限公司 | Scalable vector graphics (SVG) display method and device |
| CN103970896A (en) * | 2014-05-27 | 2014-08-06 | 重庆大学 | Method and system for graphic display based on scalable vector graphic continuous information |
| CN106682218A (en) * | 2016-12-30 | 2017-05-17 | 冶金自动化研究设计院 | Industrial enterprise Web data graphical system and generation method |
| CN107871128A (en) * | 2017-12-11 | 2018-04-03 | 广州市标准化研究院（广州市组织机构代码管理中心） | A kind of high robust image-recognizing method based on SVG dynamic charts |
Non-Patent Citations (2)
| Title |
|---|
| GUO ZHIMAO等: "G2ST: a novel method to transform GML to SVG", 《ACM INTERNATIONAL SYMPOSIUM ON ADVANCES IN GEOGRAPHIC INFORMATION SYSTEMS ACM》 * |
| 王艳君: "基于SVG 的数据分析图表系统的系统模型的研究", 《价值工程》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111275614A (en) * | 2018-12-04 | 2020-06-12 | 苏州天鸿嘉汇软件有限公司 | Method for realizing lossless image scaling |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108803995B (en) | 2020-11-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3362915B1 (en) | Segmenting content displayed on a computing device into regions based on pixels of a screenshot image that captures the content | |
| US8711147B2 (en) | Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects | |
| US7657848B2 (en) | Computer-implemented node-link processing systems and methods | |
| US20130167078A1 (en) | Screen management system | |
| CN104050185A (en) | Zoom-display processing method and device for page contents | |
| US10664980B2 (en) | Vector graphics handling processes for user applications | |
| US9927968B2 (en) | Move of object between pages of editable document | |
| CN101510291A (en) | Visualization method and apparatus for multidimensional data | |
| CN103605783A (en) | Webpage display method and device | |
| CN105444754A (en) | Navigation image display method and device | |
| US9501812B2 (en) | Map performance by dynamically reducing map detail | |
| CN111581444A (en) | Method and device for editing and displaying topological graph | |
| US20200117347A1 (en) | Unified Digital Content Selection System for Vector and Raster Graphics | |
| KR20120075626A (en) | Apparatus and method for processing electric navigational chart in web-based service | |
| CN108803995A (en) | Chart data display systems based on SVG | |
| US20220020113A1 (en) | Image resizing using seam carving | |
| CN107038199B (en) | Drawing method and device | |
| CN103218413B (en) | A kind of electronic document synthetic method and device | |
| CN102739699A (en) | Map display method under browser/server mode and client thereof | |
| US20240249475A1 (en) | Visualizing vector graphics in three-dimensional scenes | |
| Ghazi et al. | FlexiView: A magnet-based approach for visualizing requirements artifacts | |
| US12354214B2 (en) | Digital image editing using a depth-aware system | |
| CN113961175B (en) | Method for processing picture text and computer readable storage medium | |
| CN117936038A (en) | Reading method supporting multiple pathological image formats | |
| Lai | Layout adjustment and boundary detection for a diagram |
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 |