Chart display method and device, electronic equipment and storage medium

Abstract

The invention provides a chart display method and device, electronic equipment and a storage medium, and relates to the technical field of data visualization, the method comprises the following steps: determining an initial size corresponding to a pop-up window container displayed on a display device based on a preset size, and displaying a chart in the pop-up window container; when a size adjustment event triggered by the interaction device is detected, determining a target size corresponding to the popup window container based on the initial size, the size adjustment event and a dragging displacement corresponding to the interaction device after the size adjustment event is triggered; and adjusting the pop-up window container based on the target size, and triggering a redrawing operation of the chart. On one hand, the initial size of the pop-up window container can be controlled through the preset size, on the other hand, the size adjustment requirement (namely, the size adjustment event triggered by the interaction device) of a user can be responded, the target size is determined through multi-factor fusion, and more flexible and accurate chart size adjustment is achieved.

Description

Technical Field

[0001] The present invention relates to the field of data visualization technology, and in particular to a chart display method, device, electronic device and storage medium. Background Art

[0002] Nowadays, in large-scale engineering projects (such as deep foundation pit safety monitoring projects), in order to timely and accurately grasp the changing trends of key project parameters and ensure construction safety and project quality, it is often necessary to display charts such as ECharts in real time to intuitively present the dynamic changes of monitoring data such as displacement, settlement, and stress.

[0003] However, in related technologies, charts such as ECharts mainly rely on the browser window zoom ratio for zoom display, which often has obvious limitations such as a single adjustment method. Summary of the Invention

[0004] The problem solved by the present invention is how to improve the flexibility of chart display adjustment.

[0005] To solve the above problem, the present invention provides a chart display method, which is applied to a display device, wherein the display device includes an interaction device and a display device; the chart display method includes:

[0006] Determining an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and displaying a chart in the pop-up window container;

[0007] When a size adjustment event triggered by the interaction device is detected, determining a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event being triggered;

[0008] The pop-up window container is adjusted based on the target size, and a redrawing operation of the chart is triggered.

[0009] Optionally, before determining the initial size corresponding to the pop-up window container displayed on the display device based on the preset size, the method further includes:

[0010] Obtaining a historical chart type corresponding to the historical chart, a historical display size corresponding to the historical display device, and a preset optimal display size corresponding to the historical chart type under the historical display size;

[0011] Taking the historical chart type and the historical display size as input and the corresponding preset optimal display size as output, a training data set is constructed;

[0012] Training a preset initial model based on the training data set to obtain a size recommendation model;

[0013] Obtaining a chart type corresponding to the chart and a display size corresponding to the display device;

[0014] The chart type and the display size are input into the size recommendation model to obtain a reference size, and the preset size is obtained based on the reference size.

[0015] Optionally, obtaining the preset size based on the reference size includes:

[0016] When the deviation between the acquired user desired size and the reference size is less than or equal to a preset deviation threshold, the reference size is used as the preset size.

[0017] Optionally, obtaining the preset size based on the reference size further includes:

[0018] When the deviation between the user desired size and the reference size is greater than the preset deviation threshold, determining whether the user desired size is greater than a preset limit size;

[0019] If so, the preset limit size is used as the preset size;

[0020] If not, the user desired size is used as the preset size.

[0021] Optionally, after determining the initial size of the pop-up window container displayed on the display device based on the preset size, the method further includes:

[0022] When a trigger signal corresponding to the interactive device in the preset drag control block displayed on the display device is detected, the event element pre-bound to the preset drag control block is used as the size adjustment event; wherein, the event element includes at least one of border stretching and diagonal stretching.

[0023] Optionally, the initial size includes a width and a height; the border stretching includes a horizontal border stretching and a vertical border stretching; and determining a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement corresponding to the interactive device after the size adjustment event is triggered includes:

[0024] When the size adjustment event is the stretching of the horizontal border, the width size is symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size;

[0025] When the size adjustment event is the stretching of the vertical border, the height size is symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size;

[0026] When the size adjustment event is the diagonal stretching, the width and height are simultaneously increased or decreased by the length of the drag displacement according to the direction of the drag displacement to obtain the target size.

