CN111553962A - Chart display method, system and display equipment - Google Patents
Chart display method, system and display equipment Download PDFInfo
- Publication number
- CN111553962A CN111553962A CN202010256332.1A CN202010256332A CN111553962A CN 111553962 A CN111553962 A CN 111553962A CN 202010256332 A CN202010256332 A CN 202010256332A CN 111553962 A CN111553962 A CN 111553962A
- Authority
- CN
- China
- Prior art keywords
- axis
- value
- index data
- determining
- interval
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/248—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
- G06F16/35—Clustering; Classification
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/174—Form filling; Merging
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Computational Linguistics (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application is applicable to the technical field of data display, and provides a chart display method, a chart display system and a chart display device, wherein the chart display method comprises the following steps: grouping original index data based on data attributes of the original index data; traversing the original index data of each group to obtain the maximum value and the minimum value of the original index data of each group; determining a Y-axis configuration item according to the maximum value and the minimum value of the original index data of each group; generating an Echart graph based on the Y-axis configuration items, grouping the original index data, and automatically configuring the Y-axis configuration items of the Echart graph according to the data of each group, so that the parameters of the Y-axis can be adjusted in a self-adaptive manner when the Echart graph is generated, a plurality of Y-axes can share one grid line, and the display effect is effectively enhanced.
Description
Technical Field
The application belongs to the technical field of data display, and particularly relates to a chart display method, a chart display system and a chart display device.
Background
The Echart graph is a commercial-grade data graph, is a pure JavaScript graph library and can be compatible with most browsers, and the bottom layer of the Echart graph depends on a lightweight canvas class library ZRender and can provide a visual, vivid and interactive data visualization graph which can be customized highly. The innovative features of drag recalculation, data view, value range roaming and the like greatly enhance the user experience. However, when the conventional display device displays a plurality of pieces of index data of different types in one Echart, the division lines cannot be aligned due to different unit intervals of a plurality of Y axes, and the display effect of the generated graph is as shown in fig. 1.
In summary, the current display device has a problem of poor display performance of the Echart.
Disclosure of Invention
The embodiment of the application provides a chart display method, a chart display system and a display device, and can solve the problem that the display performance of an Echart chart is poor in the existing display device.
In a first aspect, an embodiment of the present application provides a graph display method, including:
grouping original index data based on data attributes of the original index data;
traversing the original index data of each group to obtain the maximum value and the minimum value of the original index data of each group;
determining a first Y-axis interval according to the preset number of segments and the difference value between the maximum value and the minimum value of the original index data of each group;
if the first Y-axis interval is larger than a first preset interval, determining a Y-axis configuration item based on a first rule model; wherein the first rule model is a model constructed based on a rounding or multiple principle;
if the first Y-axis interval is smaller than a first preset threshold and the first Y-axis interval is larger than or equal to a second preset threshold, determining a Y-axis configuration item based on a second rule model; the second rule model is a model constructed based on an effective number value principle;
and generating and displaying an Echart graph based on the Y-axis configuration items.
In a possible implementation manner of the first aspect, the determining a first Y-axis interval according to a maximum value and a minimum value of each group of raw index data includes:
calculating the difference value between the maximum value and the minimum value in the original index data of each group;
and determining a first Y-axis interval according to the difference value between the maximum value and the minimum value of the original index data of each group and the preset number of segments.
In a possible implementation manner of the first aspect, if the first Y-axis interval is smaller than a second preset threshold, a value range of the Y-axis is set according to a display requirement.
Further, the determining the Y-axis configuration item based on the first rule model includes:
determining a second Y-axis interval and a step length according to the first Y-axis interval and the difference value based on a first rule model;
and determining the Y-axis maximum value and the Y-axis minimum value according to the step length.
Further, the determining the Y-axis configuration item based on the second rule model includes:
determining a second Y-axis interval and a step length according to the first Y-axis interval and the difference value based on a second rule model;
and determining the Y-axis maximum value and the Y-axis minimum value according to the step length.
In a possible implementation manner of the first aspect, a specific formula of the first rule model is as follows:
and deltaY is a second Y-axis interval, delta is a first Y-axis interval, step is a step length, x is a preset number of segments, and z is a first preset threshold.
In a possible implementation manner of the first aspect, a specific formula of the second rule model is as follows:
and delta is the second Y-axis interval, delta is the first Y-axis interval, step is the step length, and z is the first preset threshold.
In a possible implementation manner of the first aspect, the determining the Y-axis maximum value and the Y-axis minimum value according to the step size includes:
calculating a Y-axis maximum value estimated value and a Y-axis minimum value estimated value according to the step length;
and determining the Y-axis maximum value and the Y-axis minimum value according to the difference between the Y-axis maximum value estimated value and the Y-axis minimum value estimated value and a second Y-axis interval.
In a second aspect, an embodiment of the present application provides a chart display system, including:
the grouping module is used for grouping the original index data based on the data attribute of the original index data;
the acquisition module is used for traversing the original index data of each group and acquiring the maximum value and the minimum value of the original index data of each group;
the configuration module is used for determining Y-axis configuration items according to the maximum value and the minimum value of the original index data of each group;
and the generating module is used for generating an Echart graph based on the Y-axis configuration item.
In a third aspect, an embodiment of the present application provides a display device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the steps of the graph display method according to the first aspect when executing the computer program.
In a fourth aspect, the present application provides a computer-readable storage medium, which stores a computer program, and the computer program, when executed by a processor, implements the steps of the graph display method according to the first aspect
In a fifth aspect, an embodiment of the present application provides a computer program product, which, when run on a display device, causes the display device to execute the graph display method according to any one of the first aspect.
It is understood that the beneficial effects of the second aspect to the fifth aspect can be referred to the related description of the first aspect, and are not described herein again.
Compared with the prior art, the embodiment of the application has the advantages that: by grouping the original index data and automatically configuring the Y-axis configuration items of the Echart chart according to the grouped data, the parameters of the Y-axis can be adaptively adjusted when the Echart chart is generated, so that a plurality of Y-axes can share one grid line, the display effect is effectively enhanced, and the display performance of the display device for displaying the Echart chart is improved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments or the prior art descriptions will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive exercise.
FIG. 1 is a schematic diagram of a conventional Echart chart showing different types of pieces of index data;
FIG. 2 is a schematic flow chart illustrating an implementation of a graph display method according to an embodiment of the present application;
fig. 3 is a display schematic diagram of an Echart graph generated based on the graph display method provided in the embodiment of the present application;
FIG. 4 is a flowchart illustrating an embodiment of determining a maximum value and a minimum value according to a step length;
FIG. 5 is a schematic diagram of a chart display system according to an embodiment of the present application;
fig. 6 is a schematic structural diagram of a display device according to an embodiment of the present application.
Detailed Description
In the following description, for purposes of explanation and not limitation, specific details are set forth, such as particular system structures, techniques, etc. in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.
It will be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
It should also be understood that the term "and/or" as used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.
As used in this specification and the appended claims, the term "if" may be interpreted contextually as "when", "upon" or "in response to" determining "or" in response to detecting ". Similarly, the phrase "if it is determined" or "if a [ described condition or event ] is detected" may be interpreted contextually to mean "upon determining" or "in response to determining" or "upon detecting [ described condition or event ]" or "in response to detecting [ described condition or event ]".
Furthermore, in the description of the present application and the appended claims, the terms "first," "second," "third," and the like are used for distinguishing between descriptions and not necessarily for describing or implying relative importance.
Reference throughout this specification to "one embodiment" or "some embodiments," or the like, means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the present application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," or the like, in various places throughout this specification are not necessarily all referring to the same embodiment, but rather "one or more but not all embodiments" unless specifically stated otherwise. The terms "comprising," "including," "having," and variations thereof mean "including, but not limited to," unless expressly specified otherwise.
The graph display method provided in the embodiment of the present application may be applied to display devices such as a mobile phone, a tablet computer, a wearable device, a vehicle-mounted device, an Augmented Reality (AR)/Virtual Reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a Personal Digital Assistant (PDA), and a television, and the embodiment of the present application does not limit specific types of the display devices at all.
Illustratively, the graph display method provided by the embodiment of the application is applied to a display device, a generated Echart graph can be displayed through a display screen of the display device, a processor based on the display device automatically configures Y-axis configuration items of the Echart graph according to each set of original index data, and then generates a corresponding Echart graph based on the Y-axis configuration items.
Referring to fig. 2, an embodiment of the present application provides a chart displaying method applied to the computer device, where the method includes:
s101: the raw metric data is grouped based on data attributes of the raw metric data.
Specifically, after acquiring multiple sets of original index data to be displayed, the computer device automatically performs data grouping according to data attributes of the original index data, where the original index data includes multiple sets of index data, groups the original index data according to units of each set of index data, groups index data with the same unit into the same group, groups index data with different units into different groups, groups the original index data according to values of each set of index data, groups index data with closer values into the same group, and groups the original index data according to business associations between each set of index data. It should be noted that the data attributes of the original index data include, but are not limited to, the unit of the original index data, the size of the original index data, and the business relationship of the original index data.
Illustratively, the company loan balance and the company deposit balance are both in hundred million yuan, so that two sets of index data, namely the company loan balance and the company deposit balance, are divided into the same set and displayed by using a Y axis; the unit of the company loan balance is one hundred million yuan and the unit of the company loan average interest rate is 1, so that the company loan balance and the company loan average interest rate are divided into two groups and displayed by two Y axes. In addition, for the two groups of data of the bad loan rate and the preparation coverage rate, the data difference is large, so the two index data are divided into two groups by setting a grouping rule to be displayed.
Specifically, after a new set of index data is added, the newly added index data is automatically grouped according to the attributes thereof, and is sorted into a corresponding group to display data using the Y axis corresponding to the group.
S102: and traversing the original index data of each group to obtain the maximum value and the minimum value of the original index data of each group.
Specifically, after the original index data are grouped, the maximum value and the minimum value of each group of data are obtained by traversing each group of data.
Specifically, a program to be triggered may be set, and the program is actively triggered after the grouping is completed, so as to traverse each grouped data, and read the maximum value and the minimum value of the grouped data from each grouped data.
S103: and determining a first Y-axis interval according to the preset number of sections and the difference value between the maximum value and the minimum value of the original index data of each group.
Specifically, after the original index data of each group is traversed, the maximum value and the minimum value in the group of data are acquired, and then the difference between the two values is calculated based on the acquired maximum value and the acquired minimum value.
Specifically, the preset number of segments may be set according to actual requirements, and then the first Y-axis interval may be calculated based on the preset number of segments and a difference between a maximum value and a minimum value of each packet data.
Specifically, delta is (max-min)/x, where delta is the first Y-axis interval, max is the maximum value of the set of index data, min is the minimum value of the set of index data, and x is the preset segment.
In an embodiment, the step S103 includes:
calculating the difference value between the maximum value and the minimum value in the original index data of each group;
and determining a first Y-axis interval according to the difference value between the maximum value and the minimum value of the original index data of each group and the preset number of segments.
Specifically, the first Y-axis interval may have many significant digits, such as 2376.6812, and in order to make the displayed graph more concise, the second Y-axis interval may be set to 2500 according to the value of the first Y-axis interval.
S104: and if the first Y-axis interval is larger than a first preset interval, determining a Y-axis configuration item based on a first rule model.
Wherein the first rule model is a model constructed based on a rounding or multiple principle.
Specifically, the Y-axis configuration parameters include a Y-axis interval, a Y-axis minimum value, and a Y-axis maximum value.
Note that, one grid line can be shared by a plurality of Y axes by setting the number of different Y-axis intervals equal. However, if the number of the interval segments is set to be a fixed value, the scale display of the divided coordinate axes may be complicated, the readability of the graph cannot be guaranteed, and the display of the graph data may be incomplete.
Specifically, when determining the Y-axis configuration parameter, a preset number of segments may be preset, where the preset number of segments is the number of interval segments of the Y-axis, and this value may be adaptively adjusted according to a difference between a maximum value and a minimum value of each group of original index data, so that the Y-axis interval may meet a display requirement of a graph, and according to the Y-axis interval, a Y-axis maximum value and a Y-axis minimum value of each Y-axis of the graph are adaptively set, so that each group of original index data may be completely displayed in an image, and incomplete display of graph data may be avoided.
Specifically, the first Y-axis interval may have many decimal places, and the value obtained by adding to the inaccuracy of the floating-point numerical operation of the processor may be 0.36000000001 or 0.4999999999, and the Y-axis interval may be set to 0.4 and 0.5 according to the value of the first Y-axis interval.
It should be noted that the first preset threshold may be set according to actual situations, for example, the first preset threshold is set to 10. When the first Y-axis spacing is greater than 10, the second Y-axis spacing may be determined by rounding or taking a multiple of 5 or a multiple of 10, e.g., the first Y-axis spacing is 38, then the second Y-axis spacing is set to 40; the first Y-axis spacing is 2397, then the second Y-axis spacing is set to 2500. When the first Y-axis interval is less than 10 and less than or equal to 0.000001, the second Y-axis interval is set according to the display accuracy, for example, the first Y-axis interval is 6.2, the second Y-axis interval is set to 6; the first Y-axis spacing is 0.0821, the second Y-axis spacing is set to 0.09.
In an embodiment, the determining the Y-axis configuration item based on the first rule model includes:
determining a second Y-axis interval and a step length according to the first Y-axis interval and the difference value based on a first rule model;
and determining the Y-axis maximum value and the Y-axis minimum value according to the step length.
Specifically, the specific formula of the first rule model is as follows:
and deltaY is a second Y-axis interval, delta is a first Y-axis interval, step is a step length, x is a preset number of segments, and z is a first preset threshold.
Specifically, the Y-axis maximum value and the Y-axis minimum value determined according to the step size must satisfy Ymin < min < max < Ymax, where Ymin is the Y-axis minimum value, Ymax is the Y-axis maximum value, min is the minimum value of the set of data, and max is the maximum value of the set of data. The Y-axis maximum and Y-axis minimum values at this time may be determined based on the following equations:
Ymin＝computeFloat(Math.floor(min/step)*step)；
Ymax＝computeFloat(Math.ceil(max/step)*step)；
wherein Ymin is the minimum value of the Y axis, Ymax is the maximum value of the Y axis, and step is the step length.
S105: and if the first Y-axis interval is smaller than a first preset threshold and the first Y-axis interval is larger than or equal to a second preset threshold, determining a Y-axis configuration item based on a second rule model.
And the second rule model is a model constructed based on an effective number value principle.
In this embodiment, determining the Y-axis configuration item based on the second rule model includes:
determining a second Y-axis interval and a step length according to the first Y-axis interval and the difference value based on a second rule model;
and determining the Y-axis maximum value and the Y-axis minimum value according to the step length.
Specifically, the specific formula of the second rule model is as follows:
and delta is the second Y-axis interval, delta is the first Y-axis interval, step is the step length, and z is the first preset threshold.
It is understood that step 1 when delta 1; step is 0.1 when delta is 0.5; step is 0.1 when delta is 0.11; step is 0.01 when delta is 0.091.
Specifically, the Y-axis maximum value and the Y-axis minimum value determined according to the step size must satisfy Ymin < min < max < Ymax, where Ymin is the Y-axis minimum value, Ymax is the Y-axis maximum value, min is the minimum value of the set of data, and max is the maximum value of the set of data. The Y-axis maximum and Y-axis minimum values at this time may be determined based on the following equations:
Ymin＝computeFloat(Math.floor(min/step)*step)；
Ymax＝computeFloat(Math.ceil(max/step)*step)；
wherein Ymin is the minimum value of the Y axis, Ymax is the maximum value of the Y axis, and step is the step length.
In an embodiment, it may be further determined whether the first Y-axis threshold is smaller than a second preset threshold, and if the first Y-axis interval is smaller than the second preset threshold, the value range of the Y-axis is set according to the display requirement. It should be noted that, in order to ensure the accuracy of the floating point type calculation, the value precision of the Y-axis interval needs to be set, so the second preset threshold may be set according to the actual value precision, for example, set to 0.000001, and since the difference between the maximum value and the minimum value of the group of data is less than 0.000001, that is, the data fluctuation of the group of data is negligible, the Y-axis configuration item is set according to the display effect.
Specifically, if the difference between the maximum value and the minimum value of a certain group of data is less than 0.000001, it indicates that the group of data is sharpened to a straight line. Therefore, in order to highlight the straight line, the straight line may be displayed in a bold manner, and the value range of the Y axis of the straight line is set according to the display requirement. For example, if the maximum value of the group of data is 0, the sharpened straight line of the group of data is overlapped with the X axis, and the value range of the Y axis is set to [ -1,1] in order to enhance the display effect. If the maximum value of the group of data is not 0, the value range of the Y axis is set according to the maximum value, and illustratively, the value range of the Y axis is set to be a distance of 20% above and below the maximum value to be displayed in an enlarged manner, that is, the value range of the Y axis is [0.8 × Max,1.2 × Max ], where Max is the maximum value of the group of data. It should be noted that, the color of the straight line after the group of data is sharpened may also be replaced, and a preset color is used for displaying, which is not limited herein.
S106: and generating and displaying an Echart graph based on the Y-axis configuration items.
Specifically, after the corresponding Y-axis configuration item is calculated, the display device automatically sets the obtained Y-axis configuration item in the yAxis attribute, and performs corresponding setting for different Y-axes, so as to display the generated Y-axis in the graph and display the generated Echart on a display device (e.g., a display screen, a display, etc.) of the display device.
Specifically, the code for generating the Echar chart based on the Y-axis configuration item is as follows:
referring to fig. 3, two Y-axes of the Echart generated based on the graph display method provided in this embodiment can share the same grid line, which is convenient for a user to read.
In another embodiment, when the data source is updated, especially when a set of index data is newly added, the graph display method can be triggered by using a hook function, and the configuration items of the Y axis are adaptively modified before each data display, so that a plurality of Y axes can share one grid line, and the display effect is enhanced.
According to the graph display method provided by the embodiment, the original index data are grouped, and the Y-axis configuration items of the Echart graph are automatically configured according to the grouped data, so that the parameters of the Y axis can be adaptively adjusted when the Echart graph is generated, a plurality of Y axes can share one grid line, and the display performance of the display device is effectively improved.
Referring to fig. 4, fig. 4 is a flowchart illustrating a specific implementation process of S103 in a graph display method according to another embodiment of the present application, where the difference between the present embodiment and the previous embodiment is that a specific implementation process for determining a maximum value of a Y axis and a minimum value of the Y axis according to a step length in the graph display method according to the present embodiment is as follows:
s201: calculating a Y-axis maximum value estimated value and a Y-axis minimum value estimated value according to the step length;
s202: and determining the Y-axis maximum value and the Y-axis minimum value according to the difference between the Y-axis maximum value estimated value and the Y-axis minimum value estimated value and a second Y-axis interval.
Here, in order to consider the fluctuation of data and the simplicity of the Y-axis scale value, the Y-axis minimum value estimated value and the Y-axis maximum value estimated value can be calculated by the following formulas:
Ymin 1＝computeFloat(Math.floor(min/step)*step)；
Ymax 1＝computeFloat(Math.ceil(max/step)*step)；
where Ymin1 is the Y-axis minimum estimate, Ymax1 is the Y-axis maximum estimate, and step is the step size. The Y-axis maximum estimate and the Y-axis minimum estimate obtained by the step size calculation are not the final Y-axis maximum and Y-axis minimum.
Specifically, the difference between the Y-axis maximum estimate Ymax1 and the Y-axis minimum estimate Ymin1 is compared to the product of the second Y-axis interval deltaY and the preset number of segments x. If Ymax 1-Ymin 1> x delta Y, it is said that the second Y-axis interval deltaY is small, and in order to better display the data fluctuation, the second Y-axis interval deltaY is increased by step/x according to the number of segments until (x-1) × deltaY < Ymax 1-Ymin 1< (x) delta Y. For example, if min is 0.1, max is 5.023, Ymin1 is 0, Ymax1 is 6, deltaY is 1, and x is 5, then Ymin is 0, Ymax is 6, and deltaY is 1.2.
If Ymax 1-Ymin 1 [ (x-1) ] deltaY ], the second Y-axis interval deltaY is described to be large, and in order to better display the data fluctuation, the second Y-axis interval deltaY is reduced by step/x according to the number of segments until (x-1) < deltaY < Ymax 1-Ymin 1 [ (. x. -delta Y). For example, if min is 0.1, max is 5.023, Ymin1 is 0, Ymax1 is 6, deltaY is 2, and x is 5, then Ymin is 0, Ymax is 6, and deltaY is 1.2.
In one embodiment, after the maximum value and the minimum value of each group of data are determined, the corresponding Y-axis configuration items can be determined, the Y-axis configuration items corresponding to the different maximum values and the different minimum values are cached, and the graph is generated according to the cached Y-axis configuration items each time the graph data or the newly added index data are updated, so that the graph generation efficiency can be improved, and the calculation resources can be reduced.
Therefore, the graph display method provided in this embodiment can flexibly display each group of index data by automatically adjusting the Y-axis configuration items according to the data size of each group of data, so that the Echart can better display the fluctuation of the data, a user can conveniently observe the relationship between the data, and the corresponding Y-axis configuration items are cached by finding out the maximum value and the minimum value of each group of data, so as to improve the generation efficiency of the graph and effectively reduce the memory resources of the system occupied by the adaptive process and the time required for calculation.
Fig. 5 is a block diagram of a diagram generation system provided in the embodiment of the present application, which corresponds to the diagram display method described in the above embodiment, and only shows a part related to the embodiment of the present application for convenience of description.
Referring to fig. 5, the chart display system includes a grouping module 11, an obtaining module 12, a determining module 13, a first configuring module 14, a second configuring module 15, and a displaying module 16.
The grouping module is used for grouping the original index data based on the data attribute of the original index data;
the acquisition module is used for traversing the original index data of each group and acquiring the maximum value and the minimum value of the original index data of each group;
the determining module is used for determining a first Y-axis interval according to the preset number of sections and the difference value between the maximum value and the minimum value of the original index data of each group;
the first configuration module is used for determining a Y-axis configuration item based on a first rule model if the first Y-axis interval is greater than a first preset interval; wherein the first rule model is a model constructed based on a rounding or multiple principle;
the second configuration module is used for determining a Y-axis configuration item based on a second rule model if the first Y-axis interval is smaller than a first preset threshold and the first Y-axis interval is greater than or equal to a second preset threshold; the second rule model is a model constructed based on an effective number value principle;
and the display module is used for generating and displaying the Echart graph based on the Y-axis configuration item.
Further, the determining module 13 includes a difference calculating unit and a first determining unit.
The difference value calculating unit is used for calculating the difference value between the maximum value and the minimum value in the original index data of each group;
the first determining unit is used for determining a first Y-axis interval according to the difference value between the maximum value and the minimum value of the original index data of each group and the number of preset segments.
Further, the chart display system further comprises a value setting unit.
The value setting unit is used for setting the value range of the Y axis according to the display requirement if the first Y axis interval is smaller than a second preset threshold.
Further, the first configuration module is specifically configured to:
determining a second Y-axis interval and a step length according to the first Y-axis interval and the difference value based on a first rule model;
and determining the Y-axis maximum value and the Y-axis minimum value according to the step length.
Further, the specific formula of the first rule model is as follows:
and deltaY is a second Y-axis interval, delta is a first Y-axis interval, step is a step length, x is a preset number of segments, and z is a first preset threshold.
Further, the specific formula of the second rule model is as follows:
and delta is the second Y-axis interval, delta is the first Y-axis interval, step is the step length, and z is the first preset threshold.
Further, the first configuration module is further configured to:
calculating a Y-axis maximum value estimated value and a Y-axis minimum value estimated value according to the step length;
and determining the Y-axis maximum value and the Y-axis minimum value according to the difference between the Y-axis maximum value estimated value and the Y-axis minimum value estimated value and a second Y-axis interval.
It should be noted that, for the information interaction, execution process, and other contents between the above-mentioned devices/units, the specific functions and technical effects thereof are based on the same concept as those of the embodiment of the method of the present application, and specific reference may be made to the part of the embodiment of the method, which is not described herein again.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-mentioned division of the functional units and modules is illustrated, and in practical applications, the above-mentioned function distribution may be performed by different functional units and modules according to needs, that is, the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-mentioned functions. Each functional unit and module in the embodiments may be integrated in one processing unit, or each unit may exist alone physically, or two or more units are integrated in one unit, and the integrated unit may be implemented in a form of hardware, or in a form of software functional unit. In addition, specific names of the functional units and modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working processes of the units and modules in the system may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
Therefore, the chart generation system provided in this embodiment can also automatically configure the Y-axis configuration items of the Echart according to the data of each group by grouping the original index data, so that the parameters of the Y-axis can be adaptively adjusted when the Echart is generated, a plurality of Y-axes can share one grid line, and the display effect is effectively enhanced.
Fig. 6 is a schematic structural diagram of a display device according to an embodiment of the present application. As shown in fig. 6, the display device 6 of this embodiment includes: at least one processor 60 (only one is shown in fig. 6), a memory 61, and a computer program 62 stored in the memory 61 and operable on the at least one processor 60, wherein the processor 60 executes the computer program 62 to implement the steps in any of the above-mentioned various access control method embodiments.
The display device 6 may be a desktop computer, a notebook, a palm computer, a cloud display device, or other computing devices. The display device may include, but is not limited to, a processor 60, a memory 61. Those skilled in the art will appreciate that fig. 6 is merely an example of the display device 6, and does not constitute a limitation on the display device 6, and may include more or less components than those shown, or combine some of the components, or different components, such as input output devices, network access devices, etc.
The Processor 60 may be a Central Processing Unit (CPU), and the Processor 60 may be other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 61 may in some embodiments be an internal storage unit of the display device 6, such as a hard disk or a memory of the display device 6. The memory 61 may also be an external storage device of the display device 6 in other embodiments, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), and the like, which are provided on the display device 6. Further, the memory 61 may also include both an internal storage unit and an external storage device of the display device 6. The memory 61 is used for storing an operating system, an application program, a Boot Loader (Boot Loader), data, and other programs, such as program codes of the computer programs. The memory 61 may also be used to temporarily store data that has been output or is to be output.
Illustratively, the computer program 62 may be divided into one or more units, which are stored in the memory 61 and executed by the processor 60 to accomplish the present application. The one or more units may be a series of computer program instruction segments capable of performing specific functions, which are used to describe the execution of the computer program 62 in the display device 6. For example, the computer program 62 may be divided into a grouping module, an obtaining module, a configuring module and a generating module, and the specific functions of each unit are as follows:
the grouping module is used for grouping the original index data based on the data attribute of the original index data;
the acquisition module is used for traversing the original index data of each group and acquiring the maximum value and the minimum value of the original index data of each group;
the configuration module is used for determining Y-axis configuration items according to the maximum value and the minimum value of the original index data of each group;
and the generating module is used for generating an Echart graph based on the Y-axis configuration item.
An embodiment of the present application further provides a network device, where the network device includes: at least one processor, a memory, and a computer program stored in the memory and executable on the at least one processor, the processor implementing the steps of any of the various method embodiments described above when executing the computer program.
The embodiments of the present application further provide a computer-readable storage medium, where a computer program is stored, and when the computer program is executed by a processor, the computer program implements the steps in the above-mentioned method embodiments.
The embodiments of the present application provide a computer program product, which when running on a mobile terminal, enables the mobile terminal to implement the steps in the above method embodiments when executed.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, all or part of the processes in 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 can implement the steps of the embodiments of the methods described above when the computer program is executed by a processor. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer readable medium may include at least: any entity or apparatus capable of carrying computer program code to a display device, recording medium, computer Memory, Read-Only Memory (ROM), Random-Access Memory (RAM), electrical carrier wave signals, telecommunications signals, and software distribution medium. Such as a usb-disk, a removable hard disk, a magnetic or optical disk, etc. In certain jurisdictions, computer-readable media may not be an electrical carrier signal or a telecommunications signal in accordance with legislative and patent practice.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and reference may be made to the related descriptions of other embodiments for parts that are not described or illustrated in a certain embodiment.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus/network device and method may be implemented in other ways. For example, the above-described apparatus/network device embodiments are merely illustrative, and for example, the division of the modules or units is only one logical division, and there may be other divisions when actually implementing, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not implemented. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
The above-mentioned embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; such modifications and substitutions do not substantially depart from the spirit and scope of the embodiments of the present application and are intended to be included within the scope of the present application.
Claims (10)
1. A chart display method, comprising:
grouping original index data based on data attributes of the original index data;
traversing the original index data of each group to obtain the maximum value and the minimum value of the original index data of each group;
determining a first Y-axis interval according to the preset number of segments and the difference value between the maximum value and the minimum value of the original index data of each group;
if the first Y-axis interval is larger than a first preset interval, determining a Y-axis configuration item based on a first rule model; wherein the first rule model is a model constructed based on a rounding or multiple principle;
if the first Y-axis interval is smaller than a first preset threshold and the first Y-axis interval is larger than or equal to a second preset threshold, determining a Y-axis configuration item based on a second rule model; the second rule model is a model constructed based on an effective number value principle;
and generating and displaying an Echart graph based on the Y-axis configuration items.
2. A graphical display method as defined in claim 1, wherein said determining a first Y-axis interval from the maximum and minimum values of the raw metric data for each group comprises:
calculating the difference value between the maximum value and the minimum value in the original index data of each group;
and determining a first Y-axis interval according to the difference value between the maximum value and the minimum value of the original index data of each group and the preset number of segments.
3. The chart display method as claimed in claim 1, further comprising:
and if the first Y-axis interval is smaller than a second preset threshold, setting the value range of the Y axis according to the display requirement.
4. A graphical display method as claimed in claim 1, wherein said determining Y-axis configuration items based on a first rule model comprises:
determining a second Y-axis interval and a step length according to the first Y-axis interval and the difference value based on a first rule model;
and determining the Y-axis maximum value and the Y-axis minimum value according to the step length.
5. A graphical display method as claimed in claim 1, characterised in that said first rule model has the following specific formula:
and deltaY is a second Y-axis interval, delta is a first Y-axis interval, step is a step length, x is a preset number of segments, and z is a first preset threshold.
6. A graphical display method as claimed in claim 1, characterised in that said second rule model has the following specific formula:
and delta is the second Y-axis interval, delta is the first Y-axis interval, step is the step length, and z is the first preset threshold.
7. A method of graphically displaying as claimed in claim 4, wherein said determining a Y-axis maximum and a Y-axis minimum based on said step size comprises:
calculating a Y-axis maximum value estimated value and a Y-axis minimum value estimated value according to the step length;
and determining the Y-axis maximum value and the Y-axis minimum value according to the difference between the Y-axis maximum value estimated value and the Y-axis minimum value estimated value and a second Y-axis interval.
8. A chart display system, comprising:
the grouping module is used for grouping the original index data based on the data attribute of the original index data;
the acquisition module is used for traversing the original index data of each group and acquiring the maximum value and the minimum value of the original index data of each group;
the determining module is used for determining a first Y-axis interval according to the preset number of sections and the difference value between the maximum value and the minimum value of the original index data of each group;
the first configuration module is used for determining a Y-axis configuration item based on a first rule model if the first Y-axis interval is greater than a first preset interval; wherein the first rule model is a model constructed based on a rounding or multiple principle;
the second configuration module is used for determining a Y-axis configuration item based on a second rule model if the first Y-axis interval is smaller than a first preset threshold and the first Y-axis interval is greater than or equal to a second preset threshold; the second rule model is a model constructed based on an effective number value principle;
and the display module is used for generating and displaying the Echart graph based on the Y-axis configuration item.
9. A display device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, characterized in that the processor implements the method according to any of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium, in which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010256332.1A CN111553962A (en) | 2020-04-02 | 2020-04-02 | Chart display method, system and display equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010256332.1A CN111553962A (en) | 2020-04-02 | 2020-04-02 | Chart display method, system and display equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111553962A true CN111553962A (en) | 2020-08-18 |
Family
ID=72002398
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010256332.1A Pending CN111553962A (en) | 2020-04-02 | 2020-04-02 | Chart display method, system and display equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111553962A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112562039A (en) * | 2020-12-23 | 2021-03-26 | 平安银行股份有限公司 | Method and device for determining extreme value of longitudinal axis in trend graph |
| CN113434820A (en) * | 2021-06-24 | 2021-09-24 | 平安国际智慧城市科技股份有限公司 | Method, device and equipment for optimizing Y-axis coordinate of chart and storage medium |
-
2020
- 2020-04-02 CN CN202010256332.1A patent/CN111553962A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112562039A (en) * | 2020-12-23 | 2021-03-26 | 平安银行股份有限公司 | Method and device for determining extreme value of longitudinal axis in trend graph |
| CN112562039B (en) * | 2020-12-23 | 2023-08-22 | 平安银行股份有限公司 | Method and device for determining extreme value of vertical axis in trend chart |
| CN113434820A (en) * | 2021-06-24 | 2021-09-24 | 平安国际智慧城市科技股份有限公司 | Method, device and equipment for optimizing Y-axis coordinate of chart and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111553962A (en) | Chart display method, system and display equipment | |
| CN110851225B (en) | Method for visually displaying dynamic layout of incremental primitive, terminal device and storage medium | |
| CN111127590B (en) | Second-order Bezier curve drawing method and device | |
| CN104853059B (en) | Super-resolution image processing method and its device | |
| CN110069195B (en) | Image dragging deformation method and device | |
| CN111754435A (en) | Image processing method, image processing device, terminal equipment and computer readable storage medium | |
| CN111626938B (en) | Image interpolation method, image interpolation device, terminal device, and storage medium | |
| CN113506356B (en) | Method and device for drawing area map, readable medium and electronic equipment | |
| CN116595089A (en) | Task dependency graph layout method, device, equipment and storage medium | |
| JP2024518594A (en) | Electronic table introduction method, device, equipment and medium | |
| CN111382831A (en) | Method and device for accelerating forward reasoning of convolutional neural network model | |
| CN109189524A (en) | Image resource generation method and device | |
| CN109388311A (en) | A kind of image display method, device and equipment | |
| CN114629800A (en) | Visual generation method, device, terminal and storage medium for industrial control network target range | |
| CN108182656B (en) | Image processing method and terminal | |
| CN111258582B (en) | Window rendering method and device, computer equipment and storage medium | |
| CN113902841A (en) | Image drawing method and device, electronic equipment and readable storage medium | |
| CN107967341A (en) | A kind of image display method, terminal device and storage medium | |
| CN109408028B (en) | Floating point number operation method and device and storage medium | |
| CN108389223B (en) | Image processing method and terminal | |
| CN110875873B (en) | Information monitoring method, information monitoring device and mobile terminal | |
| CN111179174B (en) | Image stretching method and device based on face recognition points | |
| CN116561081B (en) | Data processing method, device, electronic equipment, storage medium and program product | |
| CN111611782B (en) | Connection point generation method and device | |
| CN113296667A (en) | Data visualization display method and device and terminal equipment |
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 |