CN110990660A - Data graph display method, storage medium and device - Google Patents
Data graph display method, storage medium and device Download PDFInfo
- Publication number
- CN110990660A CN110990660A CN201911146285.9A CN201911146285A CN110990660A CN 110990660 A CN110990660 A CN 110990660A CN 201911146285 A CN201911146285 A CN 201911146285A CN 110990660 A CN110990660 A CN 110990660A
- Authority
- CN
- China
- Prior art keywords
- data
- page
- display
- data graph
- graphics
- 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.)
- Withdrawn
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/904—Browsing; Visualisation therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
A presentation method, a storage medium and a device of data graphics are provided, wherein the method comprises the following steps: positioning a display page of the data graph; and adjusting the display style of the data graph on the page so as to display the data meeting the preset requirement on the page. The method and the device for displaying the data can display the data required by the user in the limited space of the display page and ensure the display effect.
Description
Technical Field
The present disclosure relates to data display technologies, and in particular, to a method, a storage medium, and an apparatus for displaying data graphics.
Background
In actual work, the statistical data often needs to be visually displayed, for example, the statistical data is displayed in a histogram form. When the statistical data amount is large, the displayed data graph may have a condition that the coordinate axis labels are overlapped, as shown in fig. 1, which affects the data display effect. In order to solve the problem that the coordinate axis labels are overlapped, the fonts of the coordinate axis labels can be reduced, but the reduced coordinate axis labels may cause that the labels cannot be seen clearly, and the data display effect is influenced.
Disclosure of Invention
The application provides a data graph display method, a storage medium and a device, which can display data required by a user in a limited space of a display page and ensure a display effect.
Compared with the related art, the display method of the data graph comprises the following steps:
positioning a display page of the data graph;
and adjusting the display style of the data graph on the page so as to display the data meeting the preset requirement on the page.
The method and the device for displaying the data can display the data required by the user in the limited space of the display page and ensure the display effect.
In an exemplary embodiment, the adjusting the presentation style of the data graphics on the page includes:
when the coordinates exist in the data graph on the page, the display angle of the label on the coordinates is adjusted, so that the label is displayed obliquely, and the adjacent labels are not covered with each other during display.
In an exemplary embodiment, the adjusting the presentation style of the data graphics on the page includes:
performing a translation operation on the data graph on the page, wherein the translation operation comprises: one or more of up-translation, down-translation, left-translation, and right-translation.
In an exemplary embodiment, the adjusting the presentation style of the data graphics on the page includes:
the data graphics on the page are scaled.
In an exemplary embodiment, the scaling the data graph on the page includes:
and carrying out scaling operation on the data graph on the page according to a preset scaling ratio.
In an exemplary embodiment, the scaling the data graph on the page includes:
when coordinates exist in the data pattern, the data pattern included from a start point to an end point set on the coordinates is shown.
The present application also provides a computer readable and writable storage medium, which stores computer executable instructions, which when executed by a processor, implement the steps of the presentation method of data graphics as described above.
The present application further provides an apparatus, comprising:
a memory for storing computer executable instructions;
a processor for executing the computer-executable instructions to implement the steps of the data graph presentation method as described above.
Additional features and advantages of the application will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by the practice of the application. Other advantages of the present application may be realized and attained by the instrumentalities and combinations particularly pointed out in the specification and the drawings.
Drawings
The accompanying drawings are included to provide an understanding of the present disclosure and are incorporated in and constitute a part of this specification, illustrate embodiments of the disclosure and together with the examples serve to explain the principles of the disclosure and not to limit the disclosure.
FIG. 1 is a schematic diagram illustrating coordinate axis label overlap in a data graph shown in the related art;
fig. 2 is a flowchart of a method for displaying a data graph according to an embodiment of the present disclosure;
fig. 3 is a schematic diagram of a tag provided in an embodiment of the present application showing an angle of 0 degree;
fig. 4 is a schematic view of a tag provided in an embodiment of the present application showing an angle of 45 degrees;
fig. 5 is a schematic diagram illustrating a translation performed on a data graph according to an embodiment of the present application;
fig. 6 is a schematic diagram illustrating a shrinking effect on a data pattern according to an embodiment of the present application.
Detailed Description
The present application describes embodiments, but the description is illustrative rather than limiting and it will be apparent to those of ordinary skill in the art that many more embodiments and implementations are possible within the scope of the embodiments described herein. Although many possible combinations of features are shown in the drawings and discussed in the detailed description, many other combinations of the disclosed features are possible. Any feature or element of any embodiment may be used in combination with or instead of any other feature or element in any other embodiment, unless expressly limited otherwise.
The present application includes and contemplates combinations of features and elements known to those of ordinary skill in the art. The embodiments, features and elements disclosed in this application may also be combined with any conventional features or elements to form a unique inventive concept as defined by the claims. Any feature or element of any embodiment may also be combined with features or elements from other inventive aspects to form yet another unique inventive aspect, as defined by the claims. Thus, it should be understood that any of the features shown and/or discussed in this application may be implemented alone or in any suitable combination. Accordingly, the embodiments are not limited except as by the appended claims and their equivalents. Furthermore, various modifications and changes may be made within the scope of the appended claims.
Further, in describing representative embodiments, the specification may have presented the method and/or process as a particular sequence of steps. However, to the extent that the method or process does not rely on the particular order of steps set forth herein, the method or process should not be limited to the particular sequence of steps described. Other orders of steps are possible as will be understood by those of ordinary skill in the art. Therefore, the particular order of the steps set forth in the specification should not be construed as limitations on the claims. Further, the claims directed to the method and/or process should not be limited to the performance of their steps in the order written, and one skilled in the art can readily appreciate that the sequences may be varied and still remain within the spirit and scope of the embodiments of the present application.
The embodiment of the application provides a method for displaying a data graph, as shown in fig. 2, the method includes:
step S201, positioning a display page of the data graph;
step S202 is to adjust the display style of the data graph on the page, so as to display the data meeting the preset requirement on the page.
In an exemplary embodiment, the adjusting the presentation style of the data graphics on the page includes:
when the coordinates exist in the data graph on the page, the display angle of the label on the coordinates is adjusted to enable the label to be displayed in an inclined mode, and the adjacent labels are not covered with each other during display, if the display angle of the label is adjusted from 0 degree to Y degree, the Y degree is a value which is larger than 0 degree and smaller than 90 degrees, and the Y value can be set. Fig. 3 is a schematic diagram showing a display angle of the labels at 0 degree, where the labels on the X axis are placed transversely, and when there are many labels to be displayed on the page, the transversely placed labels may overlap each other, which affects the display effect. Fig. 4 is a schematic diagram illustrating that the display angle of the labels is adjusted to 45 degrees, and at this time, the labels on the X axis are displayed obliquely, and at this time, more labels can be displayed on the page without overlapping each other.
As an application example, the purpose of configuring the attribute of xaxis. axislabel. rotate to realize the rotation angle of the x-axis scale label can be set in the echarts chart, the label can be prevented from being covered by rotation when the category label is not displayed, specifically, the code setting for the attribute is as follows, and the rotation method of the y-axis scale label is the same.
In another exemplary embodiment, the adjusting the presentation style of the data graphics on the page includes:
performing a translation operation on the data graph on the page, wherein the translation operation comprises: one or more of up-translation, down-translation, left-translation, and right-translation. The user can view the content hidden due to the space limitation in the data graph by performing the translation operation on the data graph, as shown in fig. 5, because the space limitation is caused, the content displayed before the translation may be hidden when the translation is performed, and the user can view the whole content of the data graph by continuously performing the translation operation. The user can realize the translation operation on the data graph by mouse dragging action, clicking keyboard "←", "→", "↓" key and the like.
In another exemplary embodiment, the adjusting the presentation style of the data graphics on the page includes:
the data graphics on the page are scaled.
More data can be presented to the user by scaling the data graph, and fig. 6 shows the effect of shrinking on the data graph. As an application example, for the data graph hidden due to the space limitation of the visual window in FIG. 5, the hidden data graph can be re-shown to the user through a zoom-out operation.
As an application example, the dataZoom attribute set in the echart chart may be configured for the purpose of region scaling. The dataZoom is of two types, one is to embed a zoom component in a coordinate system, so that a user can zoom a data graphic on the coordinate system through mouse dragging, mouse wheel scrolling, and finger sliding (touch screen operation). And the other is that a separate sliding bar is provided, and the user zooms the data graph on the sliding bar.
In another exemplary embodiment, the scaling the data graph on the page includes:
and carrying out scaling operation on the data graph on the page according to a preset scaling ratio.
In another exemplary embodiment, the scaling the data graph on the page includes:
and when coordinates exist in the data graph, displaying the data graph contained from the starting point to the end point set on the coordinates, and if the starting point set on the coordinates is the coordinate starting point and the end point set on the coordinates is the coordinate end point, displaying all the data graphs. If the starting point set on the coordinate is the coordinate starting point and the end point set on the coordinate is the data position 30% before the coordinate, only the data graph from the coordinate starting point to 30% before the coordinate is displayed on the page, and the data graph is enlarged relative to the display of all the data graphs.
As an application example, the code for the dataZoom attribute is set as follows:
start and end of dataZoom indicate the set presentation start and end points. If the start is set to be 0, the data is displayed from the beginning, the number of the data pieces to be displayed is divided by the total number of the data pieces to obtain the percentage of the displayed data in the total data, and the value is given to the end.
The embodiment of the present application further provides a computer readable and writable storage medium, where the medium stores computer executable instructions, and the computer executable instructions, when executed by a processor, implement the steps of the data graph presentation method according to the foregoing embodiment.
An embodiment of the present application further provides an apparatus, including:
a memory for storing computer executable instructions;
a processor for executing the computer-executable instructions to implement the steps of the presentation method of data graphics as described in the previous embodiments.
It will be understood by those of ordinary skill in the art that all or some of the steps of the methods, systems, functional modules/units in the devices disclosed above may be implemented as software, firmware, hardware, and suitable combinations thereof. In a hardware implementation, the division between functional modules/units mentioned in the above description does not necessarily correspond to the division of physical components; for example, one physical component may have multiple functions, or one function or step may be performed by several physical components in cooperation. Some or all of the components may be implemented as software executed by a processor, such as a digital signal processor or microprocessor, or as hardware, or as an integrated circuit, such as an application specific integrated circuit. Such software may be distributed on computer readable media, which may include computer storage media (or non-transitory media) and communication media (or transitory media). The term computer storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data, as is well known to those of ordinary skill in the art. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, Digital Versatile Disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by a computer. In addition, communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media as known to those skilled in the art.
Claims (8)
1. A method for displaying a data graph is characterized by comprising the following steps:
positioning a display page of the data graph;
and adjusting the display style of the data graph on the page so as to display the data meeting the preset requirement on the page.
2. The method for displaying data graphics of claim 1, wherein said adjusting the display style of the data graphics on the page comprises:
when the coordinates exist in the data graph on the page, the display angle of the label on the coordinates is adjusted, so that the label is displayed obliquely, and the adjacent labels are not covered with each other during display.
3. The method for displaying data graphics of claim 1, wherein said adjusting the display style of the data graphics on the page comprises:
performing a translation operation on the data graph on the page, wherein the translation operation comprises: one or more of up-translation, down-translation, left-translation, and right-translation.
4. The method for displaying data graphics of claim 1, wherein said adjusting the display style of the data graphics on the page comprises:
the data graphics on the page are scaled.
5. The method for displaying the data graph according to claim 4, wherein the scaling the data graph on the page comprises:
and carrying out scaling operation on the data graph on the page according to a preset scaling ratio.
6. The method for displaying the data graph according to claim 4, wherein the scaling the data graph on the page comprises:
when coordinates exist in the data pattern, the data pattern included from a start point to an end point set on the coordinates is shown.
7. A computer-readable-writable storage medium, characterized in that the medium stores computer-executable instructions which, when executed by a processor, implement the steps of a presentation method of data graphics according to any one of claims 1 to 6.
8. An apparatus, comprising:
a memory for storing computer executable instructions;
a processor for executing the computer-executable instructions to implement the steps of the method of presenting a data graphic as claimed in any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911146285.9A CN110990660A (en) | 2019-11-21 | 2019-11-21 | Data graph display method, storage medium and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911146285.9A CN110990660A (en) | 2019-11-21 | 2019-11-21 | Data graph display method, storage medium and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110990660A true CN110990660A (en) | 2020-04-10 |
Family
ID=70085471
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911146285.9A Withdrawn CN110990660A (en) | 2019-11-21 | 2019-11-21 | Data graph display method, storage medium and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110990660A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111783390A (en) * | 2020-07-07 | 2020-10-16 | 北京字节跳动网络技术有限公司 | Method and device for adjusting dimension label and electronic equipment |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US4791482A (en) * | 1987-02-06 | 1988-12-13 | Westinghouse Electric Corp. | Object locating system |
| CN109308203A (en) * | 2018-08-01 | 2019-02-05 | 广州视源电子科技股份有限公司 | Pie chart label display method, system, readable storage medium and computer equipment |
-
2019
- 2019-11-21 CN CN201911146285.9A patent/CN110990660A/en not_active Withdrawn
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US4791482A (en) * | 1987-02-06 | 1988-12-13 | Westinghouse Electric Corp. | Object locating system |
| CN109308203A (en) * | 2018-08-01 | 2019-02-05 | 广州视源电子科技股份有限公司 | Pie chart label display method, system, readable storage medium and computer equipment |
Non-Patent Citations (2)
| Title |
|---|
| 爱人间: "echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)", 《HTTPS://BLOG.CSDN.NET/MENGHUANNVXIA/ARTICLE/DETAILS/84848964?》 * |
| 紫冰NAN: "ECharts学习四 --- 数据区域缩放组件（dataZoom）", 《HTTPS://BLOG.CSDN.NET/NN_NAN/ARTICLE/DETAILS/83015188?》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111783390A (en) * | 2020-07-07 | 2020-10-16 | 北京字节跳动网络技术有限公司 | Method and device for adjusting dimension label and electronic equipment |
| CN111783390B (en) * | 2020-07-07 | 2023-09-29 | 抖音视界有限公司 | Dimension label adjusting method and device and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9142044B2 (en) | Apparatus, systems and methods for layout of scene graphs using node bounding areas | |
| CN108292297B (en) | Label usage for selectively retaining chart elements during visualization optimization | |
| US10347017B2 (en) | Interactive controls that are collapsible and expandable and sequences for chart visualization optimizations | |
| US8584044B2 (en) | Localized thumbnail preview of related content during spatial browsing | |
| RU2679348C2 (en) | Apparatus and method for displaying chart in electronic device | |
| US7468727B2 (en) | Methods of visualizing graphs | |
| US6738084B1 (en) | Interactive scrolling reference method | |
| EP1999551B1 (en) | Method and graphical interface for embedding animated content into a computer application | |
| US20120304121A1 (en) | Method, processing device, and article of manufacture for providing instructions for displaying time-dependent information and for allowing user selection of time ranges | |
| US20150370463A1 (en) | Event visualization on calendar with timeline | |
| US8817027B2 (en) | Graph display apparatus, recording medium on which program is recorded and graph display method | |
| KR20060049709A (en) | System and method for automaic label placement on charts | |
| US20190012821A1 (en) | Displaying images associated with apps based on app processing task progress statuses | |
| US20130232403A1 (en) | Method and system for the use of adjustment handles to facilitate dynamic layout editing | |
| US9396575B2 (en) | Animation via pin that defines multiple key frames | |
| CN114041111A (en) | Handwriting drawing method, apparatus, electronic device, medium, and program product | |
| CN108089858B (en) | Method and device for creating visual interface | |
| CN112099690A (en) | Page scaling method, device, terminal and storage medium | |
| CN110990660A (en) | Data graph display method, storage medium and device | |
| JP2010521859A (en) | Method and apparatus for editing images | |
| JP5733342B2 (en) | Display control apparatus and program | |
| US10216363B2 (en) | Navigating a network of options | |
| CN108279962B (en) | Method and device for creating visual data display interface | |
| US9128613B2 (en) | Positioning clickable hotspots on a touchscreen display | |
| US8881037B2 (en) | Systems and methods for managing transform points and effects in multi-state electronic content |
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 | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20200410 |