[0027] Optionally, adjusting the pop-up window container based on the target size and triggering a redrawing operation of the chart includes:

[0028] Mapping the target size to configuration parameters corresponding to the pop-up window container, and adjusting the size of the pop-up window container according to the configuration parameters;

[0029] When a size change of the pop-up window container is detected, the redrawing operation is triggered.

[0030] In the present invention, the initial size corresponding to the pop-up container is determined based on a preset size, and the chart is displayed in the pop-up container, which is conducive to meeting the personalized display needs in different scenarios, avoiding the problems such as poor display effect that may result from relying on adjusting the size of the pop-up container by scaling the browser window, and ensuring that the chart can be presented in the pop-up container more reasonably. On this basis, when a size adjustment event triggered by an interactive device is detected, the present invention determines the target size by combining the initial size, the size adjustment event, and the drag displacement corresponding to the interactive device. Among them, the initial size serves as a benchmark for size adjustment, which is conducive to ensuring the reliability of the size adjustment of the pop-up container. The size adjustment event triggered by the interactive device can indicate the specific intention of the user to adjust the size of the chart, and the drag displacement can accurately reflect the size change range expected by the user, thereby comprehensively improving the accuracy and reliability of the size adjustment. After determining the target size, the present invention can adjust the pop-up container based on the target size and trigger the redrawing operation of the chart to ensure that the chart content can be accurately and completely presented in the new size environment (i.e., in the adjusted pop-up container). In this way, compared with the single adjustment method that only relies on the browser window zoom ratio, the present invention can, on the one hand, control the initial size of the pop-up container through a preset size, and on the other hand, respond to size adjustment requirements (i.e., size adjustment events triggered by interactive devices), and comprehensively integrate multiple factors to determine the target size, thereby achieving more flexible and accurate chart size adjustment.

[0031] The present invention further provides a chart display device, which is applied to a display device, wherein the display device includes an interaction device and a display device; the chart display device includes:

[0032] a determination module, configured to determine an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and display a chart in the pop-up window container;

[0033] a triggering module configured to, upon detecting a size adjustment event triggered by the interaction device, determine a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event;

[0034] An adjustment module is used to adjust the pop-up window container based on the target size and trigger a redrawing operation of the chart.

[0035] The advantages of the chart display device provided by the present invention and the chart display method are basically the same as those of the prior art, and will not be described in detail here.

[0036] The present invention also provides an electronic device, comprising a memory and a processor;

[0037] The memory is used to store computer programs;

[0038] The processor is configured to implement the above-mentioned chart display method when executing the computer program.

[0039] The advantages of the electronic device provided by the present invention and the graph display method compared with the prior art are basically the same, and will not be repeated here.

[0040] The present invention also provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the above-mentioned chart display method is implemented.

[0041] The advantages of the computer-readable storage medium provided by the present invention and the chart display method compared to the prior art are basically the same and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A schematic flow chart of a method for displaying a chart according to an embodiment of the present invention;

[0043] Figure 2 is a structural schematic diagram of a chart display device according to an embodiment of the present invention;

[0044] Figure 3 Schematic diagram of the structure of an electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0045] To make the above-mentioned objects, features, and advantages of the present invention more clearly understood, specific embodiments of the present invention are described in detail below with reference to the accompanying drawings. Although certain embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be construed as being limited to the embodiments described herein. Instead, these embodiments are provided to provide a more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments of the present invention are for illustrative purposes only and are not intended to limit the scope of protection of the present invention.

[0046] It should be understood that the various steps described in the method embodiments of the present invention may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present invention is not limited in this respect.

[0047] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments"; the term "optionally" means "optional embodiments". The relevant definitions of other terms will be given in the following description. It should be noted that the concepts of "first", "second", etc. mentioned in the present invention are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0048] It should be noted that the modifications of "one" and "multiple" mentioned in the present invention are illustrative rather than restrictive. Those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0049] like Figure 1 As shown, an embodiment of the present invention provides a chart display method, which is applied to a display device, wherein the display device includes an interaction device and a display device; the chart display method includes the following steps:

