Method, apparatus, electronic device, and medium for generating a chart

Abstract

The present disclosure relates to a method, device, electronic equipment and medium for generating a chart, the method comprising: receiving a chart drawing request for drawing data set information; creating an initial chart file according to the chart drawing request; performing data sorting and calculation processing on the data set information to obtain sorted target data set and flow data for representing the functional relationship between adjacent data; assigning the graphic display variable and the flow variable in the initial chart file respectively according to the target data set and the flow data, and calculating the drawing position information of the presentation area corresponding to the target data set and the flow data to obtain a target chart file; and generating a visual chart for displaying each data information in the target data set and the relationship information between adjacent data according to the target chart file. The dual display perspectives of data display and correlation display between data can be realized in the same visual chart.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of front-end development, and particularly relates to a method and device for generating a chart, an electronic device and a medium. BACKGROUND

[0002] With the increasing value of data, "data visualization" aims to help users understand data and better help users analyze the value of data, and has become a popular direction of front-end development.

[0003] With a large amount of data collection, processing and processing, the dimensions of data are gradually enriched, and the scenarios of data viewing and display are increasingly increasing.

[0004] However, the current visualization chart can only reflect the value of a certain data, and the relative height between each data value is shown to the user through the form of visualization, which cannot meet the needs of some users to analyze data or present data characteristics through the visualization chart. SUMMARY

[0005] In order to solve the above technical problems or at least partially solve the above technical problems, the embodiments of the present disclosure provide a method and device for generating a chart, an electronic device and a medium.

[0006] In a first aspect, the embodiments of the present disclosure provide a method for generating a chart. The method for generating a chart comprises: receiving a chart drawing request for drawing data group information; creating an initialization chart file according to the chart drawing request; performing data sorting and calculation processing on the data group information to obtain a sorted target data group and flow data for representing the functional relationship between adjacent data; according to the target data group and the flow data, respectively assigning values to the graphic display variables and the flow variables in the initialization chart file, and calculating the drawing position information of the presentation area corresponding to the target data group and the flow data to obtain a target chart file; and generating a visualization chart for displaying each data information in the target data group and the relationship information between adjacent data according to the target chart file.

[0007] According to an embodiment of the present disclosure, the chart type information requested by the user is carried in the chart drawing request; the creating the initialization chart file comprises: creating a container for bearing the chart and a chart element, initializing the style information of the chart element; defining a chart instance variable for presenting data, and binding the chart instance variable to the chart element; wherein the chart instance variable comprises: the graphic display variable for presenting data information and the flow variable for presenting the relationship information between adjacent data; according to the chart type information, a graphic element corresponding to the chart type information is obtained from a graphic library, and the graphic element is bound to the graphic display variable.

[0008] According to an embodiment of the present disclosure, the graphic display variable and the flow variable in the initialization chart file are respectively assigned according to the target data set and the flow data, and the drawing position information of the presentation area corresponding to the target data set and the flow data is calculated, comprising: assigning the graphic display variable in the initialization chart file according to the target data set; calculating the first drawing position information of the graphic display area corresponding to each data in the target data set according to the relative size of the value of the assigned graphic display variable; wherein the graphic display area is the presentation area corresponding to the target data set; assigning the flow variable in the initialization chart file according to the flow data; calculating the second drawing position information of the flow area connected between two adjacent graphic display areas according to the first drawing position information; wherein the flow area is the presentation area corresponding to the flow data.

[0009] According to an embodiment of the present disclosure, the target chart file has the following display settings: the meaning and value of each data in the target data set corresponding to the graphic display variable are displayed at a set position in the graphic display area; and / or the meaning and value of the flow data corresponding to the flow variable are displayed at a set position in the flow area.

[0010] According to an embodiment of the present disclosure, the creating the initialization chart file comprises: obtaining a predefined action event; loading a floating layer library containing a floating layer element.

[0011] According to an embodiment of the present disclosure, the method further includes: obtaining a target floating layer element from the floating layer library; setting display attribute information of the target floating layer element according to the action event, obtaining a data presentation element, and binding the data presentation element with the chart element, the data presentation element being used to present the assigned graph display variable and / or the flow variable, and being displayed or hidden based on triggering of the action event; and binding the assigned graph display variable and / or the flow variable with respective corresponding data presentation elements, and taking the respective data presentation elements as prompt content.

[0012] According to an embodiment of the present disclosure, the method further includes: setting display attribute information of a presentation area corresponding to the target data group and / or the flow data according to the action event, the setting causing the presentation area corresponding to the target data group and / or the flow data to have a difference in presentation style between when the action event occurs and when the action event does not occur.

[0013] According to an embodiment of the present disclosure, the display attribute information includes display position information, display condition information, and hidden condition information.

[0014] According to an embodiment of the present disclosure, the chart drawing request carries custom information, the custom information being function relationship description information between specific data that a user needs to view. The method further includes: performing data sorting and calculation processing on the data group information to obtain a sorted target data group and flow data used to represent function relationships between adjacent data, including: performing near-neighbor sorting on the specific data in the data group according to the custom information to obtain the sorted target data group; and performing calculation processing on the specific data according to the custom information to obtain the flow data used to represent function relationships between adjacent data.

