A chart layout method, apparatus, electronic device, and storage medium

Abstract

The present disclosure provides a chart layout method and device, electronic equipment and storage medium, relates to the technical field of data processing, and particularly relates to the technical field of data visualization. The specific implementation scheme is as follows: determining elements in a target chart, and obtaining description information of each element in the target chart; determining a first element with the highest layout priority among the elements; laying out the first element on a grid corresponding to the target chart according to the description information of the first element; and laying out a second element, which is an element other than the first element among the elements, outside an area occupied by the elements already laid out on the grid in a descending order of layout priority of the second element. The scheme provided in the embodiment of the present disclosure can reduce the problem that elements are blocked due to element overlap.

Description

Technical Field

[0001] This disclosure relates to the field of data processing technology, and more particularly to the field of data visualization technology. Background Technology

[0002] When visualizing data, electronic devices can use various charting tools to lay out the elements contained in the chart to be visualized, and then render the chart based on the layout result to achieve chart visualization.

[0003] In existing technologies, the position information of elements within a chart can be set, allowing charting tools to layout the elements based on their positions. However, the size of a chart may change during display on an electronic device. In such cases, the charting tool still lays out the elements based on their positions before the chart size change. Summary of the Invention

[0004] This disclosure provides a chart layout method, apparatus, electronic device, and storage medium.

[0005] According to one aspect of this disclosure, a chart layout method is provided, comprising:

[0006] Identify the elements in the target chart and obtain the descriptive information of each element in the target chart;

[0007] Determine the first element with the highest layout priority among all elements;

[0008] The first element is laid out on the grid corresponding to the target chart according to the description information of the first element;

[0009] The second elements are laid out sequentially outside the areas occupied by the already laid-out elements on the grid, according to the layout priority of the second elements from high to low. The second elements are the elements other than the first element.

[0010] According to another aspect of this disclosure, a chart layout apparatus is provided, comprising:

[0011] The description information acquisition module is used to determine the elements in the target chart and obtain the description information of each element in the target chart;

[0012] The first element determination module is used to determine the first element with the highest layout priority among all elements.

[0013] The element layout module is used to lay out the first element on the grid corresponding to the target chart according to the description information of the first element; and to lay out the second element outside the area occupied by the already laid out elements on the grid in order of the layout priority of the second element from high to low, wherein the second element is: the element other than the first element among all elements.

[0014] According to another aspect of this disclosure, an electronic device is provided, comprising:

[0015] At least one processor; and

[0016] A memory communicatively connected to the at least one processor; wherein,

[0017] The memory stores instructions that can be executed by the at least one processor, which enables the at least one processor to perform the above-described chart layout method.

[0018] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause the computer to perform the above-described chart layout method.

[0019] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the above-described chart layout method.

[0020] As can be seen from the above, in the solution provided by this disclosure, each element in the chart is laid out sequentially according to its layout priority. After the first element, which has the highest layout priority, is placed in the chart, since it is the first element to be laid out, there are no already laid-out elements, and therefore the first element will not overlap with any already laid-out elements. When laying out the second element other than the first element, the already laid-out elements in the chart can be used as a reference, and the second element is placed sequentially outside the area occupied by the already laid-out elements in the chart. Each time the second element is laid out, the already laid-out elements in the chart are taken into account, so the second element will not overlap with any already laid-out elements. After each second element is laid out, the completed second element is also considered as a laid-out element, so each time the second element is laid out, the currently laid-out second element will not overlap with the previously laid-out second element. It is evident that applying this disclosure embodiment can reduce the problem of element occlusion caused by element overlap.

[0021] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0022] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0023] Figure 1 This is a schematic diagram of the area occupied by an element according to an embodiment of this disclosure;

[0024] Figure 2 This is a flowchart illustrating a chart layout method provided in an embodiment of this disclosure;

[0025] Figure 3 This is a flowchart illustrating a second element layout method provided in an embodiment of this disclosure;

[0026] Figure 4 This is a schematic diagram of the area occupied by another element provided in an embodiment of this disclosure;

[0027] Figure 5 This is a schematic diagram of label wrapping in a chart according to an embodiment of this disclosure;

[0028] Figure 6 This is a schematic diagram of an embodiment provided in this disclosure;

[0029] Figure 7 This is a schematic diagram of a first element determined according to the region division ratio provided in an embodiment of this disclosure;

[0030] Figure 8 This is a schematic diagram of the structure of a chart layout device provided in an embodiment of this disclosure;

[0031] Figure 9 This is a block diagram of an electronic device used to implement the chart layout method of the embodiments of this disclosure. Detailed Implementation

[0032] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0033] The concepts involved in the embodiments of this disclosure are explained below.

[0034] I. Elements

[0035] The elements in this embodiment may include display units such as coordinate axes, graphs, themes, legends, toolboxes, and thumbnails in a chart.

[0036] II. Grid

[0037] A grid can be a rectangular area that serves as the display area for chart data. Axes, themes, legends, toolboxes, and thumbnails in a chart can be laid out based on the grid. Because the grid is almost always related to each element, when laying out a chart, the grid must be laid out first, and then individual elements can be positioned based on the already laid-out grid. Elements can be positioned relative to the grid; for example, the legend can be located at the top of the grid.

