Data chart display method and electronic equipment

Abstract

The invention provides a data chart display method which can be applied to the technical field of data visualization. The data chart display method comprises the following steps: in response to detection that a cursor is located in a range of a first data chart in a screen display area, obtaining a first data point selected by the cursor position in the first data chart; determining to obtain a second data chart having an association relationship with the first data chart; the association relationship represents that at least one data point in the second data chart and at least one data point in the first data chart have related data features; under the condition that a second data point in the second data chart is located in the screen display area, displaying data values of the first data point and the second data point in a target display state in the screen display area; wherein the second data point and the first data point have related data characteristics. The invention further provides an electronic device.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data visualization, in particular to a data chart display method and an electronic device. BACKGROUND

[0002] In a webpage or an application, there may be a scenario of displaying multiple associated data charts on one page. Taking the scenario of analyzing hard disk running data as an example, the data change situation can be intuitively displayed by respectively drawing a curve graph of data throughput, bandwidth, time delay and the like changing with time, so as to realize comprehensive analysis of multiple parameters. In order to further improve the data visualization efficiency, multiple data charts can be associated, and when a cursor points to a data point in a data chart, the value of the data point is displayed in suspension on the data chart, and at the same time, the data points in other associated data charts with the same X-axis value (i.e. the same time) of the data point can realize suspension linkage and synchronously display the value of the data point in suspension, and the values of multiple parameters such as data throughput, bandwidth, time delay and the like at the same time are displayed in suspension, so as to reduce the difficulty of comparative analysis of data.

[0003] However, when there are many data charts in one page, multiple data charts cannot be displayed in the screen display area of the display at the same time, and when suspension linkage is performed, with the movement of the cursor in the data chart, suspension linkage processing is performed on all data charts, at this time, the browser or the application will consume a large amount of memory when rendering, causing page lag or cursor movement lag, affecting user experience. SUMMARY

[0004] In view of the above problems, the present application provides a data chart display method and an electronic device which reduce the calculation cost and improve the user experience.

[0005] According to a first aspect of the present application, a data chart display method is provided, comprising: in response to detecting that a cursor is located in a range of a first data chart in a screen display area, acquiring a first data point selected by the cursor position in the first data chart; acquiring a second data chart having an association relationship with the first data chart; the association relationship represents that at least one data point in the second data chart has a related data feature with at least one data point in the first data chart; in the case that a second data point in the second data chart is located in the screen display area, displaying the data values of the first data point and the second data point in a target display state in the screen display area; wherein the second data point has a related data feature with the first data point.

[0006] A second aspect of the present application provides an electronic device, comprising: one or more processors; a memory for storing one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the above method.

[0007] Through the embodiments of the present application, in the case that there are multiple data charts in the screen and the corresponding data points in the multiple data charts need to be suspended and linked, after a first data point is selected by the cursor, whether a second data point corresponding to the first data point is located in the screen display area is judged, and in the case that the second data point is determined to be located in the screen display area (i.e. the second data point is visible in the screen), the data value of the second data point is suspended and linked again, so that only the information of the second data point associated with the selected first data point and visible in the screen needs to be suspended and linked, and the content invisible in the screen display area does not need to be processed, thereby reducing the memory occupation and the calculation cost and improving the user experience. BRIEF DESCRIPTION OF DRAWINGS

[0008] The above content and other purposes, features and advantages of the present application will be more apparent through the following description of the embodiments of the present application with reference to the accompanying drawings, in which:

[0009] Figure 1 An application scenario diagram of the data chart display method and the electronic device according to the embodiments of the present application is schematically shown;

[0010] Figure 2 A flowchart of the data chart display method according to the embodiments of the present application is schematically shown;

[0011] Figure 3 A diagram of selecting a first data point in the data chart display method according to the embodiments of the present application is schematically shown;

[0012] Figure 4 A diagram of the relationship between a second data point and the first data point in the data chart display method according to the embodiments of the present application is schematically shown;

[0013] Figure 5 A diagram of the suspension and linkage of the second data point and the first data point in the data chart display method according to the embodiments of the present application is schematically shown;

[0014] Figure 6 A diagram of calculating a display ratio in the data chart display method according to the embodiments of the present application is schematically shown;

[0015] Figure 7 A diagram of a first positional relationship between a second data chart and a third data chart in the data chart display method according to the embodiments of the present application is schematically shown;

[0016] Figure 8 A diagram of a second positional relationship between the second data chart and the third data chart in the data chart display method according to the embodiments of the present application is schematically shown;

[0017] Figure 9 a structural block diagram of a data chart display device according to an embodiment of the present application is shown schematically; and

[0018] Figure 10 a block diagram of an electronic device suitable for implementing a data chart display method according to an embodiment of the present application is shown schematically. DETAILED DESCRIPTION

[0019] Hereinafter, embodiments of the present application will be described with reference to the accompanying drawings. It should be understood, however, that the description which follows is merely illustrative and is not intended to limit the scope of the present application. In the following detailed description of embodiments of the present application, numerous specific details are set forth in order to provide a thorough understanding of the present application. However, it will be apparent to one skilled in the art that one or more embodiments of the present application can be practiced without these specific details. In other instances, well-known structures and functions have not been described in detail in order to avoid obscuring aspects of the present application.

[0020] The terms used herein are merely used to describe specific embodiments and are not intended to limit the present application. The terms "include", "comprise" and the like used herein indicate the presence of the described features, steps, operations and / or components but do not preclude the presence or addition of one or more other features, steps, operations or components.

[0021] All terms used herein, including technical and scientific terms, have the same meanings as commonly understood by one of ordinary skill in the art unless otherwise defined. It should be noted that the terms used herein should be interpreted as having meanings consistent with the context of the present description, and should not be interpreted in an idealized or overly formal way.

[0022] In the case of using expressions similar to "at least one of A, B and C, etc.", it should generally be interpreted to include at least one of A, B or C, or any combination thereof (e.g., "a system having at least one of A, B and C" should include a system having A alone, a system having B alone, a system having C alone, a system having A and B together, a system having A and C together, a system having B and C together, and / or a system having A, B, and C together, etc.).