[0015] In a second aspect, embodiments of the present disclosure provide a device for generating a chart. The device includes a request receiving module, a file creating module, a data processing module, a file updating module, and a chart generating module. The request receiving module is configured to receive a chart drawing request for drawing a data set. The file creating module is configured to create an initial chart file according to the chart drawing request. The data processing module is configured to perform data sorting and calculation processing on the data set to obtain a sorted target data set and flow data representing a functional relationship between adjacent data. The file updating module is configured to assign values to graph display variables and flow variables in the initial chart file according to the target data set and the flow data, and calculate drawing position information of a presentation area corresponding to the target data set and the flow data to obtain a target chart file. The chart generating module is configured to generate a visual chart for displaying each data information in the target data set and relationship information between adjacent data according to the target chart file.

[0016] In a third aspect, embodiments of the present disclosure provide an electronic device. The electronic device includes a processor, a communication interface, a memory, and a communication bus. The processor, the communication interface, and the memory communicate with each other through the communication bus. The memory is configured to store a computer program. The processor is configured to execute the program stored in the memory to implement the method for constructing an image semantic segmentation model or the method for image processing.

[0017] In a fourth aspect, embodiments of the present disclosure provide a computer readable storage medium. The computer readable storage medium stores a computer program. The computer program is executed by a processor to implement the method for constructing an image semantic segmentation model or the method for image processing.

[0018] The above technical solutions provided by the embodiments of the present disclosure have at least some or all of the following advantages:

[0019] By sorting the data in the data set, two data that need to present a relationship with each other are arranged in adjacent positions to obtain a sorted target data set, and flow data representing a functional relationship between adjacent data is calculated. The initial chart file is assigned values and drawing position information is calculated based on the target data set and the flow data to obtain a target chart file. The visual chart generated according to the target chart file can display each data information in the target data set and relationship information between adjacent data. In the same visual chart, data display and correlation display between data are realized, which can meet the needs of users to analyze data or present changes and correlations between data through the visual chart. BRIEF DESCRIPTION OF DRAWINGS

[0020] The accompanying drawings, which are incorporated herein and constitute part of the specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the disclosure.

[0021] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure or the prior art, the accompanying drawings required to be used in the embodiments or the related description will be briefly introduced. Obviously, those skilled in the art can obtain other drawings according to these drawings without any creative effort.

[0022] Figure 1 The system architecture of the method and device for generating a chart suitable for the embodiments of the present disclosure is schematically shown;

[0023] Figure 2 The flowchart of the method for generating a chart according to an embodiment of the present disclosure is schematically shown;

[0024] Figure 3 The detailed implementation flowchart of operation S202 according to an embodiment of the present disclosure is schematically shown;

[0025] Figure 4 The detailed implementation flowchart of operation S203 according to an embodiment of the present disclosure is schematically shown;

[0026] Figure 5 The detailed implementation flowchart of operation S204 according to an embodiment of the present disclosure is schematically shown;

[0027] Figure 6 The display effect schematic diagram of the generated visual chart according to an embodiment of the present disclosure is schematically shown;

[0028] Figure 7 The detailed implementation flowchart of operation S202 according to another embodiment of the present disclosure is schematically shown;

[0029] Figure 8 The flowchart corresponding to the display or hiding effect triggered by the action event in the method for generating a chart according to another embodiment of the present disclosure is schematically shown;

[0030] Figure 9 The display effect schematic diagram of the triggered display visual chart according to an embodiment of the present disclosure is schematically shown;

[0031] Figure 10 The display effect schematic diagram of the triggered display visual chart according to another embodiment of the present disclosure is schematically shown;

[0032] Figure 11A structural block diagram of a device for generating a chart is schematically shown according to an embodiment of the present disclosure; and

[0033] Figure 12 A structural block diagram of an electronic device is schematically shown according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0034] Embodiments of the present disclosure provide a method, device, electronic device and medium for generating a chart, which realizes a dual display perspective of data display and correlation display between data in the same visualization chart, and can meet the needs of users for data analysis or presentation of changes and correlations between data through the visualization chart.

[0035] The method for generating a chart includes: receiving a chart drawing request for drawing data group information; creating an initialization chart file according to the chart drawing request; performing data sorting and calculation processing on the data group information to obtain sorted target data group and flow data for representing a functional relationship between adjacent data; respectively assigning values to a graphic display variable and a flow variable in the initialization chart file according to the target data group and the flow data, and calculating drawing position information of a presentation area corresponding to the target data group and the flow data to obtain a target chart file; and generating a visualization chart for displaying each data information in the target data group and relationship information between adjacent data according to the target chart file.

[0036] To make the objectives, technical solutions and advantages of the embodiments of the present disclosure clearer, the technical solutions in the embodiments of the present disclosure will be described clearly and completely below with reference to the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are some but not all of the embodiments of the present disclosure. Based on the embodiments in the present disclosure, all other embodiments obtained by a person of ordinary skill in the art without creative work fall within the protection scope of the present disclosure.

[0037] Figure 1 A system architecture suitable for the method and device for generating a chart according to the embodiments of the present disclosure is schematically shown.

[0038] Reference Figure 1 As shown in the figure, the system architecture 100 suitable for the method and device for generating a chart according to the embodiments of the present disclosure includes: terminal devices 101, 102 and 103, a network 104 and a server 105. The network 104 is used to provide a communication link medium between the terminal devices 101, 102 and 103 and the server 105. The network 104 can include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0039] The user can use the terminal device 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. The terminal device 101, 102, 103 can be installed with chart drawing software. Further, other communication client applications can be installed, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0040] The terminal device 101, 102, 103 can be an electronic device with a display screen and supporting web browsing. For example, the electronic device includes but is not limited to: a smart phone, a tablet computer, a notebook computer, a desktop computer, etc.