[0038] For an already generated chart, the size and position of the grid can be determined based on the information from the generated chart. When generating a chart for the first time, the size and position of the grid can be determined based on the description information of the first element. For example, the size of the grid can be determined to be equal to the size information in the description information of the first element.

[0039] Additionally, if the grid size is insufficient to accommodate the element to be laid out during the layout of the first or second element, the grid can be expanded.

[0040] III. Description Information

[0041] Description information can describe an element's content, position, size, style, and other element attributes. Specifically, description information can describe the element's approximate position or indicate that the element should be laid out in a default position. This doesn't have to be an exact coordinate; for example, the description information could describe the element's approximate position as the top, left, right, or bottom of a chart, or the top, left, right, or bottom of a grid. Additionally, description information can include information such as the element's height and width. Furthermore, description information can describe the element's position and size using specific numerical values ​​relative to the chart's boundaries, or it can describe the element's position and size as a percentage of the chart's boundaries. For example, if the element is 50% away from the top boundary of the chart, then the distance between the element and the top boundary is considered to be 50% of the chart's height, and the distance between the element and other boundaries is considered to be 0.

[0042] IV. Area occupied by already laid-out elements

[0043] See Figure 1 , Figure 1 A diagram illustrating the area occupied by an element is provided. For example, the dashed box labeled 1 represents the area occupied by the subject, the dashed box labeled 2 represents the area occupied by the legend, the dashed box labeled 3 represents the area occupied by the toolbox, the dashed box labeled 4 represents the area occupied by the graphic, and the dashed box labeled 5 represents the area occupied by the coordinate axis.

[0044] The following describes the entity responsible for implementing the solution provided in the embodiments of this disclosure.

[0045] The solutions provided in this disclosure can be applied to electronic devices that need to display charts, such as desktop computers, laptops, and tablets. Specifically, the solutions provided in this disclosure can be applied to charting tools, browsers, and other clients installed on the aforementioned electronic devices. For ease of description, the aforementioned electronic devices are referred to as layout devices.

[0046] The chart layout method provided in this disclosure will be described in detail below through specific embodiments.

[0047] In one embodiment of this disclosure, see [link to embodiment]. Figure 2 , Figure 2 A flowchart of a chart layout method is provided, which includes the following steps S201-S204.

[0048] Step S201: Determine the elements in the target chart and obtain the description information of each element in the target chart.

[0049] In one implementation, the layout device can determine each element in the target chart based on the information of the target chart, and read the description information of each element. Specifically, the layout device can obtain the information document of the target chart, determine the elements contained in the target chart from the code information of the target chart, and read the description information of each element from the code information of the target chart.

[0050] The target charts under different conditions are explained below.

[0051] The target chart is at least one of the following: a chart whose size has changed, a chart whose elements have changed size, a chart whose element descriptions have changed, and a newly generated chart.

[0052] In some cases, the chart size needs to be adjusted according to the size of the display window to provide a better viewing experience. Therefore, when the display window changes, the chart size also changes accordingly. Changes in chart size can easily lead to problems such as ill-fitting elements or overlapping elements within the chart, so layout adjustments are necessary. Specifically, layout tools can detect chart size changes using ResizeObserver (a browser application programming interface). Therefore, charts whose size has changed can be used as target charts.

[0053] In another scenario, because the data in a chart can be dynamic, changes in the data may cause the dimensions of the elements in the chart to change. Changes in chart size can lead to an element overlapping with other elements. Therefore, charts where the dimensions of elements change can be used as target charts.

[0054] In another scenario, if the user modifies the description information of the chart elements, or if the chart is dynamic, the description information of the chart elements may change, and consequently, information such as the size of the chart may also change. Therefore, a change in the description information of the chart can be used as the target chart.

[0055] In another scenario, the solution provided by the embodiments of this disclosure can also be used during the initial generation of the chart. Therefore, the initially generated chart can serve as the target chart.

[0056] As can be seen from the above, setting a target chart can adapt to various application scenarios when the size of the chart or the size of the chart elements changes. Therefore, determining the target chart in the above way can accurately identify the problematic chart and rearrange it, further reducing the problem of elements being obscured due to overlapping.

[0057] Step S202: Determine the first element with the highest layout priority among all elements.

[0058] The layout priority can be preset and is used to characterize the layout priority of each element. Furthermore, the layout priority can be set based on the information that each element needs to reference during layout. For example, if an element does not need to consider information from other elements during layout, then that element can be set as the element with the highest layout priority. If element 1 must reference information such as the size and position of element 2 during layout, then element 1's layout priority must be lower than element 2's. In other words, elements with higher layout priority will not reference the descriptive information of elements with lower layout priority during the layout process.

[0059] For example, when the elements include axes, legends, and toolboxes, the layout priority of axes, legends, and toolboxes can be as follows: axes, legends, and toolboxes. When laying out axes, there is no need to refer to the descriptions of legends and toolboxes; when laying out legends, there is no need to refer to the descriptions of toolboxes.

[0060] The following explains the relevant content regarding layout priority.

[0061] In one scenario, a preset layout priority value can be assigned to each element, with the value indicating the layout priority. When determining the layout priority of each element in a target chart, the layout tool can sort the elements according to their preset priority values ​​to obtain their respective layout priorities. For example, the preset priority values ​​for axes, graphs, themes, legends, toolboxes, and thumbnails are 1, 2, 3, 4, 5, and 6, respectively. If the target chart includes axes, graphs, and legends, then the preset priority values ​​for axes, graphs, and legends can be set to 1, 2, and 4, respectively. Arranging these in ascending order, the layout priorities are: axes, graphs, and legends.