[0023] Figure 1 a scenario diagram of a data chart display method and an electronic device according to an embodiment of the present application is shown schematically.

[0024] As Figure 1As shown, the application scenario 100 according to this embodiment can include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 is a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 can include various connection types, such as wired, wireless communication links, or fiber optic cables, and the like.

[0025] A user can use the first terminal device 101, the second terminal device 102, the third terminal device 103 to interact with the server 105 through the network 104 to receive or send messages, and the like. Various communication client applications can be installed on the first terminal device 101, the second terminal device 102, the third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, and the like (only as examples).

[0026] The first terminal device 101, the second terminal device 102, the third terminal device 103 can be various electronic devices with display screens and supporting web browsing, including but not limited to smartphones, tablet computers, laptop computers, desktop computers, and the like.

[0027] The server 105 can be a server providing various services, such as a background management server providing support for a website browsed by a user using the first terminal device 101, the second terminal device 102, the third terminal device 103 (only as an example). The background management server can analyze and process received user requests and the like, and feed back the processing results (such as web pages, information, or data, and the like obtained or generated according to user requests) to the terminal device.

[0028] It should be noted that the data chart display method provided by the embodiments of the present application can generally be executed by the server 105. Correspondingly, the data chart display apparatus provided by the embodiments of the present application can generally be arranged in the server 105. The data chart display method provided by the embodiments of the present application can also be executed by a server or a server cluster different from the server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or the server 105. Correspondingly, the data chart display apparatus provided by the embodiments of the present application can also be arranged in a server or a server cluster different from the server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or the server 105.

[0029] It should be understood that, Figure 1The number of terminal devices, networks and servers in the foregoing is merely illustrative. Any number of terminal devices, networks and servers can be provided according to implementation needs.

[0030] The following will be based on Figure 1 the described scenario, by Figures 2-8 the data chart display method of the embodiment of the present application is described in detail.

[0031] Figure 2 The flowchart of the data chart display method according to the embodiment of the present application is schematically shown.

[0032] As Figure 2 shown, the data chart display method of the embodiment includes operation S210 to operation S230.

[0033] In operation S210, in response to detecting that the cursor is located in the range of the first data chart in the screen display area, the first data point selected by the cursor position in the first data chart is acquired.

[0034] In the embodiment of the present application, the area in which the page is displayed on the screen of the electronic device is referred to as the screen display area, and the mark indicating the current input or operation position in the screen display area is referred to as the cursor. The position of the cursor in the screen display area is monitored in real time, and in the case where it is monitored that the position of the cursor is located in the range of any one data chart, the data chart is taken as the first data chart, and the data point selected by the cursor in the first data chart is acquired, which is referred to as the first data point.

[0035] In operation S220, the second data chart having an association relationship with the first data chart is acquired; wherein the association relationship represents that at least one data point in the second data chart has a related data feature with at least one data point in the first data chart.

[0036] In embodiments of the present application, the data feature can be a time feature, for example, when the abscissa (X coordinate) of the first data chart and the second data chart are both time series, the data feature between the two data points is related, which can represent that the time points corresponding to the two data points on the abscissa have a correlation, for example, they can be the same, or have a specific interval, for example, it can be one day or one year apart. When the time points are the same, the size of different physical quantities at the same time can be reflected by comparing the data points on two data charts representing different meanings, for example, the data throughput and latency of the same hard disk at the same time; when the time points have a specific interval, the same data can be compared by comparing the data points on two data charts representing the same meaning, reflecting the same data year-on-year or month-on-month change, for example, the latency of a hard disk at the same time point the day before and the day after. In other embodiments, the data feature can also be the attribute of the data, for example, the category of the data. For the convenience of description, the scheme provided by the embodiments of the present application is described below with the case that the two data points have the same data feature.

[0037] In operation S230, in the case that the second data point in the second data chart is located in the screen display area, the data values of the first data point and the second data point are displayed in the target display state in the screen display area; wherein the second data point has a related data feature with the first data point.

[0038] In embodiments of the present application, the target display state can be floating display, and in other embodiments, the target display state can also include highlight display, bold display and other display states, to intuitively display the positions and / or data values of the first data point and the second data point.

[0039] In embodiments of the present application, after the cursor selects one first data point, it is determined whether the second data point corresponding to the first data point is located in the screen display area, and in the case that the second data point is located in the screen display area (i.e. the second data point is visible in the screen), the data value of the second data point is displayed in the floating linkage, so that only the second data point associated with the selected first data point and visible in the screen is displayed in the floating linkage, without processing the content invisible in the screen display area, which not only efficiently realizes the floating linkage of the data chart in the screen display area, but also reduces the memory occupation and calculation cost, and improves the user experience.

[0040] Data charts can display data information through graphics, so that data is easier to understand, analyze and interpret. Common types of data charts include bar charts, line charts, scatter plots, etc. In embodiments of the present application, the data chart display method of the present application is described by taking a line chart as an example, which can be understood that the method is also applicable to the floating linkage of other various types of data charts.

[0041] In the embodiments of the present application, the data chart display method provided by the present application is described by taking the example of realizing the suspension linkage of multiple data charts in a browser page. In some other embodiments, the data chart display method can also be realized in an application, which is not limited here.

[0042] Before operation S210, the method further includes: in response to receiving a page loading instruction, obtaining original data of multiple data charts to be loaded in the page; and loading the multiple data charts at predetermined positions of the page based on the original data.

[0043] It can be understood that multiple predetermined positions can be pre-set in the page for loading different data charts on demand. The page can be a web page that can be loaded in a browser, has multiple predetermined positions, and can load data charts at the predetermined positions. According to business needs, after receiving a page loading instruction, the original data corresponding to the data charts to be loaded at the predetermined positions of the page is first called. The original data can be stored in the form of an array. Taking a curve chart as an example, the original data corresponding thereto can be a two-dimensional array, wherein one dimension of the two-dimensional array contains the data of each data point in the curve chart on the X axis, and the other dimension contains the data of each data point in the curve chart on the Y axis. After obtaining the original data, the data chart can be loaded according to the original data.