[0050] S1: determining an initial size corresponding to a pop-up window container displayed on a display device based on a preset size, and displaying a chart in the pop-up window container.

[0051] Specifically, the display device in this embodiment represents an electronic device (such as a computer, a mobile phone, etc.) that can support the display and adjustment of charts. The interactive device referred to in this embodiment refers to a device for the user to interact with the display system, such as a mouse, a touch screen, etc. The display device refers to a device for presenting visual visual information, such as a computer display screen, a mobile phone screen, etc. The pop-up container displayed on the display device referred to in this embodiment represents a virtual container for carrying and displaying charts, such as a window that pops up on the screen of an electronic device, which provides display space for the chart. In this embodiment, the preset size represents a pre-set size parameter for determining the initial size of the pop-up container, which can be flexibly set according to the actual application scenario and design requirements. For example, in the display interface design of an electronic device, the preset size can be set to adapt to the size of a partial area of ​​the screen or a specific display area, or it can be set by the user. The chart referred to in this embodiment (such as an ECharts chart) represents a visual object that presents data in a graphical manner, which can include a bar chart, a line chart, etc.

[0052] In one embodiment, the user can pre-set a preset size as the initial size of the pop-up container, and map the initial size to the configuration parameters corresponding to the pop-up container, so that the pop-up container is displayed on the screen according to the size of the initial size. On this basis, the chart can be displayed in the pop-up container. For example, for ECharts charts, after creating a pop-up container, the chart instance can be initialized. Then, according to the acquired data (such as engineering monitoring data), the configuration items of the chart are set, and the configuration items are set to the chart instance and the chart is rendered by calling the existing set option method, so that the ECharts chart is displayed in the pop-up container.

[0053] S2: When a size adjustment event triggered by the interactive device is detected, a target size corresponding to the pop-up container is determined based on the initial size, the size adjustment event, and the drag displacement of the interactive device after the size adjustment event is triggered.

[0054] Specifically, in this embodiment, a resize event represents a resize operation on a pop-up container triggered by an interactive device, and may include resize operations triggered by interactive operations such as dragging a mouse, clicking, or sliding on a touch screen. In this embodiment, the drag displacement reflects the distance and direction moved on the screen after the interactive device triggers the resize event. The drag displacement can be determined by tracking the coordinates of the mouse pointer in real time and based on the coordinate changes.

[0055] Taking the interactive device as a mouse as an example, when a size adjustment event triggered by the mouse is detected (such as a trigger signal corresponding to when the mouse is pressed in a preset control block), the corresponding drag displacement of the mouse can be obtained after the mouse triggers the size adjustment event until the trigger signal disappears. On this basis, the user's adjustment intention can be determined according to the size adjustment event. For example, different control blocks can be set and different size adjustment events can be bound to them, such as increasing width, decreasing width, increasing height, decreasing height, increasing height and width at the same time, and decreasing height and width at the same time. On this basis, the initial size can be adjusted based on the size adjustment event and the drag displacement to obtain the target size. For example, assuming that the size adjustment event is to increase the height and width at the same time, the drag displacement is 20 pixels, the initial width in the initial size is 200 pixels, and the initial height is 150 pixels, then the target size is a target width of 220 pixels and a target height of 170 pixels.

[0056] S3: Adjust the popup container based on the target size and trigger a redraw of the chart.

[0057] Specifically, after determining the target size, you can adjust the pop-up container based on the target size and trigger the chart redrawing operation. For example, assuming the initial size is 200 pixels by 150 pixels, after determining the target size is 300 pixels by 250 pixels, you can first adjust the size of the pop-up container to the target size. On this basis, you can call the existing chart redrawing methods in ECharts (such as the setOption method), set the configuration items to the chart instance and render the chart, so that the ECharts chart is displayed in the resized pop-up container.