[0062] In another scenario, multiple elements in the target chart may have the same layout priority. For example, element 1 in the target chart may not reference the description information of element 2 during layout, and element 2 may not reference the description information of element 1 during layout, so element 1 and element 2 can have the same layout priority. In this case, the layout device can determine the layout priority of elements with the same priority based on the element description information. For example, the larger element can be determined as the element to be laid out first, or the element located at the bottom can be laid out first.

[0063] Furthermore, in this embodiment of the disclosure, a smaller layout priority value can be used to represent a higher layout priority; that is, the smaller the value, the higher the layout priority. Alternatively, a larger layout priority value can be used to represent a higher layout priority; that is, the larger the value, the higher the layout priority.

[0064] The method for determining the first element in step S202 will be explained below.

[0065] In one implementation, if the layout priority is represented by the value of the layout priority, then the element with the highest layout priority can be determined as the first element based on the value of the priority.

[0066] Step S203: Lay out the first element on the grid corresponding to the target chart according to the description information of the first element.

[0067] In one implementation, since the first element has the highest layout priority, it is the first element to be laid out. Therefore, based on the description information of the first element, it can be placed at the position indicated by the description information on the grid, and its size can be adjusted accordingly.

[0068] Other implementations of step S203, which involves laying out the first element, will be described in the following examples and will not be detailed here.

[0069] Step S204: Layout the second element outside the area occupied by the already laid-out elements on the grid, according to the layout priority of the second element from high to low.

[0070] The second element is: the element other than the first element.

[0071] When there are multiple second elements, the second elements need to be laid out sequentially during the process of laying them out.

[0072] The following explains how to implement step S204, which involves sequentially laying out the second element.

[0073] In one implementation, the target second element can be set as the second element with the highest layout priority among the unlaid-out second elements. Based on the description information of the target second element and the already laid-out elements, the target second element is laid out outside the area occupied by the already laid-out elements.

[0074] Among them, the laid-out elements can be elements whose position and size in the target chart have been determined, and the laid-out elements can include the first element that has been laid out and the second element that has been laid out. The unlaid-out second element can be a second element whose position and size in the target chart have not yet been determined.

[0075] Specifically, the layout device can set layout status bits for each second element. When laying out each second element sequentially, the layout status bit of each second element can be recorded as an unlaid state. When a second element is laid out, its layout status bit can be recorded as laid out. Then, the layout status bits of each second element can be traversed sequentially according to layout priority. If the layout status bit of an element encountered according to layout priority is unlaid, then that second element is set as the target second element.

[0076] If there are unlaid elements in the second element, continue to set the next element with the highest layout priority as the target second element in the same way. If there are no unlaid elements in the second element, the element layout is complete. If there is a laid-out second element in the current target chart, it should also be considered as a laid-out element, taking into account its position and size.

[0077] Alternatively, the following method can be used to determine whether there are any unlaid elements in the second element: Based on the above implementation, if the layout state bit of each second element is in the laid-out state, the layout device determines that there are no unlaid elements in the second element; otherwise, it determines that there are unlaid elements in the second element.

[0078] The implementation method for laying out the second element in step S204 will be described in the following embodiments, and will not be detailed here.

[0079] As can be seen from the above, in the solution provided by this disclosure, each element in the chart is laid out sequentially according to its layout priority. After the first element, which has the highest layout priority, is placed in the chart, since it is the first element to be laid out, there are no already laid-out elements, and therefore the first element will not overlap with any already laid-out elements. When laying out the second element other than the first element, the already laid-out elements in the chart can be used as a reference, and the second element is placed sequentially outside the area occupied by the already laid-out elements in the chart. Each time the second element is laid out, the already laid-out elements in the chart are taken into account, so the second element will not overlap with any already laid-out elements. After each second element is laid out, the completed second element is also considered as a laid-out element, so each time the second element is laid out, the currently laid-out second element will not overlap with the previously laid-out second element. It is evident that applying this disclosure embodiment can reduce the problem of element occlusion caused by element overlap.

[0080] Furthermore, the solution provided in this disclosure can be applied to charting tools such as ECharts, providing adaptive chart layout capabilities. When the size of the chart or the size of its elements changes, it can reduce element overflow and overlap issues. Moreover, this solution primarily operates on elements such as grids, axes, and legends, without using media configuration (a method of dynamically setting chart properties). Therefore, media configuration can be used to configure charts laid out using this solution.

[0081] The solution provided in this disclosure also includes a switch for adaptive layout. Users can use the adaptive layout switch to decide whether to use the chart layout method provided in this disclosure.

[0082] The following explains how step S204, which involves laying out the second element, is implemented.

[0083] In one implementation, the second elements are laid out sequentially according to their layout priority from high to low, following steps S301-S304.

[0084] See Figure 3 , Figure 3 A flowchart of a second element layout method is provided, the method including the following steps S301-S304.

[0085] Step S301: Based on the description information of the second element, determine the first area to be laid out for the second element outside the area occupied by the already laid-out elements.