[0041] The server 105 can be a server providing various services, such as a background management server providing service support for the user to use the chart drawing software on the terminal device 101, 102, 103 to process data (only as an example). The background management server can analyze and process the received data processing request and other data, and feed back the processing result (such as a webpage, information, or data generated or obtained according to the user's request) to the terminal device.

[0042] It should be noted that the method for generating a chart provided by the embodiments of the present disclosure can generally be executed by a terminal device. The terminal device has a certain data processing capability, and the execution logic in the chart drawing software installed on the terminal device is the method for generating a chart described above.

[0043] Correspondingly, the apparatus for generating a chart provided by the embodiments of the present disclosure can generally be provided in the terminal device described above having a certain computing capability.

[0044] It should be understood that Figure 1 The number of terminal devices, networks and servers in

[0045] The first exemplary embodiment of the present disclosure provides a method for generating a chart.

[0046] Figure 2 A flow chart of the method for generating a chart according to an embodiment of the present disclosure is schematically shown.

[0047] Referring to Figure 2 The method for generating a chart provided by the embodiments of the present disclosure includes the following operations: S201, S202, S203, S204 and S205. The above operations S201-S205 can be executed by a terminal device, and the terminal device is installed with chart drawing software, and the execution logic of the chart drawing software is the execution process corresponding to the above operations S201-S205.

[0048] In operation S201, a chart drawing request of drawing data group information is received.

[0049] In an implementation scenario, the data group information can be located in an excel table, or in a database, or in the form of a data file, etc. A user (e.g., a drawing person or a person with data display requirements) calls the data group information from the database to the chart drawing software by inputting the address of the database, or uploads the data group information in the data file, excel table, etc. to the chart drawing software, and then clicks the function key of drawing a chart, which is regarded as that the user initiates the chart drawing request of drawing the data group information. Correspondingly, on the terminal device side, the data group information and the chart drawing request are received.

[0050] The data group information is structured data, for example, data in the form of key-value pairs, including data meaning and data value. For example, the data is: name-zhangsan; student ID-s2021xxxx; delivery volume-xx, etc.

[0051] In operation S202, an initial chart file is created according to the chart drawing request.

[0052] The initial chart file can be a js (javascript script language) file or an html (hypertext markup language) file, etc. which is suitable for front-end display. The initial chart file includes the initial definition value (e.g., a preset style value) or the default value (the value of the chart instance is null or other default value) of the container and the corresponding chart elements for drawing.

[0053] In operation S203, data sorting and calculation processing are performed on the data group information to obtain a sorted target data group and flow data representing the functional relationship between adjacent data.

[0054] By sorting the data in the data group information, two data that need to present the mutual relationship are arranged in the adjacent position to obtain the sorted target data group, and the flow data representing the functional relationship between adjacent data is calculated.

[0055] In operation S204, the graphic display variable and the flow variable in the initial chart file are respectively assigned according to the target data group and the flow data, and the drawing position information of the presentation area corresponding to the target data group and the flow data is calculated to obtain a target chart file.

[0056] The graph display variable in the initialized chart file is assigned to each data in the target data set, and the obtained target data set corresponds to a presentation area which can reflect the size of each data value in the target data set in at least one dimension. The flow variable is assigned to the flow data, and the presentation area corresponding to the flow data is located between the presentation areas of two data related to the flow data.

[0057] In operation S205, a visualization chart for displaying each data information in the target data set and the relationship information between adjacent data is generated according to the target chart file.

[0058] The visualization chart can display each data information in the target data set and the relationship information between adjacent data on the front-end interface.

[0059] Based on operations S201-S205, two data that need to be presented in relation to each other are arranged in a proximal position by sorting the data in the data set information, a sorted target data set is obtained, and flow data representing the functional relationship between adjacent data is calculated. The target chart file is obtained by assigning values to the initial chart file based on the target data set and the flow data and calculating the position information. The visualization chart generated according to the target chart file can display each data information in the target data set and the relationship information between adjacent data, and realizes dual display perspectives of data display and correlation display between data in the same visualization chart, which can meet the needs of users to analyze data or present changes and correlations between data through the visualization chart.

[0060] Figure 3 A detailed implementation flowchart of operation S202 according to an embodiment of the present disclosure is schematically shown.

[0061] According to an embodiment of the present disclosure, the chart drawing request carries chart type information requested by the user. For example, the chart type information is a column chart. The method provided in the embodiment of the present disclosure supports charts of types in which there are gaps between each region of the presented data, such as pie charts in which each sector is separated and has a gap, or other charts of qualified types.

[0062] Referring to Figure 3 In operation S202, creating an initialized chart file includes the following operations: S301, S302 and S303.

[0063] In operation S301, a container for carrying a chart and a chart element are created, and the style information of the chart element is initialized.

[0064] Exemplarily, the created chart file is, for example, an html file, which includes a container and a chart element. The container is a visual dom (Document Object Model, which is a standard programming interface recommended by W3C organization to process Extensible Markup Language) area for carrying the chart.

[0065] The above container is represented in the form of a code of a div tag in the html file, as an element for providing structure and background to the block-level content in the HTML document. In the div tag, a chart element svg is created, which is identified as chart, for drawing the whole chart, as a blank canvas.

[0066] The style information of the above chart element after initialization includes: size, such as width value (along the horizontal x direction of the display interface) and height value (along the vertical y direction of the display interface), both of which are set to 100%, page margin, background layout and color style, etc.

[0067] In operation S302, a chart instance variable for presenting data is defined, and the chart instance variable is bound to the chart element; wherein the chart instance variable includes: a graph display variable for presenting data information and a flow variable for presenting relationship information between adjacent data.

[0068] For example, the d3 library (which can be described as d3.js library or Data-Driven Documents, which is a JavaScript library for data visualization using dynamic graphics) is introduced to draw the chart.

[0069] A chart instance variable chart based on the d3 library is defined, which is bound to the chart element, and the variable chart based on d3.js is used as the chart instance itself.

[0070] Further, a subordinate variable g in the variable chart is defined, which is used as a graph display variable for presenting data information. A variable t associated with the graph display variable g is further defined, which is used as a flow variable for presenting relationship information between adjacent data.

[0071] In operation S303, according to the chart type information, a graph element corresponding to the chart type information is obtained from a graph library, and the graph element is bound to the graph display variable.

[0072] When the chart type information is a column chart, a rectangular element is obtained from the graphics library, and the above rectangular element is bound to the above graphical display variable g. For example, all elements with the type "bar" in the d3 library can be selected using the selectAll( 'bar') method to obtain the rectangular element corresponding to the chart type information of the column chart.

[0073] Figure 4 A detailed implementation flowchart of operation S203 according to an embodiment of the present disclosure is schematically shown.

[0074] According to an embodiment of the present disclosure, the above chart drawing request carries custom information, and the custom information is function relationship description information between specific data that the user needs to view.

[0075] For example, the above data group information A includes: {A1: this period should be shipped quantity-3000, A2: logistics display signed completion quantity-2000, A3: current inventory quantity-2000, A4: warehouse production quantity-3000, A5: distribution complete quantity-2700}.

[0076] For example, the custom information includes: the user needs to view the difference between the current period should be shipped quantity and the current inventory quantity (which means the number of goods that need to be supplemented in this shipment period), the total amount between the current inventory quantity and the warehouse production quantity (which means the total amount of the original warehouse inventory), and the difference between the distribution complete quantity and the logistics display signed completion quantity (which means the number of goods placed in express cabinets, post stations and other collection points and not picked up by consumers).

[0077] Referring to Figure 4 In the above operation S203, the data group information is sorted and calculated to obtain the sorted target data group and the flow data representing the function relationship between adjacent data, including the following operations: S401 and S402.

[0078] In operation S401, according to the custom information, the specific data in the data group is sorted by proximity to obtain the sorted target data group.

[0079] For the above data set information A, the relationship between the current period of delivery quantity and the current inventory quantity needs to be presented, the relationship between the current inventory quantity and the warehouse production quantity needs to be presented, and the relationship between the distribution delivery completion quantity and the logistics display signing completion quantity needs to be presented. Therefore, when the data set information is sorted, the two data that need to be presented in the relationship can be placed in the adjacent position, and the sorting of other data is not limited. Based on the above self-defined information, the sorted data set information can be obtained as: {A1: current period of delivery quantity-3000, A3: current inventory quantity-2000, A4: warehouse production quantity-3000, A5: distribution delivery completion quantity-2700, A2: logistics display signing completion quantity-2000}. Throughout the text, the unit of quantity is "pieces", and the unit of data value is omitted for simplicity of description.

[0080] In operation S402, according to the above self-defined information, the above specific data is calculated and processed to obtain flow data for representing the functional relationship between adjacent data.

[0081] For example, the process of calculating and processing the above data set information is, for example, that the data A1 corresponding to the current period of delivery quantity is subtracted from the data A3 corresponding to the current inventory quantity to obtain the flow data B1 between A1 and A3. The meaning of the flow data B1 is that the quantity of goods that needs to be supplemented in the current delivery cycle, and the corresponding value is: 3000 (current period of delivery quantity)-2000 (current inventory quantity)=1000.

[0082] Similarly, the data A3 corresponding to the current inventory quantity and the data A4 corresponding to the warehouse production quantity are summed to obtain the flow data B2 between A3 and A4. The meaning of the flow data B2 is the total quantity of original warehouse inventory, and the corresponding value is: 2000+3000=5000.

[0083] The data A5 corresponding to the distribution delivery completion quantity and the data A2 corresponding to the logistics display signing completion quantity are subtracted to obtain the flow data B3 between A5 and A2. The meaning of the flow data B3 is the quantity placed in the express cabinet, post station and other collection points and not taken by the consumer, and the corresponding value is: 2700-2000=700.

[0084] It should be noted that in the embodiment, addition or subtraction is used to illustrate the functional relationship between the above specific data. The above functional relationship can be various types of functional relationships related to two data.

[0085] Figure 5 A detailed implementation flowchart of operation S204 according to the embodiment of the present disclosure is schematically shown.

[0086] According to the embodiment of the present disclosure, reference is made toFigure 5 As shown, in the above operation S204, according to the above target data group and the above flow data, the graphic display variables and flow variables in the above initial chart file are assigned values ​​respectively, and the drawing position information of the presentation area corresponding to the above target data group and the above flow data is calculated, including the following operations: S501, S502, S503 and S504.

[0087] In operation S501, based on the target data group mentioned above, the graphical display variables in the initial chart file are assigned values.

[0088] By assigning values ​​to the graphical display variable g using the target data from the target data group, the size information of the graphical elements (e.g., rectangular elements) bound to the graphical display variable g in one or more dimensions represents the size of each of the target data. For example, in the case of a bar chart, the height of the bar reflects the size of the target data.

[0089] For example, taking a bar chart as an example, in the chart initialization file, based on the target data group mentioned above, a new variable `x` based on the d3 library is defined. The `range` method (or described as the `range()` function; the meaning will be similar in subsequent descriptions and will not be listed individually, as this is a common description in the computer field) is used to add the width and position of the region to it, and the `domain` method is used to add the name of each data item on the x-axis. Simultaneously, a new variable `y` based on the d3 library is defined, and the `range` method is used to add the width and position of the region to it, and the `domain` method is used to add the data scale distribution of the y-axis. For the above graphical display variable `g`, the `append` and `call` methods are used to bind variables `x` and `y` respectively and draw the x-axis and y-axis respectively. Style attributes are then added to the axes using the `attr` and `style` methods.

[0090] Furthermore, the target data set obtained from operation S203 can be assigned to the graphical display variable g by adding data() to the enestr() method, where the data in data() is the target data set, and the variable added in enestr() is the graphical display variable g.

[0091] In operation S502, based on the relative values ​​of the assigned graphic display variables, the first drawing position information of the graphic display area corresponding to each data in the target data group is calculated; wherein the graphic display area is the presentation area corresponding to the target data group.

[0092] The first drawing position information of the graphic display area includes: the size information of the graphic element, position information (such as center position information, spacing information with other graphic elements, etc.), width, height information, etc.

[0093] For example, for a rectangular element, the attr() method can be used to bind style attribute information to the graphic display variable to be presented. The style attribute information includes: width, height, fill color, and corresponding display position information, etc.

[0094] The style attribute information mentioned above can be default style information pre-written by software developers or user-defined style information. As an example, the style attribute information is as follows: the position of the rectangle element relative to the chart element is fixed; the width of the rectangle element is fixed; the height value changes dynamically with the assigned value; and the fill is a specific color or pattern (e.g., gray, stripes, dot fill, etc.). By calculating based on the relative values ​​of the assigned graphic display variables, the position information (e.g., center position information, spacing information with other graphic elements, etc.), width, and height information of each rectangle element can be obtained.

[0095] Building upon this, users can also set / add custom animation effects to bar elements in the initial chart file using methods such as transition() and duration(), making data display and switching more aesthetically pleasing and smoother.

[0096] In operation S503, based on the aforementioned flow data, the aforementioned flow variables in the aforementioned initialization chart file are assigned values.

[0097] For example, regarding the flow variable t associated with the aforementioned graphical display variable g, in the initialization chart file, the append() method is used to add an element "g" to t (for association), and then style attributes are bound to t. In this step S504, the data() method is used to bind the flow data obtained from the aforementioned operation S203 to the flow variable t.

[0098] In operation S504, based on the first drawing position information mentioned above, the second drawing position information of the flow area connected between two adjacent graphic display areas is calculated; wherein the flow area is the presentation area corresponding to the flow data.

[0099] The second drawing position information of this flow area is the coordinates of the vertices of the two graphic elements that are close to each other, with a total of 4 vertex position coordinates.

[0100] For example, taking a bar chart as an example, a new function `getPoint` is added to the chart initialization file to calculate the coordinates of the trapezoidal points. This `getPoint` function takes three parameters: left height (`leftHeight`), right height (`rightHeight`), and width (`width`). The calculation logic is as follows: Define an empty array `arr`, add the first item "0" + "," + leftHeight; add the second item "width" + "," + rightHeight; add the third item "width" + "," + height; add the fourth item "0" + "," + height; these are used to determine the coordinates of the four vertices of the transition area, and the array `arr` is returned when the function is called.

[0101] Additionally, the `append("polygon")` method is used to add a polygon element to the flow variable `t`, and then the `attr()` method is used to add attributes to this polygon element. Specifically, when adding the `point` attribute, the newly added `getPoint` function is called to dynamically calculate the coordinates of each point of the polygon element.

[0102] In addition, the attr() method can be used again to add corresponding coordinate displacements to the drawn polygon elements, so that the polygon elements can accurately correspond to the blank areas of the two cylinders.

[0103] Building upon this, for the sake of visual appeal, additional code settings can be added for the dashed lines at the top of the trapezoidal area.

[0104] The specific method is to continue using the attr() method to add the corresponding style attributes to the graphic display variable g. In the process, you can also use the append('line') method to add a line (displayed as a dashed line) to the graphic display variable g. After setting the dashed line style, the horizontal coordinate position of the dashed line is calculated by subtracting the width of the flow area from the width of the column; the vertical coordinate position of the dashed line is calculated by subtracting the height of the current column from the height of the next column.

[0105] Taking a bar chart as an example, based on the above operations S501~S504, the graphic display area presents the relative size of the data in the target data group corresponding to the graphic display variable in the form of individual bar bars. The flow area between the graphic display areas is a trapezoidal area, and in special cases, it is a rectangular area.

[0106] Figure 6 A schematic diagram illustrating the display effect of a visualization chart generated according to an embodiment of the present disclosure is shown.

[0107] The target chart file mentioned above may have the following display settings: the meaning and value of each data in the target data group corresponding to the graphical display variable are displayed at a set position in the graphical display area; and / or, the meaning and value of the flowing data corresponding to the flowing variable are displayed at a set position in the flowing area.

[0108] For example, in an application scenario, refer to Figure 6 As shown, the visualization chart generated by operation S205 is a bar chart. Each bar (corresponding to a rectangular element in the target chart file) displays its respective data. For example, the bar chart sequentially displays: bar C1 corresponding to data A1, which shows: Quantity due for shipment this period 3000 (The display format has been pre-set in the style information of the graphic display variables, or only the numerical value is displayed). Figure 6 (Taking only numerical values ​​as an example); the bar C2 corresponding to data A3 shows: spot inventory 2000; the bar C3 corresponding to data A4 shows: warehouse production outbound quantity 3000; the bar C4 corresponding to data A5 shows: delivery completed quantity 2700; the bar C5 corresponding to data A2 shows: logistics signed receipt completed quantity 2000.

[0109] Similarly, the flow area between the bars in the bar chart displays the specific meaning and values ​​of the flow data corresponding to the flow variables. The trapezoidal area between bars C1 and C2 displays flow data B1: the quantity of goods needing replenishment in this shipping cycle (1000). The trapezoidal area between bars C3 and C4 displays flow data B2: the total original inventory in the warehouse (5000). The trapezoidal area between bars C4 and C5 displays flow data B3: the quantity of packages placed in parcel lockers, stations, or other collection points that consumers have not yet picked up (700). For example, the exemplary display effect of the entire bar chart can be found by referring to [reference needed]. Figure 6 As shown above, the above turnover data has practical data analysis and reference value. For example, turnover data B1 (the quantity of goods that need to be replenished within this delivery cycle) is of great significance for merchants to design promotions, arrange activities, and understand inventory turnover cycles.

[0110] exist Figure 6 To simplify the description of the relationships between data, A1 to A5 are used as illustrations. It should be noted that the actual charts may omit these A1 to A5 labels and directly represent the data as "Quantity due for shipment this period - Current inventory = Quantity of goods to be replenished within this shipment cycle (1000)". The above methods are merely examples; the actual data display format depends on the predefined style information and can be updated and adjusted accordingly.

[0111] The visualization charts simultaneously display the flow data corresponding to the flow areas between each data point and adjacent data points. This not only intuitively shows two data points with a relationship, but also clearly shows the meaning and values ​​of the flow data, providing a clear visualization effect and offering users a good visualization presentation effect for data display and data analysis.

[0112] Figure 7 A detailed implementation flowchart of operation S202 according to another embodiment of the present disclosure is shown schematically. Figure 8 A flowchart illustrating the action event-triggered display or hide effect in a method for generating a chart according to another embodiment of this disclosure is shown schematically.

[0113] In another application scenario, to achieve a clean display interface, the data presentation interface is only triggered to show or hide when a predefined action event occurs. For example, when the user moves the mouse to the flow area (or the graphic display area) and hovers for more than 3 seconds, the aforementioned flow data (or the data in the target data group) will be displayed in a floating window (an example of a data presentation interface). When the user moves the mouse out of the flow area (or the graphic display area), the floating window displaying the flow data will be hidden.

[0114] In the solution corresponding to this application scenario, refer to Figure 7 As shown, the operation S202 for creating the initial chart file includes the following operations: S701 and S702.

[0115] In one embodiment, the above operation S202 may simultaneously include the above operations S301~S303, S701 and S702.

[0116] When operating S701, obtain predefined action events.

[0117] The aforementioned action events can be defined by the user (e.g., a user of charting software), or by the developer of the charting software, or defined according to user needs. The default display or hide effect triggered by this action event is used in charting software.

[0118] The aforementioned action events include, for example, a click event where the operation point is in the current area, an event where the operation point is hovered in the current area for a preset time (e.g., more than 3 seconds), and an event where the operation point leaves the current area. The operation point can be a mouse, or for touch-based interactive interfaces, it can also be the user's finger, stylus, etc.

[0119] In operation S702, load the floating layer library containing floating layer elements.

[0120] Corresponding to application scenarios where the effect of showing or hiding is triggered by an action event, the above method, in addition to operations S201~S205, also includes operations S801~S803, as described above. Figure 8 As shown, for the sake of simplicity, only operations S801~S803 are illustrated.

[0121] In this embodiment, operations S801 to S803 can be part of operation S204. For example, after assigning values ​​to the graphic display variables and flow variables in the initial chart file according to the target data group and the flow data, and calculating the drawing position information of the presentation area corresponding to the target data group and the flow data, operations S801, S802 and S803 are also included to obtain the target chart file.

[0122] In operation S801, the target floating layer element is obtained from the aforementioned floating layer library.

[0123] The target overlay element can be an overlay element that is adapted to the current display interface. For example, the target overlay element is an overlay element that is compatible with the browser version corresponding to the current display interface.

[0124] In operation S802, based on the aforementioned action event, the display attribute information of the aforementioned target floating layer element is set to obtain a data presentation element, and the aforementioned data presentation element is bound to the aforementioned chart element; the aforementioned data presentation element is used to present the assigned value of the aforementioned graphic display variable and / or the aforementioned flow variable, and is displayed or hidden based on the triggering of the aforementioned action event.

[0125] The presentation effects of the above data elements may include, but are not limited to, floating windows, floating boxes, pop-ups, etc.

[0126] The aforementioned display attribute information includes: display position information, display condition information, and hiding condition information. The data content presented by the assigned graphical display variables and / or the aforementioned flow variables may include only the values ​​in the key-value pairs, or both the keys and values.

[0127] For example, display condition information is used to specify that when a specific action event occurs, such as a click event where the operation point is in a certain area (graphic display area or flow area), or a hovering event for a preset duration, the data presentation elements bound to that area will be displayed, and the display position will be limited by the display position information. Hide condition information is used to specify that when another specific action event occurs, such as an event where the operation point leaves the current area, the data presentation elements bound to that area will be hidden.

[0128] In operation S803, the above-mentioned graphic display variables and / or the above-mentioned flow variables, after being assigned values, are bound to their respective data presentation elements and used as prompt content for their respective data presentation elements.

[0129] Based on the settings of operations S801~S803 above, the displayed data is shown or hidden according to the action event, which has a good interactive experience, improves the overall cleanliness of the visualization chart, and has good user interactivity and experience.

[0130] Figure 9 A schematic diagram illustrating the display effect of a triggered visual chart according to an embodiment of the present disclosure is shown. (Refer to...) Figure 9 As shown, the visualization chart generated by operation S205 does not display the values ​​or meanings of the key-value pairs in the presentation area. When the mouse hovers over the flow area for more than 3 seconds, the flow data B1 is displayed in the form of a floating window in the flow area.

[0131] Figure 10 A schematic diagram illustrating the display effect of a visual chart triggered according to another embodiment of the present disclosure is shown.

[0132] Based on the above embodiments that include the display or hiding effect triggered by action events, the method may further include the following operations: setting the display attribute information of the presentation area corresponding to the target data group and / or the flowing data according to the action event, such that the presentation style of the presentation area corresponding to the target data group and / or the flowing data differs when the action event occurs from the presentation style when the action event does not occur, for example, referring to... Figure 10 As shown, when the mouse hovers over the graph display area containing data A4, not only will a floating window containing data A4 appear, but the fill style of the graph display area (bar) containing A4 will also change compared to the state when this action event has not occurred. This achieves the effect of highlighting the area, providing a better user experience when displaying data analysis data.

[0133] A second exemplary embodiment of this disclosure provides an apparatus for generating charts.

[0134] Figure 11 A structural block diagram of an apparatus for generating charts according to an embodiment of the present disclosure is shown schematically.

[0135] Reference Figure 11 As shown, the chart generation apparatus 1100 provided in this embodiment includes: a request receiving module 1101, a file creation module 1102, a data processing module 1103, a file updating module 1104, and a chart generation module 1105.

[0136] The aforementioned request receiving module 1101 is used to receive a chart drawing request for plotting data group information.

[0137] The file creation module 1102 is used to create an initial chart file based on the chart drawing request.

[0138] The aforementioned data processing module 1103 is used to sort and calculate the aforementioned data group information to obtain the sorted target data group and the flow data used to characterize the functional relationship between adjacent data.

[0139] The file update module 1104 is used to assign values ​​to the graphic display variables and flow variables in the initial chart file according to the target data group and the flow data, and calculate the drawing position information of the presentation area corresponding to the target data group and the flow data to obtain the target chart file.

[0140] The chart generation module 1105 is used to generate a visual chart based on the target chart file to display the relationship information between each data information in the target data group and adjacent data.

[0141] According to embodiments of this disclosure, the file creation module 1102 described above is further configured to: obtain predefined action events; and load a floating layer library containing floating layer elements.

[0142] The file update module 1104 is further configured to: obtain a target floating layer element from the floating layer library; set the display attribute information of the target floating layer element according to the action event to obtain a data presentation element, and bind the data presentation element to the chart element; and bind the assigned graphic display variable and / or the flow variable to their respective corresponding data presentation elements, and use them as the prompt content of their respective data presentation elements. The data presentation element is used to present the assigned graphic display variable and / or the flow variable, and is displayed or hidden based on the triggering of the action event.

[0143] Any multiple of the aforementioned request receiving module 1101, file creation module 1102, data processing module 1103, file updating module 1104, and chart generation module 1105 can be implemented in a single module, or any one of these modules can be split into multiple modules. Alternatively, at least some of the functionality of one or more of these modules can be combined with at least some of the functionality of other modules and implemented in a single module. At least one of the request receiving module 1101, file creation module 1102, data processing module 1103, file updating module 1104, and chart generation module 1105 can be at least partially implemented as hardware circuitry, such as a field-programmable gate array (FPGA), a programmable logic array (PLA), a system-on-a-chip, a system-on-a-substrate, a system-on-package, an application-specific integrated circuit (ASIC), or any other reasonable means of integrating or packaging circuitry, or implemented in software, hardware, or firmware, or in any suitable combination of any of these three implementation methods. Alternatively, at least one of the request receiving module 1101, file creation module 1102, data processing module 1103, file updating module 1104, and chart generation module 1105 may be implemented at least partially as a computer program module, which can perform corresponding functions when the computer program module is run.

[0144] A third exemplary embodiment of this disclosure provides an electronic device.

[0145] Figure 12 A schematic block diagram of an electronic device provided in an embodiment of the present disclosure is shown.

[0146] Reference Figure 12 As shown, the electronic device 1200 provided in this embodiment includes a processor 1201, a communication interface 1202, a memory 1203, and a communication bus 1204. The processor 1201, the communication interface 1202, and the memory 1203 communicate with each other through the communication bus 1204. The memory 1203 is used to store computer programs. When the processor 1201 executes the program stored in the memory, it implements the method for generating charts as described above.

[0147] A fourth exemplary embodiment of this disclosure also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program that, when executed by a processor, implements the method for generating charts as described above.

[0148] The computer-readable storage medium may be included in the device / apparatus described in the above embodiments; or it may exist independently and not assembled into the device / apparatus. The computer-readable storage medium carries one or more programs that, when executed, implement the method according to the embodiments of this disclosure.

[0149] According to embodiments of this disclosure, the computer-readable storage medium can be a non-volatile computer-readable storage medium, such as including, but not limited to: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this disclosure, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0150] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0151] The above description is merely a specific embodiment of this disclosure, enabling those skilled in the art to understand or implement it. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this disclosure. Therefore, this disclosure is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for generating charts, characterized in that, include: Receive a chart drawing request that plots data group information; Based on the chart drawing request, create an initial chart file; The data group information is sorted and processed to obtain the sorted target data group and the flow data used to characterize the functional relationship between adjacent data. Based on the target data group and the flowing data, the graphic display variables and flowing variables in the initial chart file are assigned values ​​respectively, and the drawing position information of the presentation area corresponding to the target data group and the flowing data is calculated to obtain the target chart file; wherein, the graphic display variables are assigned values ​​of each data in the target data group, and the presentation area corresponding to the target data group can reflect the size of each data value in the target data group in at least one dimension; the flowing variables are assigned values ​​of the flowing data, and the presentation area corresponding to the flowing data is located between the presentation areas of two data related to the flowing data; as well as Based on the target chart file, a visual chart is generated to display each data information in the target data group and the relationship information between adjacent data.