[0058] In this embodiment, the initial size of the pop-up container is determined based on a preset size, and the chart is displayed within the pop-up container. This helps meet personalized display needs in different scenarios, avoids problems such as poor display effects that may result from relying on resizing the pop-up container by scaling the browser window, and helps ensure that the chart can be presented more reasonably in the pop-up container. On this basis, when a size adjustment event triggered by the interactive device is detected, this embodiment comprehensively determines the target size by combining the initial size, the size adjustment event, and the drag displacement corresponding to the interactive device. The initial size serves as a reference for size adjustment, which helps ensure the reliability of size adjustment of the pop-up container. The size adjustment event triggered by the interactive device can indicate the user's specific intention to adjust the size of the chart, while the drag displacement can accurately reflect the user's desired size change, thereby comprehensively improving the accuracy and reliability of size adjustment. After determining the target size, this embodiment can adjust the pop-up container based on the target size and trigger the redrawing of the chart, ensuring that the chart content can be accurately and completely presented in the new size environment (i.e., in the adjusted pop-up container). In this way, compared with the single adjustment method that only relies on the browser window zoom ratio, this embodiment can, on the one hand, control the initial size of the pop-up container through a preset size, and on the other hand, respond to size adjustment requirements (i.e., size adjustment events triggered by interactive devices), and comprehensively integrate multiple factors to determine the target size, thereby achieving more flexible and accurate chart size adjustment.

[0059] Optionally, before determining the initial size of the pop-up window container displayed on the display device based on the preset size, the method further includes:

[0060] Obtaining a historical chart type corresponding to the historical chart, a historical display size corresponding to the historical display device, and a preset optimal display size corresponding to the historical chart type under the historical display size;

[0061] Take the historical chart type and historical display size as input and the corresponding preset optimal display size as output to construct a training dataset;

[0062] Train the preset initial model based on the training data set to obtain a size recommendation model;

[0063] Get the chart type corresponding to the chart and the display size corresponding to the display device;

[0064] The chart type and the display size are input into a size recommendation model to obtain a reference size, and a preset size is obtained based on the reference size.

[0065] Specifically, the chart types referred to in this embodiment represent different types of chart presentation formats, which may include bar charts, line charts, pie charts, and scatter plots. The display size corresponding to the display device referred to in this embodiment represents the actual physical size or effective display area of ​​the screen (such as a computer screen, mobile phone screen, etc.) currently used to display the chart, reflecting the display space that the display device can provide.

[0066] In one embodiment, preset optimal display sizes for different historical chart types at different historical display sizes can be obtained in advance (e.g., based on human evaluation). Based on this, a training dataset is constructed using the historical chart types and historical display sizes as input and the corresponding optimal display sizes as output. A preset initial model (e.g., a neural network model) is trained based on the training dataset to obtain a trained size recommendation model. In actual use, the chart type and the display size corresponding to the display device can be input into the size recommendation model, and the size output by the model is used as a reference size to obtain a preset size based on the reference size.

[0067] In this embodiment, obtaining the chart type corresponding to the chart and the display size corresponding to the display device is beneficial for providing a key data basis for the subsequent determination of the reference size, ensuring the reliability of the reference size. The size recommendation model is trained based on a training data set consisting of preset optimal display sizes corresponding to historical chart types under historical display sizes. Therefore, this embodiment inputs the chart type and display size into the pre-trained size recommendation model, which can comprehensively consider the relationship between the chart type and the display device size, thereby outputting a reference size that can achieve a better display effect. On this basis, the preset size is obtained based on the reference size, which is beneficial for ensuring the initial display effect of the chart on different display devices, thereby improving the compatibility of the chart display with different display devices.

[0068] Optionally, obtaining a preset size based on a reference size includes:

[0069] When the deviation between the acquired user desired size and the reference size is less than or equal to a preset deviation threshold, the reference size is used as the preset size.

[0070] In this embodiment, the user's desired size represents the size that the user expects the pop-up container to display, which can be input through an interactive device (such as a keyboard, touch screen, etc.). The preset deviation threshold referred to in this embodiment can be set in advance, such as 10% of the reference size. After obtaining the user's desired size and the reference size, the deviation between the two can be obtained. It should be understood that the user's desired size and the reference size can both include width and height dimensions, and the deviation between the two can include at least one of the deviation of the width dimension and the deviation of the height dimension. It can be determined whether the deviation of the width dimension and / or the deviation of the height dimension is greater than the preset deviation threshold. If not, it means that the deviation between the user's desired size and the reference size is small. In this case, the reference size is used as the preset size, taking into account the user's personalized needs to a certain extent, ensuring that the chart has a good display effect when it is initially displayed, while also avoiding problems such as unreasonable size caused by over-catering to user expectations, thereby avoiding chart information overflow or waste of pop-up container space, ensuring the integrity and reliability of the chart display, and improving the chart's adaptability to different display devices.