[0086] Specifically, the description of the second element can indicate its position; for example, it may be located at the top of the grid, above the chart, or below the coordinate axis. The approximate location of the first area needs to be considered, and when determining the first area for the second element to be placed, outside the area occupied by already placed elements, the position and size of the already placed elements can be referenced. If a second element already exists in the current target chart, it should also be considered as a placed element, and its position and size taken into account.

[0087] For example, see Figure 4 , Figure 4 A diagram showing the area occupied by another element is provided. Figure 4 The data shown is for illustrative purposes only and is unrelated to the content of this embodiment. The target chart in the figure includes: coordinate axes, line graphs, pie charts, themes, and legends. Dashed box 1 represents the area occupied by the theme, dashed box 2 represents the area occupied by the pie chart, dashed box 3 represents the area occupied by the line graph, dashed box 4 represents the area occupied by the coordinate axes, and dashed box 5 represents the area occupied by the legend. Assuming the coordinate axes have the highest layout priority, they are the first element. Other elements, in descending order of layout priority, are: line graphs, pie charts, themes, and legends, which are the second elements. After the coordinate axes are laid out, the area within dashed box 4 represents the area occupied by the laid-out elements. All other areas outside dashed box 4 are areas occupied by the laid-out elements. According to layout priority, the next element to be laid out is the line graph, so the area represented by dashed box 3 is determined to be the first area. Once the curves are laid out, both the coordinate axes and the curves in the graph are already laid out. When laying out the pie chart according to layout priority, the area occupied by the coordinate axes and curves needs to be considered. That is, the first area should be determined outside the areas shown in dashed boxes 3 and 4. If the topic description information representing the topic is located at the center of the top of the grid, then the area shown in dashed box 1 in the graph can be determined as the first area when laying out the topic.

[0088] Step S302: Determine whether the first region has been laid out with a grid.

[0089] Specifically, based on the position and size of the grid and the first region, it is determined whether the grid contains the first region.

[0090] If the determination is negative, that is, if the first region is not included in the grid, then it is considered that the first region has not been laid out with a grid, and step S303 is executed.

[0091] If the determination is yes, that is, the grid contains the first region, then the first region is considered to have been gridded. In this case, step S304 can be executed directly.

[0092] Step S303: Expand the grid so that the first area layout has a grid.

[0093] Specifically, the boundaries that the mesh needs to be expanded can be determined based on the position and size of the first region and the mesh. For example, if the bottom edge of the first region extends beyond the bottom boundary of the mesh, the bottom boundary of the mesh can be expanded until the mesh completely covers the first region. If the rightmost edge of the first region extends beyond the rightmost boundary of the mesh, the rightmost boundary of the mesh can be expanded until the mesh completely covers the first region. If the bottom edge of the first region extends beyond the bottom boundary of the mesh and the rightmost edge of the first region extends beyond the rightmost boundary of the mesh, both the bottom and right boundaries of the mesh can be expanded.

[0094] Step S304: Layout the second element in the region corresponding to the first region on the grid.

[0095] The following provides examples to illustrate steps S302-S304 above.

[0096] As shown in Figure 4, if coordinate axes, curves, and pie charts are already laid out in the grid, the currently laid-out element is the legend. The legend's description indicates that the legend is located at the bottom center of the grid. However, the empty area at the bottom of the grid is insufficient to lay out the legend; that is, the first area is not laid out with the grid. Therefore, the layout device can expand the bottom boundary of the grid, for example, by increasing the grid's height and adaptively adjusting the grid's position so that the grid does not exceed the display window, until the empty area at the bottom of the grid is larger than the first area where the legend is laid out. Then, it can be considered that the first area has been laid out with the grid. The layout device can determine the adjusted position and size of the grid and lay it out in the first area corresponding to the legend within the grid.

[0097] For example, if the target chart includes a thumbnail, and the thumbnail's description indicates that it is located at the bottom of the grid, but the bottom area of ​​the grid is insufficient to accommodate the thumbnail (meaning the first area of ​​the thumbnail is not covered by the grid), the layout device can extend the bottom boundary of the grid. This could be done by increasing the grid's height and adaptively adjusting its position so that the grid does not exceed the display window, until the bottom area of ​​the grid is large enough to accommodate the thumbnail, and until this remaining space is larger than the first area for the chart. In this case, the first area of ​​the thumbnail can be considered to have been covered by the grid. The layout device can then determine the adjusted grid's position and size and place the thumbnail within the first area of ​​the grid. Similarly, if the thumbnail's description indicates that it is located on the right side of the grid, it can be placed on the right side of the grid.

[0098] As can be seen from the above, by expanding the grid, the current second element can be laid out by simply adjusting the size and position of the grid without modifying the position and size of the already laid-out elements relative to the grid. In this way, the position of the already laid-out elements on the grid will not be affected, and the current second element can be laid out outside the area of ​​the already laid-out elements, further reducing the problem of elements being occluded due to overlapping.

[0099] The following describes another way to implement the layout of the second element in step S204.

[0100] In another implementation, adjustments can be made to the second element. Specifically, the layout device can determine the empty area of ​​the grid based on the current position and size of the grid and the area occupied by the already laid-out elements. Under the premise of satisfying the description information of the current second element, the size and position of the second element can be adjusted so that the second element can be laid in the empty area of ​​the grid. The adjusted second element is then placed in the empty area of ​​the grid.