[0044] In some embodiments, the data point can be considered to be selected when the cursor position coincides with the position of the data point in the first data chart. In order to reduce the operation difficulty and improve the user experience, in the embodiments of the present application, the cursor position does not need to coincide with the position of the data point, but only needs to be located within the range of the first data chart, so that the data point meeting the condition can be automatically determined as the first data point and the first data point is selected.

[0045] In the embodiments of the present application, obtaining the first data point selected by the cursor position in the first data chart includes: obtaining a data point closest to the cursor position in a predetermined direction in the first data chart, and taking the data point as the first data point selected by the cursor position in the first data chart; wherein the predetermined direction is a direction of any coordinate axis of the first data chart.

[0046] Figure 3 A schematic diagram of selecting a first data point in a data chart display method according to an embodiment of the present application is schematically shown.

[0047] As Figure 3As shown, a first data chart 330 is displayed in the screen display area 310. The cursor 320 can move in the screen display area 310. The first data chart 330 in the figure is a curve chart. Considering the data displayed in the curve chart, generally, the X axis is a time sequence, representing the time corresponding to each data point, and the Y axis is the specific value corresponding to the time. Therefore, in order to realize the multi-table linkage, the Y axis direction can be taken as the predetermined direction, when the cursor 320 moves into the range of the first data chart 330, the data point closest to the cursor in the Y axis direction (i.e. vertically) at the cursor position is found as the selected first data point 340. In some other embodiments, the first data point can also be determined according to the X axis direction corresponding to the cursor position according to actual needs, which is not limited here.

[0048] In some embodiments, when the cursor moves in the range of the first data chart, the corresponding first data point can be determined and selected in real time according to the cursor position, and it can also be set to lock the position of the first data point corresponding to the cursor when clicking, and not to update the selected first data point when the cursor moves, in response to receiving a clicking instruction at the first data chart or the first data point.

[0049] In operation S220, a second data chart having an association relationship with the first data chart is obtained. In the embodiments of the present application, the second data chart has an association relationship with the first data chart, which means that at least one data point in the second data chart has a data feature related to any data point in the first data chart. The data feature here can be a time feature, that is, for two curve charts, the X axis coordinates represent time, then the second data chart has an association relationship with the first data chart, which means that at least one data point in the second data chart corresponds to (for example, the same) a time point, and the data point with the same time point can be found in the first data chart. When the cursor points to one of the data points, the other data point is suspended in linkage, facilitating the viewing of the size of different parameters at the same time point.

[0050] In the embodiments of the present application, the association relationship can be represented by association data. Specifically, obtaining the second data chart having an association relationship with the first data chart includes: obtaining an association array of the first data chart; parsing the association array to obtain an identifier pointing to the second data chart having an association relationship with the first data chart; and finding the second data chart according to the identifier.

[0051] In the embodiments of the present application, each data chart has an associated array in which identifiers pointing to other data charts having an association with the data chart are stored. Taking the first data chart as an example, the associated array of the first data chart can include one or more identifiers, each of which points to a second data chart having an association with the first data chart. The identifier can be an index corresponding to the second data chart, and when it is necessary to find the second data chart having an association with the first data chart, the identifier in the associated array of the first data chart is parsed to quickly and accurately determine one or more second data charts according to the identifier, thereby improving the data processing efficiency and response speed.

[0052] In addition, in some embodiments, the identifier can also be used to indicate the relevance of the data features. For example, the identifier can include an identification bit, which can be used to indicate what kind of relevance exists between the data points in the first data chart and the second data chart, for example, when the data feature is a time feature, the identification bit can be used to indicate whether the time features of the two data points are the same or have a specific interval.

[0053] In the embodiments of the present application, the associated array can be generated by the following operations.

[0054] Obtaining a first array of the first data chart, the first array including the data features of each data point in the first data chart.

[0055] Obtaining a second array of each data chart other than the first data chart, the second array including the data features of each data point in the data chart corresponding to the second array.

[0056] Determining the second array having a relevant data feature with the first array, and adding an identifier pointing to the second array to the associated array.

[0057] In the embodiments of the present application, the associated array is generated by array comparison, which can quickly associate the data charts of the data points having relevant data features, thereby facilitating the linkage of the line charts.

[0058] Specifically, the first array includes data features of each data point in the first data chart, which can be time features, for example, can be a time point specifically corresponding to each data point, or can be a timestamp representing the time point corresponding to each data point. Similarly, the second array of all other data charts in the page is generated. When it is necessary to determine the second data chart having the correlation relationship with the first data chart, each second array is compared with the first array, the data chart corresponding to the second array containing the same element is taken as the second data chart having the correlation relationship with the first data chart, and the identifier pointing to the data chart is added to the correlation array of the first data chart.

[0059] In the embodiment of the present application, the correlation array is generated each time the page is loaded or refreshed, and is directly read in the process of hovering linkage, so that the response speed is greatly improved. When entering the page for the first time, the original data of each data chart on the current page is requested from the background, but no rendering and mapping are performed. The obtained original data is a plurality of two-dimensional arrays, including X-axis data and Y-axis data. The X-axis data is usually time series data, that is, an array composed of a plurality of timestamps, respectively corresponding to a plurality of time points. By judging whether there is an overlapping area in the X-axis data in each two-dimensional array, it is judged whether the data charts corresponding to the two two-dimensional arrays have a correlation relationship. After the judgment is completed, the correlation array corresponding to each data chart is obtained. Subsequently, the rendering and mapping operation of each data chart on the page can be performed. Each time the page is refreshed, the above steps are executed again to update the correlation array of each data chart. Thus, it is not necessary to perform the update operation of the correlation array in the process of page display, and the page response efficiency is greatly improved.