2. The method according to claim 1, characterized in that, The chart drawing request carries the chart type information requested by the user; The creation of the initialization chart file includes: Create a container and chart elements to hold the chart, and initialize the style information of the chart elements; Define chart instance variables for presenting data, and bind the chart instance variables to the chart elements; wherein, the chart instance variables include: the graphical display variables for presenting data information and the flow variables for presenting the relationship information between adjacent data; Based on the chart type information, retrieve the corresponding graphic element from the graphics library and bind the graphic element to the graphic display variable.

3. The method according to claim 1, characterized in that, The step of assigning values ​​to the graphic display variables and flow variables in the initial chart file according to the target data group and the flow data, and calculating the drawing position information of the presentation area corresponding to the target data group and the flow data, includes: Based on the target data set, assign values ​​to the graphic display variables in the initial chart file; Based on the relative values ​​of the assigned graphic display variables, the first drawing position information of the graphic display area corresponding to each data in the target data group is calculated; wherein the graphic display area is the presentation area corresponding to the target data group. Based on the flow data, assign values ​​to the flow variables in the initialization chart file; Based on the first drawing position information, the second drawing position information of the flow area connecting two adjacent graphic display areas is calculated; wherein the flow area is the presentation area corresponding to the flow data.

4. The method according to claim 1, characterized in that, The target chart file has the following display settings: The graphic display shows the meaning and value of each data in the target data group corresponding to the variable, or the value is displayed at a set position in the graphic display area; wherein the graphic display area is the presentation area corresponding to the target data group; And / or, The meaning and value of the flowing data corresponding to the flowing variables are displayed at a set position in the flowing area; wherein the flowing area is the presentation area corresponding to the flowing data.