[0101] The following explains how to implement step S203 (laying out the first element) or step S204 (laying out the second element).

[0102] In one embodiment of this disclosure, if the element to be laid out contains a tag, the element is laid out according to steps A-B, wherein the element to be laid out is a first element or a second element:

[0103] Step A: Determine the display mode of the tags in the element to be laid out based on the number of tags, tag size, and size of the element to be laid out.

[0104] The labels can include labels that display categories in the category axis, or labels that display categories in the horizontally laid-out legend, for example, Figure 4 The coordinate axes 2012, 2013...2017 in dashed box 4, or the labels Product 1, Product 2, Product 3 and Product 4 in dashed box 5, can be the labels mentioned above.

[0105] The size of a tag can change depending on its content; the more content a tag contains, the larger its size will be. However, if a tag's size exceeds a certain threshold, it may overlap, potentially obscuring its content, because in some cases the tag still needs to be positioned correctly.

[0106] The implementation method of step A will be described in the following examples, and will not be detailed here.

[0107] Step B: Based on the display mode, determine the second area on the grid where the labels of the elements to be laid out are to be located, and lay out the labels of the elements to be laid out in the second area.

[0108] Because the element contains a tag, the second region is located within the first region of the element described by the tag, for example, see [link to example]. Figure 4 As can be seen, the words 2012, 2013...2017 are all within the dashed box 4. That is, the determined second area should be located within the first area of ​​the element to which the tag belongs.

[0109] After determining the display mode, the size and position of each label to be displayed can be calculated, and based on the obtained size and position, the position and size of the second area can be determined. For example... Figure 5 As shown, Figure 5 This provides a schematic diagram of label wrapping in a chart, where the dashed box can represent the second area of ​​the label in the layout element.

[0110] As can be seen from the above, the display mode of the tags is adaptively adjusted according to the number of tags contained in the element, the tag size, and the size of the element to be laid out. The determined display mode is more suitable for the display of the current chart, element, and tag size, reducing the problem of tag content being obscured due to tag overlap and improving user experience.

[0111] The implementation method of step A will be explained below.

[0112] In one implementation, the total width of the tags is obtained based on the number and size of the tags contained in the element to be laid out. If the relative size relationship between the total width of the tags and the size of the element to be laid out indicates that the layout area of ​​the tags is sufficient, then the display mode of the tags in the element to be laid out is determined to be a single-line display mode. If the relative size relationship indicates that the layout area of ​​the tags is insufficient, then the display mode of the tags in the element to be laid out is determined to be a multi-line display mode.

[0113] In one approach, w c The width of the element to which the tag belongs is represented by q, the number of tags is represented by w. l This represents the width of the label. The total label width can be expressed as q × w. l The calculated numerical value is used to represent this. The total label width represents the total width of all labels when displayed horizontally. When laying out labels, they can be connected sequentially without any gaps between them.

[0114] In w c ≥q×w l In this case, the width of the element is greater than or equal to the width of each tag multiplied by the number of tags. Thus, the relative size relationship between the total width of the tags and the size of the elements to be laid out can be considered to indicate that the layout area of ​​the tags is sufficient.

[0115] In w c <q×w lIn this case, the width of the element is less than the width of each tag multiplied by the number of tags. Therefore, the relative size relationship between the total tag width and the size of the element to be laid out can be considered to indicate that the tag layout area is insufficient. In this situation, the layout device can dynamically adjust the tag rendering style to wrap the tags, and the width of the wrapped tag can be w. x =w c / q.

[0116] For example, see Figure 5 In the image, "XXXXXXXXXXX" represents the content within the tags. Due to the large amount of content within the tags and the large number of tags themselves, each tag in the image is automatically wrapped to two lines.

[0117] As can be seen from the above, in the solution provided by the embodiments of this disclosure, it is possible to determine whether the display mode is a single-line display mode or a multi-line display mode based on the content in the element's label. When the layout area of ​​the label is insufficient, the width of the label is shortened and the line is wrapped. When the layout area of ​​the label is sufficient, the content of the label is fully displayed, reducing the problem of label content being obscured due to label overlap and improving the user experience.

[0118] In addition, based on the above implementation method, when the layout area representing the relative size relationship of the labels is insufficient, the display mode of the labels in the element to be laid out can be determined to be a multi-line display mode through the following steps C-E.

[0119] Step C: Determine the label width in multi-line display mode based on the size of the element to be laid out and the number of labels.

[0120] The above formula w x =w c / q calculates the label width in multi-line display mode.

[0121] Step D: If the label width is less than the preset width threshold, determine that the display mode of the label in the element to be laid out is the multi-line sampling display sub-mode.

[0122] Step E: If the label width is not less than the preset width threshold, determine that the display mode of the label in the element to be laid out is the multi-line complete display sub-mode.

[0123] Steps D and E are explained below.

[0124] The width threshold can be a preset value, such as the size of one or two fonts, or a suitable width threshold can be preset according to the size of the chart.

[0125] In one approach, the font size within the tag content can be used as the width threshold. This can be achieved by using f... minIt represents the font size in the tag content.

[0126] In w x ≥f min In this case, it means that the width of the tag is large enough to fully display the content of each tag.

[0127] In w x <f min In this case, it indicates that the label width is too small, resulting in insufficient content on a single line for displaying a single character. The layout device can sample the labels, reducing the number of labels displayed and showing only a subset of them.