[0060] Figure 4 A schematic view showing the relationship between the second data point and the first data point according to the data chart display method of the embodiment of the present application is shown schematically.

[0061] As Figure 4As shown, the first data chart 330 and the second data chart 340 are simultaneously displayed in the screen display area 310, and the first data point 340 in the first data chart 330 is selected when the cursor 320 is located in the range of the first data chart 330. For ease of description, the X-axes of the second data chart 430 and the first data chart 330 represent time, and have the same range. The second data chart 430 and the first data chart 330 can represent different parameters, and the data trends can be different. For ease of description, the trends of the second data chart 430 and the first data chart 330 are the same. After the first data point 340 is selected, the second data point 440 with the same X-axis coordinate in the second data chart 430 can be obtained according to the X-axis coordinate of the first data point 340. The first data point 340 and the second data point 440 can represent the parameter values of different parameters at the same time point. For example, if the first data chart represents the data throughput of a hard disk, and the second data chart represents the latency of the hard disk, the position indicated by the cursor corresponds to the first time, the first data point 340 represents the data throughput of the hard disk at the first time, and the second data point 440 represents the latency of the hard disk at the first time. The linkage of the two can simultaneously display the data throughput and the latency at the first time, so that the data can be conveniently compared horizontally, and subsequent operations such as judging the working state of the hard disk and finding faults can be performed based on the data.

[0062] It should be noted that the dashed line in the figure only indicates the positional relationship, and is not displayed in actual operation.

[0063] It should be noted that in the embodiments of the present application, the first data chart and the second data chart have a correlation relationship, and only indicates that there are data points with the same time characteristics in the two data charts. However, it is not necessarily that there is a second data point with the same data characteristics as the selected first data point in the first data chart in each second data chart. When the floating linkage needs to be implemented, each second data chart is traversed, and subsequent operations are performed on the second data chart with the second data point. On the one hand, the data is not missed, and on the other hand, the data of all data charts does not need to be processed every time the data is searched, which can improve the searching efficiency.

[0064] In operation S230, for the determined second data point with the same data characteristics as the first data point, it is judged whether the second data point is located in the screen display area, that is, whether the second data point is visible in the screen display area. When it is judged that the second data point is located in the screen display area, the first data point and the second data point are displayed in the target display state.

[0065] In the embodiments of the present application, the second data point in the second data chart is located in the screen display area according to the following steps.

[0066] A second positional relationship between the second data chart and the screen display area is obtained.

[0067] In a case where the second position relationship represents that the second data chart is partially located in the screen display region, a visible chart region of the second data chart in the screen display region is obtained.

[0068] A position coordinate of a second data point in the second data chart is obtained.

[0069] In a case where the position coordinate is located in the visible chart region, it is determined that the second data point is located in the screen display region.

[0070] In an embodiment of the present application, in the process of determining whether the second data point is located in the screen display region, it is first determined whether the second data chart is visible, and in a case where the second data chart is partially visible (at this time, it cannot be determined which specific data points in the second data chart are visible), it is further determined whether the second data point is visible. Compared with directly determining whether each second data point is visible, the operation amount of the process of first determining whether the second data chart is visible is smaller, the processing speed is faster, and only the second data chart that is partially visible needs to be further determined whether the second data point is visible, which reduces the data processing difficulty and operation amount and improves the processing efficiency.

[0071] In some embodiments, in a case where the second position relationship represents that all regions of the second data chart are located in the screen display region, that is, at this time, the second data chart is completely visible in the screen display region, it can be directly determined that the second data point is located in the screen display region.

[0072] In some embodiments, in a case where the second position relationship represents that all regions of the second data chart are not located in the screen display region, that is, at this time, the second data chart is completely invisible in the screen display region, it can be directly determined that the second data point is not located in the screen display region, and the second data point does not need to be suspended and linked.

[0073] In an embodiment of the present application, the second position relationship between the second data chart and the screen display region can be directly determined by an algorithm in an existing programming language. By comparing the position relationship between each boundary of the second data chart and each boundary of the screen display region, it is determined whether the second data chart is completely located in the screen display region, partially located in the screen display region, or not located in the screen display region.

[0074] In an embodiment of the present application, displaying the data values of the first data point and the second data point in the target display state in the screen display region includes the following operations.

[0075] The first position of the first data point is obtained. The first position of the first data point can be represented by coordinates of the first data point in a coordinate system established based on the first data chart, or represented by coordinates of the first data point in a coordinate system established based on the screen display area. To simplify calculation, the first position is represented by coordinates of the first data point in a coordinate system established based on the first data chart, which can be directly calculated by using an existing function, thereby obtaining the position of the first data point in the first data chart.

[0076] A first target display area of the first data point is determined according to the first position; the first target display area is located in the screen display area. To realize the floating linkage and more intuitively display the data value of the first data point, the first target display area can be an area near the first data point, for example, the first target display area can be a rectangular range with a specific size (for example, 100 pixels long and 50 pixels high), and one of the corner points is located at a position with a set interval (for example, 10 pixels) from the first data point.

[0077] The data value of the first data point is displayed in the first target display area in a floating manner. The floating display can be realized by creating a new floating display layer, a floating display layer is newly created above the first data chart, and the data value of the first data point is displayed in the floating display layer in a floating manner in a region corresponding to the first target display area. The displayed data value of the first data point can be a value corresponding to the Y axis of the first data point, or can include a value corresponding to the X axis and a value corresponding to the Y axis of the first data point.

[0078] A second position of a second data point is obtained. The second position of the second data point is obtained in the same manner as the first position of the first data point, which will not be described herein again.

[0079] A second target display area of the second data point is determined according to the second position; the second target display area is located in the screen display area, and the second target display area does not intersect with the first target display area. The second target display area is determined in the same manner as the first target display area, which will not be described herein again.

[0080] The data value of the second data point is displayed in the second target display area in a floating manner. The data value of the second data point is displayed in the same manner as the data value of the first data point, which will not be described herein again.