[0071] Optionally, obtaining the preset size based on the reference size further includes:

[0072] When the deviation between the user's expected size and the reference size is greater than a preset deviation threshold, determining whether the user's expected size is greater than a preset limit size;

[0073] If so, the preset limit size is used as the preset size;

[0074] If not, the user's desired size is used as the preset size.

[0075] In this embodiment, the preset limit size can be set according to the display size of the display device. For example, the width size (or height size) in the preset limit size can be set to 90% of the width size (or height size) in the display size. When the deviation between the user's expected size and the reference size is greater than the preset deviation threshold, it means that the deviation between the user's expected display size and the reference size is large. At this time, it can be judged whether the user's expected size is greater than the preset limit size. If so, it means that displaying the chart in the user's expected size may have problems such as incomplete display. At this time, the preset limit size is used as the preset size. If not, it means that the user's expected size has not exceeded the display range limit of the display device. The user's expected size can be used as the preset size to give priority to responding to the user's actual needs.

[0076] In this way, when it is impossible to take into account both user expectations and better display effects (that is, the deviation between the user's expected size and the reference size is greater than the preset deviation threshold), this embodiment sets a reasonable size upper limit for the chart size, effectively avoiding the problem that the user's expected size is too large and exceeds the display range of the display device, resulting in the chart being unable to be displayed normally and completely. This comprehensively improves the flexibility, adaptability and reliability of the initial size setting of the chart.

[0077] Optionally, after determining the initial size of the pop-up window container displayed on the display device based on the preset size, the method further includes:

[0078] When a trigger signal corresponding to the interactive device in the preset drag control block displayed on the display device is detected, the event element pre-bound to the preset drag control block is used as a size adjustment event; wherein the event element includes at least one of border stretching and diagonal stretching.

[0079] Specifically, the preset drag control block displayed on the display device in this embodiment represents a pre-set interactive control with a specific control area. Different preset drag control blocks can be pre-bound to different event elements. In this embodiment, the event element includes at least one of border stretching and diagonal stretching. Border stretching can represent an operation event of scaling the horizontal or vertical border of the pop-up container, and diagonal stretching can represent an operation event of scaling the horizontal and vertical borders of the pop-up container at the same time. In this embodiment, the position, size, and shape of the preset drag control block can be set in advance according to the interface design and operational convenience of the pop-up container. For example, the preset drag control block bound to border stretching can be set at the border of the pop-up container, while the preset drag control block bound to diagonal stretching can be set at the vertex of the pop-up container.

[0080] In this embodiment, when a trigger signal of an interactive device (such as a signal generated when a mouse is pressed) is detected in a specific area corresponding to a preset drag control block, the event element pre-bound to the preset drag control block can be used as a size adjustment event, thereby triggering operations related to the size adjustment of the pop-up container, which is conducive to improving the convenience of size adjustment. In this embodiment, the event elements include at least one of border stretching and diagonal stretching. The diversified event element design further improves the richness of size adjustment. Border stretching can meet the user's needs for stretching one side or multiple sides of the pop-up container to achieve adjustment of the chart size in the horizontal or vertical direction. Diagonal stretching can achieve overall scaling in both the horizontal and vertical directions at the same time, further improving the flexibility of size adjustment.

[0081] Optionally, the initial size includes a width size and a height size; the border stretching includes a horizontal border stretching and a vertical border stretching; and determining a target size corresponding to the pop-up container based on the initial size, the size adjustment event, and the drag displacement corresponding to the interactive device after the size adjustment event is triggered includes:

[0082] When the size adjustment event is horizontal border stretching, the width size is symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size;

[0083] When the size adjustment event is vertical border stretching, the height size is symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size;

[0084] When the size adjustment event is diagonal stretching, the width and height are simultaneously increased or decreased by the length of the drag displacement according to the direction of the drag displacement to obtain the target size.

[0085] Specifically, in this embodiment, the initial size includes a width size and a height size, which respectively represent the horizontal and vertical length values ​​of the pop-up container in the initial state, and together determine the initial size range of the pop-up container. In this embodiment, the event elements include border stretching and diagonal stretching, wherein the border stretching includes horizontal border stretching and vertical border stretching. Accordingly, in this embodiment, the preset drag control block may include a horizontal drag control block set on the right side border of the rectangular pop-up container (which can be pre-bound with the horizontal border stretching), a vertical drag control block set on the lower side border of the rectangular pop-up container (which can be pre-bound with the vertical border stretching), and a diagonal drag control block set at the lower right vertex of the rectangular pop-up container (which can be pre-bound with the diagonal stretching). In this embodiment, horizontal border stretching means scaling the size of the pop-up container only in the horizontal direction (i.e., the width direction), and vertical border stretching means scaling the size of the pop-up container only in the vertical direction (i.e., the height direction).

[0086] In one embodiment, the direction and length of the drag displacement can be determined based on the initial coordinates when the interactive device triggers the size adjustment event, and the end point coordinates when the trigger signal corresponding to the interactive device disappears. For example, the drag distance between the initial coordinates and the end point coordinates can be used as the length of the drag displacement. On this basis, the center coordinates corresponding to the center point of the pop-up container can be obtained, and the first distance between the center coordinates and the initial coordinates, and the second distance between the center coordinates and the end point coordinates can be determined respectively. When the first distance is greater than the second distance, the direction of the drag displacement is indicated as the direction close to the pop-up container, and it can be considered that the user expects to reduce the size of the pop-up container (that is, the expected target size is smaller than the initial size). When the first distance is less than the second distance, the direction of the drag displacement is indicated as the direction away from the pop-up container, and it can be considered that the user expects to increase the size of the pop-up container (that is, the expected target size is larger than the initial size).

[0087] In one embodiment, when the size adjustment event is horizontal border stretching, the width dimension can be symmetrically increased or symmetrically decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size. For example, assuming that the width dimension in the initial size is 200 pixels and the height dimension is 150 pixels, the direction of the drag displacement is the direction away from the center coordinate, and the length of the drag displacement is 25 pixels. Then the width dimension of the pop-up container can be increased by 25 pixels in the horizontal direction, and the width dimension corresponding to the target size is 250 pixels, and the height dimension is still 150 pixels. Similarly, when the size adjustment event is vertical border stretching, the height dimension can be symmetrically increased or symmetrically decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size, which will not be repeated here. When the size adjustment event is diagonal stretching, the width dimension and the height dimension can be simultaneously increased or simultaneously decreased by the length of the drag displacement according to the direction of the drag displacement to obtain the target size. For example, if the initial size is 200 pixels wide and 150 pixels high, and the drag displacement is towards the pop-up container, the drag displacement length is 20 pixels. You need to reduce the width and height by 20 pixels in both the horizontal and vertical directions, resulting in a width of 180 pixels and a height of 130 pixels for the target size.

[0088] In this embodiment, when the size adjustment event is horizontal or vertical border stretching, the width or height dimensions are symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size. This allows the pop-up container to be accurately controlled in the corresponding direction when the size is adjusted horizontally or vertically. At the same time, the bilateral symmetrical adjustment ensures that the chart display is always centered, ensuring the chart display effect. When the size adjustment event is diagonal stretching, this embodiment simultaneously increases or decreases the width and height dimensions by the length of the drag displacement according to the direction of the drag displacement to obtain the target size, which can achieve overall scaling adjustment of the pop-up container and quickly meet the user's need to adjust the overall size of the chart. In this way, this embodiment sets different size adjustment strategies for different size adjustment events triggered by the interactive device, providing users with diverse and precise size adjustment methods while ensuring the chart display effect, comprehensively improving the flexibility, accuracy, and stability of chart display effect adjustment.

[0089] Optionally, adjust the popup container based on the target size and trigger a chart redraw, including:

[0090] Map the target size to the configuration parameters of the pop-up container and adjust the size of the pop-up container according to the configuration parameters;

[0091] When the size change of the popup container is detected, a redraw operation is triggered.

[0092] Specifically, the configuration parameters referred to in this embodiment represent a series of setting information related to the pop-up container, which may include parameter items that determine the size of the pop-up container (such as attribute values ​​used to define the window size corresponding to the pop-up container). After obtaining the target size, the target size can be mapped to the configuration parameters. For example, the target size may include a target width and a target height. Based on a pre-established mapping relationship, the values ​​of the target width and target height can be assigned to the corresponding attribute values ​​corresponding to the width and height of the pop-up container in the configuration parameters, thereby adjusting the size of the pop-up container based on the configuration parameters.

[0093] In this embodiment, the existing monitoring mechanism can be used to monitor the size of the pop-up container in real time. When the size change of the pop-up container is detected, the chart redrawing operation can be triggered (such as calling the existing chart redrawing method in ECharts) to redetermine the position, size, and proportional relationship of each element of the chart (such as coordinate axis, data series, etc.) in the pop-up container after the size adjustment, so as to re-render the chart in the pop-up container, which is conducive to ensuring that the chart can be correctly and completely displayed in the adjusted pop-up container.

[0094] like Figure 2As shown, an embodiment of the present invention provides a chart display device 200, which is applied to a display device. The display device includes an interaction device and a display device. The chart display device 200 includes:

[0095] a determination module 210 for determining an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and displaying a chart in the pop-up window container;

[0096] a triggering module 220 configured to, upon detecting a size adjustment event triggered by the interaction device, determine a target size corresponding to the pop-up container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event;

[0097] The adjustment module 230 is configured to adjust the pop-up window container based on the target size and trigger a redrawing operation of the chart.

[0098] The technical effects that can be produced by the chart display device and the chart display method provided in this embodiment are basically the same, and will not be described in detail here.

[0099] like Figure 3 As shown, an electronic device 300 provided by an embodiment of the present invention includes a memory 310 and a processor 320; the memory 310 is used to store computer programs; the processor 320 is used to implement the above-mentioned chart display method when executing the computer program.

[0100] In other words, an electronic device 300 includes a memory 310 and a processor 320 coupled to the memory 310; the memory 310 is configured to store a computer program; and the processor 320 is configured to perform the following operations when executing the computer program:

[0101] Determining an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and displaying a chart in the pop-up window container;

[0102] When a size adjustment event triggered by the interaction device is detected, determining a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event being triggered;

[0103] The pop-up window container is adjusted based on the target size, and a redrawing operation of the chart is triggered.

[0104] The electronic device and the chart display method provided in this embodiment can produce substantially the same technical effects, which will not be described in detail here.

[0105] An embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the above-mentioned chart display method is implemented.

[0106] In other words, a non-volatile computer-readable storage medium stores a computer program, which, when executed by a processor, causes the processor to perform the following operations:

[0107] Determining an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and displaying a chart in the pop-up window container;

[0108] When a size adjustment event triggered by the interaction device is detected, determining a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event being triggered;

[0109] The pop-up window container is adjusted based on the target size, and a redrawing operation of the chart is triggered.

[0110] The computer-readable storage medium and the chart display method provided in this embodiment can produce substantially the same technical effects, which will not be described in detail here.

[0111] An electronic device 300 that can serve as a server or client of the present invention will now be described, which is an example of a hardware device that can be applied to various aspects of the present invention. The electronic device 300 is intended to represent various forms of digital electronic computer devices, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device 300 can also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or required herein.

[0112] The electronic device 300 includes a computing unit that can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) or a computer program loaded from a storage unit into a random access memory (RAM). In the RAM, various programs and data required for device operation can also be stored. The computing unit, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0113] Those skilled in the art will understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program. The program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM). In this application, the units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the embodiments of the present invention. In addition, the functional units in the various embodiments of the present invention can be integrated into a processing unit, or each unit can exist physically separately, or two or more units can be integrated into a single unit. The above-mentioned integrated units can be implemented in the form of hardware or software functional units.