5. The method according to claim 1 or 3, characterized in that, The creation of the initial chart file includes: obtaining predefined action events; and loading a floating layer library containing floating layer elements.

6. The method according to claim 2, characterized in that, The creation of the initial chart file includes: obtaining predefined action events; and loading a floating layer library containing floating layer elements.

7. The method according to claim 6, characterized in that, Also includes: Obtain the target floating layer element from the floating layer library; Based on the action event, the display attribute information of the target floating layer element is set to obtain a data presentation element, and the data presentation element is bound to the chart element. The data presentation element is used to present the assigned graphic display variable and / or the flow variable, and is displayed or hidden based on the triggering of the action event. as well as The assigned graphical display variables and / or the flow variables are bound to their respective data presentation elements and used as prompts for those elements.

8. The method according to claim 7, characterized in that, Also includes: Based on the action event, the display attribute information of the presentation area corresponding to the target data group and / or the flowing data is set, such that the presentation style of the presentation area corresponding to the target data group and / or the flowing data is different when the action event occurs compared with the presentation style when the action event does not occur.

9. The method according to claim 8, characterized in that, The display attribute information includes: display position information, display condition information, and hiding condition information.

10. The method according to claim 1, characterized in that, The chart drawing request carries custom information, which is a description of the functional relationship between specific data that the user needs to view. The step of sorting and calculating the data group information to obtain the sorted target data group and the flow data used to characterize the functional relationship between adjacent data includes: Based on the custom information, the specific data in the data group is sorted by nearest neighbor to obtain the sorted target data group; Based on the customized information, the specific data is processed to obtain flow data that characterizes the functional relationship between adjacent data.

11. An apparatus for generating charts, characterized in that, include: The request receiving module is used to receive chart drawing requests for plotting data group information; The file creation module is used to create an initial chart file based on the chart drawing request; The data processing module is used to sort and calculate the data group information to obtain the sorted target data group and the flow data used to characterize the functional relationship between adjacent data. The file update module is used to assign values ​​to the graphic display variables and flow variables in the initial chart file according to the target data group and the flow data, and to calculate the drawing position information of the presentation area corresponding to the target data group and the flow data to obtain the target chart file; wherein, the graphic display variables are assigned values ​​to each data in the target data group, and the presentation area corresponding to the target data group can reflect the size of each data value in the target data group in at least one dimension; the flow variables are assigned values ​​to the flow data, and the presentation area corresponding to the flow data is located between the presentation areas of two data related to the flow data; as well as The chart generation module is used to generate a visual chart based on the target chart file to display the relationship information between each data information in the target data group and adjacent data.

12. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, when executing a program stored in memory, implements the method of any one of claims 1-10.

13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1-10.

Images