[0081] In the embodiments of the present application, the floating display position is determined according to the positions of the first data point and the second data point, the data values of the first data point and the second data point can be intuitively displayed in the screen display area, and the floating linkage between the second data point and the first data point is realized.

[0082] Figure 5Fig. 2 is a schematic diagram of a data chart display method according to an embodiment of the present application, showing a second data point and a first data point in a hovering linkage.

[0083] As shown in Fig. 2, in an embodiment of the present application, a first target display region 510 can be determined according to a first position of a first data point 340, and the first target display region 510 can be a region within a certain range near the first position, for example, the first target display region can be a rectangular region with a length of 100 pixels and a height of 50 pixels, and a corner point of a lower right corner of the first target display region is spaced apart from the first data point by 10 pixels. Similarly, a second target display region 520 can also be determined according to a second position of a second data point 440. Figure 5

[0084] In an embodiment of the present application, a data value A of the first data point 340 can be displayed in a hovering manner at the first target display region 510, and a data value B of the second data point 440 can also be displayed in a hovering manner at the second target display region 520.

[0085] In some other embodiments, the second target display region and the first target display region can also be the same region, that is, the data values of the first data point and the second data point are displayed in a hovering manner in the same region, for example, the first target region is directly used as the second target region, so as to facilitate intuitive comparison of the data values of multiple data points having a related data characteristic (for example, at the same time).

[0086] In an embodiment of the present application, in the process of determining whether the second data point is located in the screen display region, a display ratio of each second data chart having the second data point in the screen display region is also calculated synchronously, so as to facilitate determination of whether the second data point is still located in the screen display region when the page is scrolled.

[0087] In an embodiment of the present application, the data chart display method described above further includes the following operations.

[0088] A display ratio of the second data chart in the screen display region is obtained, wherein the display ratio is calculated according to a ratio of an area of the screen display region in which the second data chart is located to an area of the second data chart.

[0089] In a case where the display ratio changes to a target value, a first positional relationship between a second data point in the second data chart and the screen display region is determined.

[0090] In a case where the first positional relationship indicates that the second data point is located in the screen display region, a data value of the second data point is displayed in the target display region.

[0091] ​In the embodiments of the present application, the size of the display ratio of the second data chart in the screen display area when the screen display area changes, i.e., when the page is scrolled, is used to determine whether to update the judgment of whether the second data point is visible. Only when the display ratio reaches a preset target value, the operation of judging whether the second data point is visible is performed, so that it is not necessary to judge the visibility of the second data point in real time when the page is scrolled, and it is also not necessary to distinguish the scrolling state of the page, such as first scrolling up and then scrolling down, or a scenario including horizontal scrolling and vertical scrolling at the same time. Only when the display ratio reaches a certain value, the judgment is performed, which reduces the difficulty of data processing and the amount of calculation, and improves the processing efficiency.

[0092] Figure 6 A schematic diagram of calculating the display ratio according to the data chart display method of the embodiments of the present application is shown.

[0093] As shown in Figure 6 When the page is scrolled, a situation that part of the second data chart is located in the screen display area and another part is out of the screen display area may occur. The dashed line in the figure represents the part of the second data chart 430 that is out of the screen display area 310. The display ratio of the second data chart can be calculated according to the ratio of the area of the first local part 630 of the second data chart located in the screen display area to the area of the second data chart 430.

[0094] The area of the first local part 630 and the area of the second data chart 430 can be directly calculated by calling a function in the existing programming language.

[0095] The position relationship between the second data chart and the screen display area can be determined according to the display ratio of the second data chart. For example, when the display ratio is 100%, it indicates that the entire area of the second data chart is located in the screen display area, i.e., the second data chart is completely visible in the screen display area at this time; when the display ratio is 0%, it indicates that none of the entire area of the second data chart is located in the screen display area, i.e., the second data chart is completely invisible in the screen display area at this time; when the display ratio is greater than 0% and less than 100%, it indicates that part of the second data chart is located in the screen display area.

[0096] When the number of data charts in the page is too large to display all the data charts in the screen display area, the user needs to scroll the page to view the data charts that are not displayed or not completely displayed. The operation of scrolling the page can be triggered by the user through the mouse wheel, through the keyboard operation, or through the cursor dragging the scroll bar. When the cursor is dragged to scroll the bar, the cursor is not located in the range of any data chart at this time. In order to improve the user experience, the first data point corresponding to the cursor leaving the data chart is recorded as the selected first data point in the state that the cursor is not in the range of the data chart.

[0097] When the page is scrolled, the display ratio of the second data chart can change. During the change of the display ratio, a relationship between the display ratio and a preset target value is determined. In a case where the target value is reached during the change of the display ratio, the first positional relationship between the second data points in the second data chart and the screen display area is determined again, and it is determined whether the second data points in the second data chart are located in the screen display area.

[0098] The preset target value can be one or more fixed values. In an embodiment of the present application, the preset target value is an integer multiple of 10%, i.e., 10%, 20%, 30%, …, 80%, 90%, and 100%. That is, during the scrolling of the page, whenever the display ratio is equal to an integer multiple of 10%, it is determined whether the second data points in the second data chart are located in the screen display area. In some other embodiments, the target value can also be other values, which are not limited herein.

[0099] In an embodiment of the present application, since the positions of the data charts in the page are fixed, the relative positional relationships of the data charts are also fixed, and then the positions of the data charts not in the screen display area can be further predicted according to the relative positions. Specifically, the data chart display method further includes the following operations.

[0100] In a case where the display ratio changes, the first moving direction of the second data chart relative to the screen display area is determined.

[0101] The relative position between the second data chart and a third data chart adjacent to the second data chart is obtained.

[0102] According to at least one of the first moving direction and the change state of the display ratio, the positional change relationship of the third data chart relative to the screen display area is determined according to the relative position.

[0103] In a case where the positional change relationship is entering the screen display area, a pre-rendering operation is performed on the third data chart.