[0128] As can be seen from the above, when the label width is less than the preset width threshold, the labels are sampled and displayed. Even when multiple lines are displayed, it is difficult to fully display the label content. Therefore, priority is given to ensuring that the labels do not overlap, further reducing the problem of label content being obscured due to label overlap.

[0129] In another embodiment of this disclosure, see Figure 6 , Figure 6 A schematic diagram of an example is provided.

[0130] For the labels in the legend, if there are too many labels or too many labels in total, you can also set a legend pagination button, as shown in the black box in the figure. Multiple legend pages will then be used to display the labels in each legend page correctly.

[0131] The following describes another way to implement step S203 of laying out the first element or step S204 of laying out the second element.

[0132] In one embodiment of this disclosure, when the element to be laid out has associated elements, step S203 or step S204 lays out the element according to the following step F, wherein the element to be laid out is the first element or the second element.

[0133] Step F: According to the area division ratio between the element to be laid out and the related elements, determine the area on the grid where the element to be laid out is to be laid out, and lay out the element to be laid out in the determined area.

[0134] Specifically, the layout of elements can be achieved in a similar manner to the layout of elements to be laid out in step S203 or step S204 above.

[0135] The difference lies in the fact that when the layout device places a first element with related elements on the grid, it first needs to determine the area on the grid where the first element will be placed, according to the area division ratio between the element to be placed and the related elements. Then, the first element is placed within the determined area in the same way that elements to be placed are laid out. For a second element with related elements, when the layout device determines the first area of ​​the second element, it first needs to determine the first area on the grid where the second element will be placed, according to the area division ratio between the element to be placed and the related elements. Then, the second element is placed in the same way that elements to be placed are laid out.

[0136] The position and size of the first or second element with related elements are constrained by the region division ratio.

[0137] For example, the toolbox and legend are related elements. They can be grouped into the same area, with the toolbox allocating 40% and the legend 60%. If the legend is laid out first, it can only occupy 60% of the total area used for laying out the legend and toolbox. See also... Figure 7 , Figure 7 A schematic diagram is provided showing the first element determined according to the region division ratio. In the diagram, the left black box represents the region of the legend divided according to the region division ratio of 60%, and the right black box represents the region of the toolbox divided according to the region division ratio of 40%.

[0138] As can be seen from the above, the solution provided by the embodiments of this disclosure can set the division ratio for elements, which improves the customization capability of the chart layout and enhances the user experience.

[0139] In one embodiment of this disclosure, see [link to embodiment]. Figure 8 , Figure 8 A schematic diagram of a chart layout device is provided, the device comprising:

[0140] The description information acquisition module 801 is used to determine the elements in the target chart and obtain the description information of each element in the target chart.

[0141] The first element determination module 802 is used to determine the first element with the highest layout priority among all elements.

[0142] The element layout module 803 is used to lay out the first element on the grid corresponding to the target chart according to the description information of the first element; and to lay out the second element in the grid outside the area occupied by the already laid out elements in order of the layout priority of the second element from high to low, wherein the second element is: the element other than the first element among all elements.

[0143] As can be seen from the above, in the solution provided by this disclosure, each element in the chart is laid out sequentially according to its layout priority. After the first element, which has the highest layout priority, is placed in the chart, since it is the first element to be laid out, there are no already laid-out elements, and therefore the first element will not overlap with any already laid-out elements. When laying out the second element other than the first element, the already laid-out elements in the chart can be used as a reference, and the second element is placed sequentially outside the area occupied by the already laid-out elements in the chart. Each time the second element is laid out, the already laid-out elements in the chart are taken into account, so the second element will not overlap with any already laid-out elements. After each second element is laid out, the completed second element is also considered as a laid-out element, so each time the second element is laid out, the currently laid-out second element will not overlap with the previously laid-out second element. It is evident that applying this disclosure embodiment can reduce the problem of element occlusion caused by element overlap.

[0144] In one embodiment of this disclosure, the target chart is at least one of the following: a chart whose size has changed; a chart whose elements have changed size; a chart whose element description information has changed; or a newly generated chart.

[0145] As can be seen from the above, setting a target chart can adapt to various application scenarios when the size of the chart or the size of the chart elements changes. Therefore, determining the target chart in the above way can accurately identify the problematic chart and rearrange it, further reducing the problem of elements being obscured due to overlapping.

[0146] In one embodiment of this disclosure, the element layout module 803 is specifically used to lay out each second element in descending order of layout priority, according to the following method:

[0147] Based on the description information of the second element, determine the first area to be laid out for the second element outside the area occupied by the already laid-out elements;

[0148] Determine whether a grid has been laid out in the first region;

[0149] If not, expand the grid so that the first area layout has a grid;

[0150] The second element of the area layout corresponding to the first region on the grid.

[0151] As can be seen from the above, by expanding the grid, the current second element can be laid out by simply adjusting the size and position of the grid without modifying the position and size of the already laid-out elements relative to the grid. In this way, the position of the already laid-out elements on the grid will not be affected, and the current second element can be laid out outside the area of ​​the already laid-out elements, further reducing the problem of elements being occluded due to overlapping.

[0152] In one embodiment of this disclosure, when the element to be laid out contains a tag, the element layout module 803 lays out the element in the following manner, wherein the element to be laid out is a first element or a second element:

[0153] The display mode of the tags in the element to be laid out is determined based on the number of tags, the size of the tags, and the size of the element to be laid out.

[0154] Based on the display mode, determine the second region of the labels among the elements to be laid out on the grid.

[0155] The tags in the elements to be laid out are placed in the second area.

[0156] As can be seen from the above, the display mode of the tags is adaptively adjusted according to the number of tags contained in the element, the tag size, and the size of the element to be laid out. The determined display mode is more suitable for the display of the current chart, element, and tag size, reducing the problem of tag content being obscured due to tag overlap and improving the user experience.

[0157] In one embodiment of this disclosure, the element layout module 803 is specifically used to obtain the total width of the labels based on the number of labels and the size of the labels contained in the element to be laid out; if the relative size relationship between the total width of the labels and the size of the element to be laid out indicates that the layout area of ​​the labels is sufficient, then the display mode of the labels in the element to be laid out is determined to be a single-line display mode; if the relative size relationship indicates that the layout area of ​​the labels is insufficient, then the display mode of the labels in the element to be laid out is determined to be a multi-line display mode.

[0158] As can be seen from the above, in the solution provided by the embodiments of this disclosure, it is possible to determine whether the display mode is a single-line display mode or a multi-line display mode based on the content in the element's label. When the layout area of ​​the label is insufficient, the width of the label is shortened and the line is wrapped. When the layout area of ​​the label is sufficient, the content of the label is fully displayed, reducing the problem of label content being obscured due to label overlap and improving the user experience.

[0159] In one embodiment of this disclosure, the element layout module 803 is specifically used to determine the label width in the multi-line display mode based on the size of the element to be laid out and the number of labels; if the label width is less than a preset width threshold, determine that the display mode of the labels in the element to be laid out is a multi-line sampling display sub-mode; if the label width is not less than the preset width threshold, determine that the display mode of the labels in the element to be laid out is a multi-line complete display sub-mode.

[0160] As can be seen from the above, when the label width is less than the preset width threshold, the labels are sampled and displayed. Even when multiple lines are displayed, it is difficult to fully display the label content. Therefore, priority is given to ensuring that the labels do not overlap, further reducing the problem of label content being obscured due to label overlap.

[0161] In one embodiment of this disclosure, if the element to be laid out has associated elements, the element layout module 803 lays out the elements in the following manner, wherein the element to be laid out is a first element or a second element:

[0162] If the element to be laid out has related elements, the area to be laid out on the grid is determined according to the area division ratio between the element to be laid out and the related elements.

[0163] Lay out the elements to be laid out in the defined area.

[0164] As can be seen from the above, the solution provided by the embodiments of this disclosure can set the division ratio for elements, which improves the customization capability of the chart layout and enhances the user experience.

[0165] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0166] According to another aspect of this disclosure, an electronic device is provided, comprising:

[0167] At least one processor; and

[0168] A memory communicatively connected to the at least one processor; wherein,

[0169] The memory stores instructions that can be executed by the at least one processor, which enables the at least one processor to perform the above-described chart layout method.

[0170] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause the computer to perform the above-described chart layout method.

[0171] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements the above-described chart layout method.

[0172] Figure 9 A schematic block diagram of an example electronic device 900 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0173] like Figure 9 As shown, device 900 includes a computing unit 901, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 902 or a computer program loaded from storage unit 908 into random access memory (RAM) 903. RAM 903 may also store various programs and data required for the operation of device 900. The computing unit 901, ROM 902, and RAM 903 are interconnected via bus 904. Input / output (I / O) interface 905 is also connected to bus 904.

[0174] Multiple components in device 900 are connected to I / O interface 905, including: input unit 906, such as keyboard, mouse, etc.; output unit 907, such as various types of monitors, speakers, etc.; storage unit 908, such as disk, optical disk, etc.; and communication unit 909, such as network card, modem, wireless transceiver, etc. Communication unit 909 allows device 900 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0175] The computing unit 901 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 901 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 901 performs the various methods and processes described above, such as method graph layout. For example, in some embodiments, the method graph layout may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 908. In some embodiments, part or all of the computer program may be loaded and / or installed on device 900 via ROM 902 and / or communication unit 909. When the computer program is loaded into RAM 903 and executed by the computing unit 901, one or more steps of the method graph layout described above may be performed. Alternatively, in other embodiments, the computing unit 901 may be configured to perform the method graph layout by any other suitable means (e.g., by means of firmware).

[0176] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0177] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0178] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0179] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0180] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0181] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0182] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0183] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A chart layout method, comprising: Identify the elements in the target chart and obtain the descriptive information of each element in the target chart; Determine the first element with the highest layout priority among all elements; The first element is laid out on the grid corresponding to the target chart according to the description information of the first element; The second elements are laid out in descending order of their layout priority. The second elements are then laid out outside the areas occupied by the already laid-out elements on the grid. The second element is any element other than the first element. The step of laying out the second element outside the area occupied by the already laid-out elements on the grid, according to the layout priority of the second element from high to low, includes: The second elements are laid out sequentially according to their layout priority from high to low, as follows: Based on the description information of the second element, a first area for laying out the second element is determined outside the area occupied by the already laid-out elements; it is determined whether the first area has been laid out with the grid; if not, the grid is expanded so that the first area has the grid laid out; the second element is laid out on the grid corresponding to the area of ​​the first area. or Based on the current position and size of the grid and the area occupied by the already laid-out elements, determine the empty area of ​​the grid. Under the premise of satisfying the description information of the current second element, adjust the size and position of the second element and place the adjusted second element in the empty area of ​​the grid.