[0114] Although the present invention is disclosed as above, the protection scope of the present invention is not limited thereto. Those skilled in the art may make various changes and modifications without departing from the spirit and scope of the present invention, and these changes and modifications will fall within the protection scope of the present invention.

Claims

1. A method for displaying a chart, characterized in that: Applied to a display device, the display device includes an interaction device and a display device; the chart display method includes: Determining an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and displaying a chart in the pop-up window container; When a size adjustment event triggered by the interaction device is detected, determining a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event being triggered; The pop-up window container is adjusted based on the target size, and a redrawing operation of the chart is triggered.

2. The method for displaying a chart according to claim 1, wherein: Before determining the initial size of the pop-up window container displayed on the display device based on the preset size, the method further includes: Obtaining a historical chart type corresponding to the historical chart, a historical display size corresponding to the historical display device, and a preset optimal display size corresponding to the historical chart type under the historical display size; Taking the historical chart type and the historical display size as input and the corresponding preset optimal display size as output, a training data set is constructed; Training a preset initial model based on the training data set to obtain a size recommendation model; Obtaining a chart type corresponding to the chart and a display size corresponding to the display device; The chart type and the display size are input into the size recommendation model to obtain a reference size, and the preset size is obtained based on the reference size.

3. The method for displaying a chart according to claim 2, wherein: The obtaining the preset size based on the reference size includes: When the deviation between the acquired user desired size and the reference size is less than or equal to a preset deviation threshold, the reference size is used as the preset size.

