Detailed Description
It should be noted that, without conflict, the embodiments of the present application and features of the embodiments may be combined with each other. The application will be described in detail below with reference to the drawings in connection with embodiments.
In order that those skilled in the art will better understand the present application, a technical solution in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in which it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present application without making any inventive effort, shall fall within the scope of the present application.
It should be noted that the terms "first," "second," and the like in the description and the claims of the present application and the above figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate in order to describe the embodiments of the application herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.
For convenience of description, the following will describe some terms or terminology involved in the embodiments of the present application:
Pictographic histograms-various histograms with pictographic elements (e.g., pictures, SVG PATHDATA, etc.) may be provided.
ECharts an open source visual library realized by JavaScript can be smoothly operated on a PC and mobile equipment, is compatible with most of current browsers (IE 8/9/10/11, chrome, firefox, safari and the like), and the bottom layer depends on a lightweight vector graphic library ZRender to provide a visual, interactive and highly personalized data visual chart.
Configurable in that the user can configure pictographic histograms according to his own wishes.
Cutting out a graph: two series, one being a complete graph, used as a background to express the total value, and the other being a graph cut using symbolClip of Echarts, express the current value.
According to an embodiment of the present invention, there is provided a method embodiment of a graph display method, it should be noted that the steps shown in the flowchart of the drawings may be performed in a computer system such as a set of computer executable instructions, and that although a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in an order different from that herein.
Fig. 1 is a flowchart of a graph display method according to an embodiment of the present invention, as shown in fig. 1, the method including the steps of:
step S102, receiving interface configuration parameters corresponding to interface operations of the displayed chart;
Step S104, determining a type of adjustment mode to be realized by the chart and a type of hidden configuration parameter of the adjustment mode according to the interface configuration parameter, wherein the hidden configuration parameter is a bottom configuration parameter which is not operable by a user of the chart;
Step S106, executing a type of adjustment mode according to the interface configuration parameters and the implicit configuration parameters, and displaying a chart after executing the type of adjustment mode.
Through the steps, interface configuration parameters corresponding to interface operations of the displayed chart are received; determining a type of adjustment mode to be realized by the chart and a type of implicit configuration parameter of the adjustment mode according to the interface configuration parameters, wherein the implicit configuration parameter is a bottom configuration parameter which is not operable by a user of the chart; according to interface configuration parameters and implicit configuration parameters, a class of adjustment modes are executed, a mode of a chart after the class of adjustment modes is executed is displayed, a user operates a displayed chart interface, a corresponding adjustment mode is executed according to the operation, and the mode is divided into a class of adjustment modes and a class of adjustment modes according to different realization modes, so that the purpose that the chart can be configured from the front end of the displayed chart is achieved, the technical effects of improving user experience and expanding the application range of the chart are achieved, further, the technical problems that in the related technology, the chart of the mechanism can only be rendered according to codes, the related functions are achieved, the user cannot render to achieve the related functions under the condition that the user does not understand the codes, the user use experience is poor, and the application range of the chart of the mechanism is small are solved.
The chart may be an echart chart, and the chart may be rendered according to a code to generate and display a corresponding chart. The user may directly operate the rendered chart at the front end, for example, lengthen the generated graph in the bar chart, represent increasing the data of the data item corresponding to the graph, and display the graph after the data increase. Graphics may also be manipulated to copy, paste, cut, mirror, crop, etc.
When the image is operated, the operation on the image can be realized by clicking a screen, touching and sliding the screen, the corresponding function button can be displayed when the image is displayed, a user can click the function button and then operate according to the corresponding operation mode of the function to realize the function, for example, mirror image, after clicking the mirror image button, the mirror image function is started, the image needing mirror image needs to be clicked first, then the mirror image needs to be determined, and the mirror image is mirrored up and down, left and right, or a mirror image shaft is customized and then the mirror image can be determined.
The interface configuration parameter corresponding to the interface operation of the displayed chart may be operation data corresponding to an operation performed on the displayed chart by the user on the front-end display interface, and the operation data may be received by the front-end display device and sent to the chart, and the chart is processed to execute a function and a graphic change corresponding to the operation.
When determining the adjustment mode to be implemented by the chart according to the interface configuration parameters, the method specifically may include: and receiving the interface configuration parameters, and calling corresponding adjustment mode codes according to the interface configuration parameters, wherein the adjustment mode codes are prearranged and packaged in a database, when the interface configuration parameters are used, only the corresponding codes are required to be called, and the specific parameters of the executed codes can be determined according to the specific parameters, for example, when the graphics are elongated, the specific parameters can be the data increment corresponding to the elongation operation or the data increment after the elongation operation. The functions that can be realized only according to the interface configuration parameters are two kinds of adjustment modes, such as the elongation reminding, copying, pasting, cutting and the like. According to the operation, the purpose of carrying out the configurable adjustment of the two types of the charts from the front end of the displayed charts is achieved, so that the technical effects of improving the user experience and expanding the application range of the charts are achieved.
In one case, the adjustment mode cannot be directly implemented according to the interface configuration parameters, for example, the graphic clipping is required, the user cannot directly edit the graphic layer for displaying the background graphic and the target graphic, the concept of the graphic layer is invisible to the user, the user can only directly observe the final display image after stacking a plurality of graphics, and it cannot be determined which image is located at which layer, and when the graphic clipping is performed, the display layer of the background graphic must be required to be located below the display layer where the target graphic is located, so that the graphic can be correctly displayed when the graphic clipping is performed. However, since the parameter is not visible to the user, the parameter is called a hidden configuration parameter, and in particular, the hidden configuration parameter is a bottom configuration parameter which is not operable by the user of the chart. In this embodiment, the implicit configuration parameters may be determined according to the interface configuration parameters. After determining the invisible configuration parameters, according to the interface configuration parameters and the invisible configuration parameters, the codes of functions corresponding to the interface configuration parameters and the invisible configuration parameters are called, the codes are similar to the code processing modes of the two-class adjustment modes, are preset in a database, are called when in use, and the corresponding adjustment modes are determined and implemented through the codes and specific parameters in the interface configuration parameters and the invisible configuration parameters. The functions which can be realized only according to the interface configuration parameters and the invisible configuration parameters are one type of adjustment mode. According to the operation, the purpose of carrying out the configuration on one type of adjustment mode of the chart from the front end of the displayed chart is achieved, and therefore the technical effects of improving user experience and expanding the application range of the chart are achieved.
Specifically, one type of adjustment method includes: graphic clipping, in the case that one type of adjustment mode is graphic clipping for a target graphic in a chart, interface configuration parameters include: the basis value is used for identifying a graph series corresponding to a background graph for performing graph cutting on the target graph; the receiving interface configuration parameters corresponding to the interface operation of the displayed chart comprises: after the function of graphic clipping is started, responding to the operation of selecting the background graphic, and generating a basis value according to the graphic identification of the selected background graphic, wherein the basis value corresponds to the graphic identification one by one.
The above-described graphic series is a data series of a corresponding graphic generated in a graph, and may include position data, data items, data amounts, graphic sizes, and the like of the graphic in particular. The graphic mark of the background graphic can mark the graphic as the background graphic, a basis value can be correspondingly determined according to the graphic mark, and a background series can be determined according to the basis value. The above-mentioned basis value is used for identifying the series corresponding to background graph, and the series corresponding to the basis value is determined as background series. The above basis value may be symbolBoundingDataKey values of the data series in the echorts chart.
Optionally, the implicit configuration parameter of the graphic clipping function is a hierarchy value, and determining the implicit configuration parameter according to the interface configuration parameter includes: determining a background graph of the target graph according to the basis value; from the target graphic and the background graphic, a hierarchy value identifying a display hierarchy of the target graphic and the background graphic is determined.
After the invisible configuration parameters are determined, the graphics can be rendered. In determining the invisible configuration parameters, different determining manners may be available for different invisible parameters, and in this embodiment, the invisible configuration parameters are taken as an example to display the hierarchy value of the layer. Other adjustment manners that require the level value to be implemented may be the same as those in the present embodiment.
Optionally, determining, according to the target graphic and the background graphic, a level value for identifying a display level of the target graphic and the background graphic includes: traversing the graph series corresponding to the graph series array in the target graph, the background graph and the graph respectively, and configuring a hierarchy value for the traversed graph series, wherein the graph series array comprises a plurality of graph series; under the condition that the current graphic series has graphic identifiers, determining the graphic series as the graphic series of the background graphic, and jumping to the next graphic series for traversing; after traversing, determining the level value of the target graph; and determining the level value of the background graph according to the level value of the target graph, wherein the level value of the background graph is smaller than the level value of the target graph.
The graphic identifier is used for identifying the graphic series as a background graphic series, and can be isBg attributes in an Echarts chart, the series can be identified as the background series through the isBg attributes, and the corresponding graphic of the series is the background graphic. The series of graphics may be determined based on the reference value, and the series having the reference value is a target series, that is, a series corresponding to the target graphics, and the content of symbolBoundingDataKey values in the echorts chart indicates the target graphics. The above-mentioned level value may be a Z value in the echorts chart, where the Z value is used to identify the level of the layer where the graph is located, and the code may determine the level of the layer where the graph is located according to the Z value.
In the process of realizing the second-class adjustment mode, the method further comprises the following optional steps: determining a second-class adjustment mode to be realized according to the interface configuration parameters; executing a second-class adjustment mode according to the interface configuration parameters; displaying a chart after the second-class adjustment mode is executed; wherein the second type of adjustment means comprises at least one of the following: graph replication, graph deformation, legend modification, annotation editing.
The two-class adjustment mode is an adjustment mode which can be realized without determining hidden configuration parameters, and the specific flow is that operation parameters corresponding to interface operation of a user on a real chart are received, the operation parameters can further determine the interface configuration parameters, the two-class adjustment mode which needs to be realized is determined according to the interface configuration parameters, and then the two-class adjustment mode which is executed according to the interface configuration parameters can be executed by calling a program package corresponding to the two-class adjustment mode through the interface configuration parameters.
Optionally, the second-class adjustment mode executed according to the interface configuration parameter includes: determining attribute parameters of a target graph of the chart according to the interface configuration parameters; the attribute parameters are input into the graph series of the target graph through the reference function, and the graph series is updated to implement the two-class adjustment mode.
Optionally, displaying the chart after the second-class adjustment mode is performed includes: determining a chart after the second-class adjustment mode is executed according to the updated graph series; and displaying a chart after the second-class adjustment mode is executed.
After the execution of the first type of adjustment mode is completed, the corresponding graph needs to be updated, and then the original graph is replaced according to the updated display graph so as to display the graph after the execution of the first type of adjustment mode.
In addition, this embodiment also provides an alternative implementation, and this implementation is described in detail below.
In this embodiment, when the user uses the pictographic histogram, the user can implement the custom configuration, and particularly when the clipping function is set, the pictographic histogram can be correctly displayed according to whether the user sets clipping, how to handle linkage between series and the hierarchical relationship of comments.
In Echarts, taking an example of a graphics clipping function, the specific steps are as follows:
For example, the pictographic histogram has 2 series a and B,1. If the series a configures no pattern repetition and the pattern clipping is yes, then the user cannot customize the pattern size, here, a linkage, and each series configuration needs to be input with an index, then the hidden attribute of the graphic component of the index is set to false, and the index is used as a parameter to be input, so that the attribute setting can be rapidly judged, and the linkage problem is conveniently processed.
For example, series A sets the clipping function based on the value of series B, where A has an attribute symbolBoundingDataKey that is B and B has an attribute isBg to identify that B is a background series, where B is a background series, and since B is a background series, it is necessary to render the pictographic histogram by the correct algorithm as follows: and traversing the series array, if isBg is true, skipping, namely containing the isBg attribute, determining the series as a background series, and directly skipping the background series without counting the Z value. The value symbolBoundingDataKey is the true series, the Z value of the true series is +2, then the background series is found, and the background series is smaller than the Z value of the true series by 1, so that the correct rendering of Echarts in multiple series can be ensured.
To ensure that the annotation line function of echartis is available, it is necessary to ensure that the Z value of this series of annotation lines is a maximum value, so that the initial value of Z for the pictographic histogram is assigned a small negative value.
In this embodiment, the configuration options may be dynamically updated according to the configuration of the user. Even if a plurality of series are provided with clipping, the correct Z value can be conveniently calculated according to the algorithm in the scheme, and then the correct pictographic histogram is rendered by Echarts. Normal display of annotation lines of echorts is ensured.
Fig. 2 is a schematic view of a graph display apparatus according to an embodiment of the present invention, and as shown in fig. 2, there is also provided a graph display apparatus according to another aspect of an embodiment of the present invention, the apparatus including: the receiving module 22, the determining module 24 and the display module 26 are described in detail below.
A receiving module 22, configured to receive interface configuration parameters corresponding to interface operations on the displayed chart; the determining module 24 is connected to the receiving module 22, and is configured to determine, according to the interface configuration parameters, a type of adjustment mode that the chart needs to implement, and a type of implicit configuration parameters of the adjustment mode, where the implicit configuration parameters are bottom configuration parameters that are not operable by a user of the chart; the display module 26 is connected to the determining module 24, and is configured to execute a type of adjustment mode according to the interface configuration parameter and the implicit configuration parameter, and display a chart after executing the type of adjustment mode.
Through the above steps, the receiving module 22 is adopted to receive the interface configuration parameters corresponding to the interface operation of the displayed chart; the determining module 24 determines a type of adjustment mode to be realized by the chart and a type of implicit configuration parameter of the adjustment mode according to the interface configuration parameter, wherein the implicit configuration parameter is a bottom configuration parameter which is not operable by a user of the chart; the display module 26 executes one type of adjustment mode according to the interface configuration parameters and the implicit configuration parameters, displays the mode of the chart after executing one type of adjustment mode, and the user performs the corresponding adjustment mode according to the operation by operating the displayed chart interface, and divides the chart into one type of adjustment mode and two types of adjustment mode according to different realization modes, so as to achieve the purpose of configuring the chart from the front end of the displayed chart, thereby realizing the technical effects of improving the user experience and expanding the application range of the chart, further solving the technical problems that the echartists chart in the related art can only be rendered according to codes, realizing related functions, and being incapable of rendering to realize related functions under the condition that the user does not understand the codes, resulting in poor user experience and small application range of the echartists chart.
The data processing device comprises a processor and a memory, the receiving module 22, the determining module 24 and the display module 26 are stored in the memory as program module units, and the processor executes the program module units stored in the memory to realize corresponding functions.
The processor includes a kernel, and the kernel fetches the corresponding program unit from the memory. The kernel can be provided with one or more than one, and the wien diagram and the keywords are displayed simultaneously by adjusting the kernel parameters, so that the use effect is improved.
The memory may include volatile memory, random Access Memory (RAM), and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM), among other forms in computer readable media, the memory including at least one memory chip.
According to another aspect of the embodiments of the present invention, there is also provided a storage medium, including a stored program, where the program, when executed, controls a device in which the storage medium is located to perform any one of the methods described above.
According to another aspect of the embodiment of the present invention, there is also provided a processor, configured to execute a program, where the program executes the method of any one of the above.
According to another aspect of an embodiment of the present invention, there is also provided an electronic device including at least one processor, and at least one memory and bus connected to the processor; the processor and the memory complete communication with each other through the bus; the processor is configured to invoke the program instructions in the memory to perform the graphical display method of any of the above.
The embodiment of the invention provides equipment, which comprises a processor, a memory and a program stored in the memory and capable of running on the processor, wherein the processor realizes the following steps when executing the program: receiving interface configuration parameters corresponding to interface operations of the displayed chart; determining a type of adjustment mode to be realized by the chart and a type of implicit configuration parameter of the adjustment mode according to the interface configuration parameters, wherein the implicit configuration parameter is a bottom configuration parameter which is not operable by a user of the chart; and executing one type of adjustment mode according to the interface configuration parameters and the hidden configuration parameters, and displaying a chart after executing one type of adjustment mode.
Optionally, one type of adjustment method includes: graphic clipping, in the case that one type of adjustment mode is graphic clipping for a target graphic in a chart, interface configuration parameters include: the basis value is used for identifying a graph series corresponding to a background graph for performing graph cutting on the target graph; the receiving interface configuration parameters corresponding to the interface operation of the displayed chart comprises: after the function of graphic clipping is started, responding to the operation of selecting the background graphic, and generating a basis value according to the graphic identification of the selected background graphic, wherein the basis value corresponds to the graphic identification one by one.
Optionally, the implicit configuration parameter of the graphic clipping function is a hierarchy value, and determining the implicit configuration parameter according to the interface configuration parameter includes: determining a background graph of the target graph according to the basis value; from the target graphic and the background graphic, a hierarchy value identifying a display hierarchy of the target graphic and the background graphic is determined.
Optionally, determining, according to the target graphic and the background graphic, a level value for identifying a display level of the target graphic and the background graphic includes: traversing the graph series corresponding to the graph series array in the target graph, the background graph and the graph respectively, and configuring a hierarchy value for the traversed graph series, wherein the graph series array comprises a plurality of graph series; under the condition that the current graphic series has graphic identifiers, determining the graphic series as the graphic series of the background graphic, and jumping to the next graphic series for traversing; after traversing, determining the level value of the target graph; and determining the level value of the background graph according to the level value of the target graph, wherein the level value of the background graph is smaller than the level value of the target graph.
Optionally, the method further comprises: determining a second-class adjustment mode to be realized according to the interface configuration parameters; executing a second-class adjustment mode according to the interface configuration parameters; displaying a chart after the second-class adjustment mode is executed; wherein the second type of adjustment means comprises at least one of the following: graph replication, graph deformation, legend modification, annotation editing.
Optionally, the second-class adjustment mode executed according to the interface configuration parameter includes: determining attribute parameters of a target graph of the chart according to the interface configuration parameters; the attribute parameters are input into the graph series of the target graph through the reference function, and the graph series is updated to implement the two-class adjustment mode.
Optionally, displaying the chart after the second-class adjustment mode is performed includes: determining a chart after the second-class adjustment mode is executed according to the updated graph series; and displaying a chart after the second-class adjustment mode is executed.
The device in the application can be a server, a PC, a PAD, a mobile phone and the like.
The application also provides a computer program product adapted to perform, when executed on a data processing device, a program initialized with the method steps of: receiving interface configuration parameters corresponding to interface operations of the displayed chart; determining a type of adjustment mode to be realized by the chart and a type of implicit configuration parameter of the adjustment mode according to the interface configuration parameters, wherein the implicit configuration parameter is a bottom configuration parameter which is not operable by a user of the chart; and executing one type of adjustment mode according to the interface configuration parameters and the hidden configuration parameters, and displaying a chart after executing one type of adjustment mode.
Optionally, one type of adjustment method includes: graphic clipping, in the case that one type of adjustment mode is graphic clipping for a target graphic in a chart, interface configuration parameters include: the basis value is used for identifying a graph series corresponding to a background graph for performing graph cutting on the target graph; the receiving interface configuration parameters corresponding to the interface operation of the displayed chart comprises: after the function of graphic clipping is started, responding to the operation of selecting the background graphic, and generating a basis value according to the graphic identification of the selected background graphic, wherein the basis value corresponds to the graphic identification one by one.
Optionally, the implicit configuration parameter of the graphic clipping function is a hierarchy value, and determining the implicit configuration parameter according to the interface configuration parameter includes: determining a background graph of the target graph according to the basis value; from the target graphic and the background graphic, a hierarchy value identifying a display hierarchy of the target graphic and the background graphic is determined.
Optionally, determining, according to the target graphic and the background graphic, a level value for identifying a display level of the target graphic and the background graphic includes: traversing the graph series corresponding to the graph series array in the target graph, the background graph and the graph respectively, and configuring a hierarchy value for the traversed graph series, wherein the graph series array comprises a plurality of graph series; under the condition that the current graphic series has graphic identifiers, determining the graphic series as the graphic series of the background graphic, and jumping to the next graphic series for traversing; after traversing, determining the level value of the target graph; and determining the level value of the background graph according to the level value of the target graph, wherein the level value of the background graph is smaller than the level value of the target graph.
Optionally, the method further comprises: determining a second-class adjustment mode to be realized according to the interface configuration parameters; executing a second-class adjustment mode according to the interface configuration parameters; displaying a chart after the second-class adjustment mode is executed; wherein the second type of adjustment means comprises at least one of the following: graph replication, graph deformation, legend modification, annotation editing.
Optionally, the second-class adjustment mode executed according to the interface configuration parameter includes: determining attribute parameters of a target graph of the chart according to the interface configuration parameters; the attribute parameters are input into the graph series of the target graph through the reference function, and the graph series is updated to implement the two-class adjustment mode.
Optionally, displaying the chart after the second-class adjustment mode is performed includes: determining a chart after the second-class adjustment mode is executed according to the updated graph series; and displaying a chart after the second-class adjustment mode is executed.
The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In one typical configuration, the device includes one or more processors (CPUs), memory, and a bus. The device may also include input/output interfaces, network interfaces, and the like.
The memory may include volatile memory, random Access Memory (RAM), and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM), among other forms in computer readable media, the memory including at least one memory chip. Memory is an example of a computer-readable medium.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. The computer readable medium does not include a transitory computer readable medium (transmission medium), such as a modulated data signal and carrier wave, as defined in the present embodiment.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises an element.
It will be appreciated by those skilled in the art that embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and variations of the present application will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. which come within the spirit and principles of the application are to be included in the scope of the claims of the present application.