2. The method according to claim 1, wherein, The target chart is at least one of the following charts: Charts whose dimensions change; A chart in which the size of elements changes; A chart where the descriptive information of its elements changes; The first chart generated.

3. The method according to any one of claims 1-2, wherein, If the element to be laid out contains a tag, the element is laid out as follows, wherein the element to be laid out is either the first element or the second element: The display mode of the tags in the element to be laid out is determined based on the number of tags, the size of the tags, and the size of the element to be laid out. Based on the display mode, determine the second area on the grid where the label of the element to be laid out is to be placed; The labels of the elements to be laid out are placed in the second area.

4. The method according to claim 3, wherein, The step of determining the display mode of the tags in the element to be laid out based on the number of tags, tag size, and size of the element to be laid out includes: Based on the number and size of the tags contained in the element to be laid out, the total width of the tags is obtained; If the relative size relationship between the total width of the label and the size of the element to be laid out indicates that the layout area of ​​the label is sufficient, then the display mode of the label in the element to be laid out is determined to be a single-line display mode. If the relative size relationship indicates that the layout area of ​​the label is insufficient, then the display mode of the label in the element to be laid out is determined to be a multi-line display mode.

5. The method according to claim 4, wherein, The step of determining that the display mode of the tags in the element to be laid out is a multi-line display mode includes: The label width in the multi-line display mode is determined based on the size of the element to be laid out and the number of labels. If the width of the label is less than a preset width threshold, the display mode of the label in the element to be laid out is determined to be a multi-line sampling display sub-mode; If the width of the label is not less than a preset width threshold, the display mode of the label in the element to be laid out is determined to be a multi-line complete display sub-mode.

6. The method according to any one of claims 1-2, wherein, If the element to be laid out has related elements, the elements are laid out in the following manner, wherein the element to be laid out is either the first element or the second element: According to the area division ratio between the element to be laid out and the associated element, the area where the element to be laid out is to be laid out is determined on the grid. The elements to be laid out are placed in the defined area.

7. A chart layout device, comprising: The description information acquisition module is used to determine the elements in the target chart and obtain the description information of each element in the target chart; The first element determination module is used to determine the first element with the highest layout priority among all elements. The element layout module is used to lay out the first element on the grid corresponding to the target chart according to the description information of the first element; and to lay out the second element outside the area occupied by the already laid out elements on the grid in order of the layout priority of the second element from high to low, wherein the second element is: the element other than the first element among all elements; The element layout module is specifically used for: The second elements are laid out sequentially according to their layout priority from high to low, as follows: Based on the description information of the second element, a first area for the second element to be laid out is determined outside the area occupied by the already laid-out elements; it is then determined whether the first area has already been laid out with the grid. If not, expand the grid so that the first region is laid out with the grid; and lay out a second element on the grid corresponding to the first region. or Based on the current position and size of the grid and the area occupied by the already laid-out elements, determine the empty area of ​​the grid. Under the premise of satisfying the description information of the current second element, adjust the size and position of the second element and place the adjusted second element in the empty area of ​​the grid.

8. The apparatus according to claim 7, wherein, The target chart is at least one of the following charts: Charts whose dimensions change; A chart in which the size of elements changes; A chart where the descriptive information of its elements changes; The first chart generated.

9. The apparatus according to any one of claims 7-8, wherein, When the element to be laid out contains a tag, the element layout module lays out the element in the following manner, wherein the element to be laid out is either the first element or the second element: The display mode of the tags in the element to be laid out is determined based on the number of tags, the size of the tags, and the size of the element to be laid out. Based on the display mode, determine the second area on the grid where the label of the element to be laid out is to be placed; The labels of the elements to be laid out are placed in the second area.

10. The apparatus according to claim 9, wherein, The element layout module is specifically used to obtain the total width of the labels based on the number and size of the labels contained in the element to be laid out; if the relative size relationship between the total width of the labels and the size of the element to be laid out indicates that the layout area of ​​the labels is sufficient, then the display mode of the labels in the element to be laid out is determined to be a single-line display mode; if the relative size relationship indicates that the layout area of ​​the labels is insufficient, then the display mode of the labels in the element to be laid out is determined to be a multi-line display mode.

11. The apparatus according to claim 10, wherein, The element layout module is specifically used to determine the label width in the multi-line display mode based on the size of the element to be laid out and the number of labels; if the label width is less than a preset width threshold, determine that the display mode of the labels in the element to be laid out is a multi-line sampling display sub-mode; if the label width is not less than the preset width threshold, determine that the display mode of the labels in the element to be laid out is a multi-line complete display sub-mode.

12. The apparatus according to any one of claims 7-8, wherein, If the element to be laid out has related elements, the element layout module lays out the elements in the following manner, wherein the element to be laid out is either the first element or the second element: If the element to be laid out has associated elements, the area where the element to be laid out is to be laid out is determined on the grid according to the area division ratio between the element to be laid out and the associated elements. The elements to be laid out are placed in the defined area.

13. An electronic device, comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-6.

14. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-6.

15. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-6.

Images