4. The method for displaying a chart according to claim 3, wherein: The obtaining of the preset size based on the reference size further includes: When the deviation between the user desired size and the reference size is greater than the preset deviation threshold, determining whether the user desired size is greater than a preset limit size; If so, the preset limit size is used as the preset size; If not, the user desired size is used as the preset size.

5. The method for displaying a chart according to claim 1, wherein: After determining the initial size of the pop-up window container displayed on the display device based on the preset size, the method further includes: When a trigger signal corresponding to the interactive device in the preset drag control block displayed on the display device is detected, the event element pre-bound to the preset drag control block is used as the size adjustment event; wherein, the event element includes at least one of border stretching and diagonal stretching.

6. The method for displaying a chart according to claim 5, wherein: The initial size includes a width size and a height size; the border stretching includes a horizontal border stretching and a vertical border stretching; and determining a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement corresponding to the interaction device after the size adjustment event is triggered includes: When the size adjustment event is the stretching of the horizontal border, the width size is symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size; When the size adjustment event is the stretching of the vertical border, the height size is symmetrically increased or decreased by twice the length of the drag displacement according to the direction of the drag displacement to obtain the target size; When the size adjustment event is the diagonal stretching, the width and height are simultaneously increased or decreased by the length of the drag displacement according to the direction of the drag displacement to obtain the target size.

7. The method for displaying a chart according to claim 1, wherein: The adjusting the pop-up window container based on the target size and triggering the redrawing operation of the chart includes: Mapping the target size to configuration parameters corresponding to the pop-up window container, and adjusting the size of the pop-up window container according to the configuration parameters; When a size change of the pop-up window container is detected, the redrawing operation is triggered.

8. A chart display device, characterized in that: Applied to a display device, the display device includes an interactive device and a display device; the chart display device includes: a determination module, configured to determine an initial size corresponding to a pop-up window container displayed on the display device based on a preset size, and display a chart in the pop-up window container; a triggering module configured to, upon detecting a size adjustment event triggered by the interaction device, determine a target size corresponding to the pop-up window container based on the initial size, the size adjustment event, and the drag displacement of the interaction device corresponding to the size adjustment event; An adjustment module is used to adjust the pop-up window container based on the target size and trigger a redrawing operation of the chart.

9. An electronic device, characterized in that: including memory and processor; The memory is used to store computer programs; The processor is configured to implement the chart display method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that The storage medium stores a computer program, and when the computer program is executed by a processor, the chart display method according to any one of claims 1 to 7 is implemented.

Images