[0104] In an embodiment of the present application, the positional change relationship between the third data chart adjacent to the second data chart and the screen display area is predicted according to the display ratio of the second data chart, and the third data chart is pre-rendered when the third data chart is about to enter the screen display area, so that the positional change relationship between the third data chart and the screen display area is quickly predicted without complex calculation, the processing efficiency is improved, the quick response of the page is ensured, and the third data chart is rendered again when entering the screen display area.

[0105] For each data chart in the screen display area or at least partially in the screen display area, the position change of the data chart can be quickly determined by its display ratio in the screen display area. When the display ratio quickly decreases, it indicates that the data chart is leaving the screen display area. When the display ratio quickly increases, it indicates that the data chart is entering the screen display area. The updating of the second data chart can be paused when the display ratio decreases to below a display ratio threshold (for example, 10%) to save resources.

[0106] However, for a data chart that is not displayed in the screen display area, it is difficult to directly calculate the relative position between the data chart and the screen display area. If the data chart that does not enter the screen display area is also rendered in the background to ensure response speed, the calculation cost is greatly increased. If the data chart is not rendered in advance and is rendered during the process of entering the screen display area, the page response speed and user experience will be affected.

[0107] To this end, in the embodiments of the present application, the relative position between the second data chart and the third data chart is used as a basis to determine the position change relationship of the third data chart relative to the screen display area according to the first moving direction and the display ratio of the second data chart during the page scrolling.

[0108] Specifically, the first moving direction of the second data chart relative to the screen display area, in combination with the relative position between the second data chart and the third data chart, can determine the relative motion direction between the third data chart and the screen display area. The change state (increase, decrease or unchanged) of the display ratio of the second data chart can indicate the relative position between the second data chart and the screen display area, thereby predicting the position change relationship of the third data chart relative to the screen display area.

[0109] Figure 7 A schematic diagram of a first position relationship between a second data chart and a third data chart in a data chart display method according to an embodiment of the present application is shown. The dashed line in the diagram represents the part not in the screen display area, and the arrow direction represents the page scrolling direction. As shown in the diagram, Figure 7 For example, in the diagram, the third data chart 710 is located below the second data chart 430. When the page is scrolled upwards, the display ratio of the second data chart increases, and the first moving direction of the second data chart relative to the screen display area 310 is upwards. It can be determined that the position change relationship of the third data chart 710 relative to the screen display area is entering the screen display area, and the pre-rendering operation of the third data chart 710 can be performed before the third data chart 710 enters the screen display area.

[0110] Figure 8This diagram schematically illustrates a second positional relationship between a second data chart and a third data chart in a data chart display method according to an embodiment of this application. The dashed lines in the diagram represent portions not within the screen display area, and the arrows indicate the page scrolling direction. Figure 8 As shown, taking the illustrated direction as an example, the third data chart 710 is located diagonally below the second data chart 430. When the page scrolls upwards, the display ratio of the second data chart 430 remains unchanged, moving upwards relative to the first movement direction of the screen display area 310. At this time, it is necessary to determine the relative position of the second data chart and the screen display area based on the display ratio of the second data chart 430. Then, combined with the relative position between the third data chart 710 and the second data chart 430, it is determined that the third data chart 710 will not enter the screen display area, so there is no need to perform pre-rendering operations.

[0111] In the embodiments of this application, the data chart display method provided above further includes: performing a pause rendering operation on the third data chart when the position change relationship is far away from the screen display area and the display ratio is less than the display ratio threshold.

[0112] In the embodiments of this application, when it is determined that the positional change of the third data chart relative to the screen display area is far away from the screen display area, it can be determined that when the page is scrolled in the current page scrolling direction, the third data chart will not enter the screen display area, and when the display ratio of the second data chart adjacent to it is less than the display ratio threshold (e.g., 50%), it indicates that the third data chart is far away from the screen display area. At this time, the rendering operation of the third data chart is paused to save computing resources.

[0113] In embodiments of this application, when the page is exited, the data charts on the page can be destroyed to reduce memory usage.

[0114] Based on the above-described data chart display method, this application also provides a data chart display device. The following will be combined with... Figure 9 The device is described in detail.

[0115] Figure 9 A schematic block diagram of a data chart display device according to an embodiment of this application is shown.

[0116] like Figure 9 As shown, the data chart display device 900 of this embodiment includes a first acquisition module 910, a second acquisition module 920, and a processing module 930.

[0117] The first obtaining module 910 is configured to, in response to detecting that the cursor is located within a range of a first data chart in a screen display area, obtain a first data point selected by the cursor position in the first data chart. In an embodiment, the first obtaining module 910 can be configured to perform operation S210 described above, and details are not repeated here.

[0118] The second obtaining module 920 is configured to obtain a second data chart having an association relationship with the first data chart, wherein the association relationship indicates that at least one data point in the second data chart has a relevant data feature with at least one data point in the first data chart. In an embodiment, the second obtaining module 920 can be configured to perform operation S220 described above, and details are not repeated here.

[0119] The processing module 930 is configured to, in a case where a second data point in the second data chart is located in the screen display area, display data values of the first data point and the second data point in the target display state in the screen display area, wherein the second data point has a relevant data feature with the first data point. In an embodiment, the processing module 930 can be configured to perform operation S230 described above, and details are not repeated here.

[0120] According to an embodiment of the present application, the processing module 930 is further configured to obtain a display ratio of the second data chart in the screen display area, the display ratio being calculated according to a ratio of an area of the screen display area where the second data chart is located to an area of the second data chart, and in a case where the display ratio changes to a target value, determine a first positional relationship between the second data point in the second data chart and the screen display area, and in a case where the first positional relationship indicates that the second data point is located in the screen display area, display a data value of the second data point in the target display area.

[0121] According to an embodiment of the present application, the processing module 930 is further configured to, in a case where the display ratio changes, determine a first moving direction of the second data chart relative to the screen display area, obtain a relative position between the second data chart and a third data chart adjacent to the second data chart, and according to the first moving direction and a change state of the display ratio, determine a positional change relationship of the third data chart relative to the screen display area based on the relative position, and in a case where the positional change relationship is entering the screen display area, perform a pre-rendering operation on the third data chart.

[0122] According to an embodiment of the present application, the processing module 930 is further configured to, in a case where the positional change relationship is away from the screen display area and the display ratio is less than a display ratio threshold, perform a pause rendering operation on the third data chart.

[0123] According to an embodiment of the present application, the processing module 930 is further configured to determine whether the second data point in the second data chart is located in the screen display region according to the following manner: obtaining a second position relationship between the second data chart and the screen display region; in a case where the second position relationship indicates that a part of the second data chart is located in the screen display region, obtaining a visible chart region of the second data chart in the screen display region; obtaining a position coordinate of the second data point in the second data chart; and in a case where the position coordinate is located in the visible chart region, determining that the second data point is located in the screen display region.

[0124] According to an embodiment of the present application, the second obtaining module 920 is further configured to obtain an association array of the first data chart, parse the association array to obtain an identifier pointing to the second data chart having an association relationship with the first data chart, and find the second data chart according to the identifier.

[0125] According to an embodiment of the present application, the second obtaining module 920 is further configured to obtain the association array by the following manner: obtaining a first array of the first data chart, the first array including data features of each data point in the first data chart; obtaining a second array of each data chart other than the first data chart, the second array including data features of each data point in the data chart corresponding to the second array; determining the second array having a related data feature with the first array, and adding an identifier pointing to the second array into the association array.

[0126] According to an embodiment of the present application, the processing module 930 is further configured to obtain a first position of the first data point, determine a first target display region of the first data point according to the first position, and display a data value of the first data point in the first target display region; obtain a second position of the second data point, determine a second target display region of the second data point according to the second position, and display a data value of the second data point in the second target display region.

[0127] According to an embodiment of the present application, the first obtaining module 910 is further configured to obtain a data point in the first data chart closest to the cursor position in a predetermined direction, and take the data point as the first data point selected by the cursor position in the first data chart; wherein the predetermined direction is a direction of any coordinate axis of the first data chart.

[0128] According to an embodiment of the present application, any of the first obtaining module 910, the second obtaining module 920 and the processing module 930 can be combined in one module, or any of them can be split into multiple modules. Alternatively, at least part of the function of one or more of these modules can be combined with at least part of the function of other modules, and implemented in one module. According to an embodiment of the present application, at least one of the first obtaining module 910, the second obtaining module 920 and the processing module 930 can be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on chip, a system on board, a system in package, an application specific integrated circuit (ASIC), or any other reasonable manner of integrating or packaging a circuit, etc. in hardware or firmware, or implemented in any one of software, hardware and firmware or in a proper combination of any of them. Alternatively, at least one of the first obtaining module 910, the second obtaining module 920 and the processing module 930 can be at least partially implemented as a computer program module which, when executed, can perform the corresponding function.

[0129] Figure 10 A block diagram of an electronic device suitable for implementing the data chart display method according to an embodiment of the present application is schematically shown.

[0130] As shown in Figure 10 The electronic device 1000 according to an embodiment of the present application includes a processor 1001 which can perform various appropriate actions and processes according to a program stored in a read only memory (ROM) 1002 or a program loaded from a storage portion 1008 into a random access memory (RAM) 1003. The processor 1001 can include, for example, a general purpose microprocessor (e.g. a CPU), an instruction set processor and / or a related chipset and / or a special purpose microprocessor (e.g. an application specific integrated circuit (ASIC)), etc. The processor 1001 can also include an on-board memory for cache use. The processor 1001 can include a single processing unit or multiple processing units for performing different actions of the method processes according to embodiments of the present application.

[0131] In the RAM 1003, various programs and data required for the operation of the electronic device 1000 are stored. The processor 1001, the ROM 1002, and the RAM 1003 are connected to each other via the bus 1004. The processor 1001 performs various operations of the method flow according to the embodiments of the present application by executing the programs in the ROM 1002 and / or the RAM 1003. It should be noted that the programs can also be stored in one or more memories other than the ROM 1002 and the RAM 1003. The processor 1001 can also perform various operations of the method flow according to the embodiments of the present application by executing the programs stored in the one or more memories.

[0132] According to the embodiments of the present application, the electronic device 1000 can further include an input / output (I / O) interface 1005, which is also connected to the bus 1004. The electronic device 1000 can further include one or more of the following components connected to the input / output (I / O) interface 1005: an input part 1006 including a keyboard, a mouse, and the like; an output part 1007 including a cathode ray tube (CRT), a liquid crystal display (LCD), and the like, and a speaker, and the like; a storage part 1008 including a hard disk, and the like; and a communication part 1009 including a network interface card such as a LAN card, a modem, and the like. The communication part 1009 performs communication processing via a network such as the Internet. A drive 1010 is also connected to the input / output (I / O) interface 1005 as necessary. A removable medium 1011 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, and the like is mounted on the drive 1010 as necessary, so that a computer program read therefrom is installed in the storage part 1008 as necessary.

[0133] The present application also provides a computer readable storage medium, which can be included in the device / apparatus / system described in the above embodiments; or can exist separately without being assembled into the device / apparatus / system. The above computer readable storage medium carries one or more programs, when the one or more programs are executed, the method according to the embodiments of the present application is implemented.

[0134] According to an embodiment of the present application, the computer readable storage medium can be a non-transitory computer readable storage medium, for example, can include but is not limited to: a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this application, a computer readable storage medium can be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. For example, according to an embodiment of the present application, the computer readable storage medium can include one or more of the above-described ROM 1002 and / or RAM 1003 and / or a memory other than the ROM 1002 and the RAM 1003.

[0135] Embodiments of the present application also include a computer program product, which includes a computer program containing program codes for executing the methods shown in the flowcharts. When the computer program product is run in a computer system, the program codes are used to make the computer system implement the methods provided by the embodiments of the present application.

[0136] The above-described functions defined in the system / device / module / unit of the embodiments of the present application are performed when the computer program is executed by the processor 1001. According to an embodiment of the present application, the above-described system, device, module, unit, etc. can be implemented by computer program modules.

[0137] In one embodiment, the computer program can rely on a tangible storage medium such as an optical storage device, a magnetic storage device, etc. In another embodiment, the computer program can also be transmitted, distributed, and downloaded in the form of a signal on a network medium, and be downloaded and installed through the communication part 1009, and / or installed from the detachable medium 1011. The program codes contained in the computer program can be transmitted by any appropriate network medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

[0138] In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 1009, and / or installed from the detachable medium 1011. When the computer program is executed by the processor 1001, the above-described functions defined in the system of the embodiments of the present application are performed. According to an embodiment of the present application, the above-described system, device, apparatus, module, unit, etc. can be implemented by computer program modules.

[0139] According to embodiments of the present application, program code for implementing the computer programs provided by embodiments of the present application can be written in any combination of one or more programming languages, and can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. Program code can execute entirely on a user's computing device, partly on the user's device, as a stand-alone software package, partly on a remote computing device, or entirely on the remote computing device or server. In the latter scenario, the remote computing device can be connected to the user's computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or the connection can be made to an external computing device, such as through the Internet using an Internet Service Provider.

[0140] The computer program instructions can also be loaded onto a computer or other programmable information processing apparatus to cause a series of operations to be performed on the computer or other programmable information processing apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable information processing apparatus implement the functions / acts specified in the flowchart and / or block diagram block or blocks.

[0141] Those skilled in the art will understand that features recited in the various embodiments of the present application can be combined and / or integrated in various ways, even if such combinations or integrations are not expressly noted in the present application. In particular, features recited in the various embodiments of the present application can be combined and / or integrated in ways that are not expressly noted in the present application, without departing from the spirit and teachings of the present application. All such combinations and / or integrations are within the scope of the present application.

[0142] The embodiments of the present application are described above. However, these embodiments are merely for illustration purposes, and are not intended to limit the scope of the present application. Although the embodiments are described separately above, this does not mean that the measures in the various embodiments cannot be used advantageously in combination. Those skilled in the art can make various substitutions and modifications without departing from the scope of the present application, and these substitutions and modifications shall fall within the scope of the present application.

Claims

1. A data chart display method characterized by comprising: The method comprises: in response to detecting that the cursor is located within the scope of a first data chart in the screen display area, acquiring a first data point selected by the cursor position in the first data chart; acquiring a second data chart having an association relationship with the first data chart; the association relationship represents that at least one data point in the second data chart has a related data feature with at least one data point in the first data chart; in the case that a second data point in the second data chart is located in the screen display area, displaying the data values of the first data point and the second data point in the target display state in the screen display area; wherein the second data point has a related data feature with the first data point.

2. The method of claim 1, wherein, The method further comprises: acquiring a display ratio of the second data chart in the screen display area; the display ratio is calculated according to the ratio of the area of the screen display area where the second data chart is located and the area of the second data chart; in the case that the display ratio changes to a target value, determining a first positional relationship between the second data point in the second data chart and the screen display area; in the case that the first positional relationship represents that the second data point is located in the screen display area, displaying the data value of the second data point in the target display area.

3. The method of claim 2, wherein, The method further comprises: in the case that the display ratio changes, determining a first moving direction of the second data chart relative to the screen display area; acquiring a relative position between the second data chart and a third data chart adjacent to the second data chart; based on the relative position, determining a positional change relationship of the third data chart relative to the screen display area according to the first moving direction and the change state of the display ratio; in the case that the positional change relationship is entering the screen display area, performing a pre-rendering operation on the third data chart.

4. The method of claim 3, wherein, The method further comprises: in the case that the positional change relationship is away from the screen display area and the display ratio is less than a display ratio threshold, performing a suspended rendering operation on the third data chart.

5. The method of claim 1, wherein, The second data point in the second data chart is located in the screen display area according to the following manner: acquiring a second positional relationship between the second data chart and the screen display area; in the case that the second positional relationship represents that a part of the second data chart is located in the screen display area, acquiring a visible chart area of the second data chart located in the screen display area; acquiring a position coordinate of the second data point in the second data chart; in the case that the position coordinate is located in the visible chart area, judging that the second data point is located in the screen display area.

6. The method of claim 1, wherein, The acquiring of the second data chart having an association relationship with the first data chart comprises: acquiring an association array of the first data chart; parsing the association array to obtain an identifier pointing to the second data chart having an association relationship with the first data chart; finding the second data chart according to the identifier.

7. The method of claim 6, wherein, The association array is obtained in the following way: obtaining a first array of the first data chart, the first array comprising data features of each data point in the first data chart; obtaining a second array of each data chart other than the first data chart, the second array comprising data features of each data point in the second array corresponding data chart; determining the second array having a related data feature with the first array, and constructing the association array by using an identifier pointing to the second array.

8. The method of claim 1, wherein, The data values of the first data point and the second data point are displayed in a target display state in the screen display area, comprising: obtaining a first position of the first data point; determining a first target display area of the first data point according to the first position; the first target display area is located in the screen display area; suspendedly displaying the data value of the first data point in the first target display area; obtaining a second position of the second data point; determining a second target display area of the second data point according to the second position; the second target display area is located in the screen display area, and the second target display area does not intersect with the first target display area; suspendedly displaying the data value of the second data point in the second target display area.

9. The method of claim 1, wherein, The first data point selected by the cursor position in the first data chart, comprising: obtaining the data point closest to the cursor position in a predetermined direction in the first data chart, and taking the data point as the first data point selected by the cursor position in the first data chart; wherein the predetermined direction is any coordinate axis direction of the first data chart. 10.An electronic device, comprising: one or more processors; a memory for storing one or more computer programs, characterized in that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 1-9.

Images