CN116561235A

CN116561235A - Data display method and related equipment

Info

Publication number: CN116561235A
Application number: CN202310539464.9A
Authority: CN
Inventors: 高鹏; 魏特; 宋阳
Original assignee: BOE Technology Group Co Ltd
Current assignee: BOE Technology Group Co Ltd
Priority date: 2023-05-12
Filing date: 2023-05-12
Publication date: 2023-08-08

Abstract

The application provides a data display method and related equipment, wherein the method comprises the following steps: receiving data to be displayed, wherein the data to be displayed comprises classification information and level information and quantity information corresponding to the classification information; and displaying the data to be displayed in a graph form in a first page based on the classification information, the hierarchy information and the quantity information, wherein the style of the graph corresponds to the classification information, the hierarchy information and the quantity information. The classification information, the hierarchy information and the quantity information of the data to be displayed can be displayed through the chart style, the information quantity transmitted to the user after the data is visualized is enriched, the user can know key information of the data to be displayed with complex classification hierarchy information, and the experience of the user is improved.

Description

Data display method and related equipment

Technical Field

The present disclosure relates to the field of data visualization technologies, and in particular, to a data display method and related devices.

Background

Currently, in the field of data visualization, only a single information of data can be displayed to a user through a visualization page, for example, only the type of the data can be displayed, and the user cannot acquire all key data through one visualization page. Especially, when the data type and the data structure are complex, the visual page cannot intuitively show the type information and the structure information of the data, so that the presentation effect of the data is limited, and the user experience is poor.

Disclosure of Invention

In view of the foregoing, it is an object of the present application to provide a data display method and related apparatus, so as to solve or partially solve the above-mentioned problems.

Based on the above object, a first aspect of the present application provides a data display method, including:

receiving data to be displayed, wherein the data to be displayed comprises classification information and level information and quantity information corresponding to the classification information;

and displaying the data to be displayed in a graph form in a first page based on the classification information, the hierarchy information and the quantity information, wherein the style of the graph corresponds to the classification information, the hierarchy information and the quantity information.

Optionally, the classification information includes at least one first classification and at least one second classification that is a sub-classification of the at least one first classification, the hierarchy information includes a first hierarchy corresponding to the at least one first classification and a second hierarchy corresponding to the at least one second classification, the style of the graph includes a first graph style indicating different classifications and hierarchies corresponding to the classifications with different graphic areas, and different numbers with different sizes of graphic areas;

The displaying the data to be displayed in a graphic form in a first page based on the classification information, the hierarchy information, and the number information includes:

displaying the quantity information corresponding to at least one first category in the first hierarchy by adopting at least one first graphic area, and displaying the quantity information corresponding to at least one second category in the second hierarchy by adopting at least one second graphic area;

the sizes of the first graphic area and the second graphic area are positively correlated with the corresponding quantity information, the first graphic area corresponds to the first category one by one, and the second graphic area corresponds to the second category one by one.

Optionally, the first graph style is a bubble graph style, and the second graph area is included in the first graph area corresponding to a first category to which a second category corresponding to the second graph area belongs.

Optionally, the classification information further includes at least one third classification that is a sub-classification of the at least one second classification, and the hierarchy information further includes a third hierarchy corresponding to the at least one third classification;

the displaying the data to be displayed in a graphic form in a first page based on the classification information, the hierarchy information, and the number information, further includes:

Displaying quantity information corresponding to at least one third category in the third hierarchy by adopting at least one third graphic area;

the size of the third graphic area is positively correlated with the corresponding quantity information, and the third graphic area corresponds to the third classification one by one.

Optionally, the graph style further includes a second graph style, and the second graph style is displayed with a different color from the first graph style; the method further comprises the steps of:

and displaying the third graph area by adopting the color corresponding to the second graph style.

Optionally, the method further comprises:

amplifying the first, second and third graphic areas in response to a trigger operation for the first graphic area;

in response to a trigger operation for an area other than the first graphic area in the first page, the enlarged first graphic area, the second graphic area, and the third graphic area are restored.

Optionally, the displaying, by using at least one third graphic area, the quantity information corresponding to at least one third category in the third hierarchy includes:

Determining the initial size of the third graphic area according to the quantity information corresponding to the third classification;

in response to determining that the number information corresponding to the third classification is smaller than a preset number, amplifying the initial size according to a preset coefficient to obtain a target size;

and displaying the third graphic area with the target size.

Optionally, the method further comprises:

displaying an identification control in the first graphic area;

and responding to the triggering operation for the identification control, and displaying a first window in the first page, wherein the first window is used for displaying detailed information of data corresponding to the first graphic area.

Optionally, the second chart style is a thermodynamic chart style.

Optionally, the receiving the data to be displayed includes:

determining identification information of a user;

generating and sending a data access request to a server according to the identification information;

and receiving data to be displayed returned by the server for the data access request, wherein the data to be displayed is returned after the identification information is subjected to authority verification, and the information quantity of the data to be displayed corresponding to different user authorities is different.

The second aspect of the present application also provides a data display apparatus, including:

a receiving module configured to: receiving data to be displayed, wherein the data to be displayed comprises classification information and level information and quantity information corresponding to the classification information;

a display module configured to: and displaying the data to be displayed in a graph form in a first page based on the classification information, the hierarchy information and the quantity information, wherein the style of the graph corresponds to the classification information, the hierarchy information and the quantity information.

A third aspect of the present application also provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable by the processor, the processor implementing the method as in the first aspect when executing the computer program.

A fourth aspect of the present application also provides a non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the method of the first aspect.

A fifth aspect of the present application also provides a computer program product comprising computer program instructions which, when run on a computer, cause the computer to perform the method according to the first aspect.

From the above, it can be seen that the data display method and related device provided in the present application, the method includes: receiving data to be displayed, wherein the data to be displayed comprises classification information and corresponding level information and quantity information corresponding to the classification information; and displaying the data to be displayed in a graph form in a first page based on the classification information, the hierarchy information and the quantity information, wherein the style of the graph corresponds to the classification information, the hierarchy information and the quantity information. The classification information, the hierarchy information and the quantity information of the data to be displayed can be displayed through the chart style, the information quantity transmitted to the user after the data is visualized is enriched, the user can know key information of the data to be displayed with complex classification hierarchy information, and the experience of the user is improved.

Drawings

In order to more clearly illustrate the technical solutions of the present application or related art, the drawings that are required to be used in the description of the embodiments or related art will be briefly described below, and it is apparent that the drawings in the following description are only embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort to those of ordinary skill in the art.

Fig. 1 is a flow chart of a data display method according to an embodiment of the present application;

FIG. 2 is a schematic diagram of displaying data to be displayed in a bubble pattern according to an embodiment of the present application;

FIG. 3 is a schematic diagram of a display of data to be displayed including three levels according to an embodiment of the present application;

FIG. 4 is a schematic diagram showing data to be displayed in a bubble map style and a thermodynamic diagram style according to an embodiment of the present application;

FIG. 5A is a schematic diagram illustrating the enlarged effect of a first graphic region according to an embodiment of the present application;

FIG. 5B is a schematic diagram illustrating the reduction effect of the first graphic region according to the embodiment of the present application;

FIG. 6A is a schematic diagram of displaying data to be displayed in an initial size according to an embodiment of the present application;

FIG. 6B is a schematic diagram of displaying data to be displayed in a target size according to an embodiment of the present application;

FIG. 7 is a schematic view of a first window according to an embodiment of the present application;

fig. 8 is a schematic structural diagram of a data display device according to an embodiment of the present application;

fig. 9 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application.

Detailed Description

For the purposes of making the objects, technical solutions and advantages of the present application more apparent, the present application will be further described in detail below with reference to the accompanying drawings.

It should be noted that unless otherwise defined, technical or scientific terms used in the embodiments of the present application should be given the ordinary meaning as understood by one of ordinary skill in the art to which the present application belongs. The terms "first," "second," and the like, as used in embodiments of the present application, do not denote any order, quantity, or importance, but rather are used to distinguish one element from another. The word "comprising" or "comprises", and the like, means that elements or items preceding the word are included in the element or item listed after the word and equivalents thereof, but does not exclude other elements or items. The terms "connected" or "connected," and the like, are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. "upper", "lower", "left", "right", etc. are used merely to indicate relative positional relationships, which may also be changed when the absolute position of the object to be described is changed.

In the related art, when data is visualized, only information of a certain aspect of the data can be usually displayed. For example, the trend of the data is displayed by a bar chart or a line chart. However, if the data contains a hierarchical structure, for example, data having a tree structure, it cannot be presented by a simple graph. Therefore, the user cannot know the key information contained in the data, and further the user is influenced to carry out subsequent analysis work according to the data information. In addition, existing data visualizations are typically static displays, and dynamic display and interaction of data cannot be achieved. In view of this, the application provides a data display method for data with a complex structure, which can display classification information, hierarchy information and quantity information in the data through a proper chart style, enrich information transmitted to a user through data visualization, provide the user with as much key information as possible, and improve the experience of the user.

Fig. 1 shows a flowchart of a data display method according to an embodiment of the present application, and as shown in fig. 1, the data display method 100 includes the following steps:

step 102, receiving data to be displayed, wherein the data to be displayed comprises classification information, and hierarchical information and quantity information corresponding to the classification information.

Specifically, the data to be displayed is data to be displayed to the user in the visual page of the client, where the data to be displayed may be data directly input by the user through the client, or may be data returned to the client by the server according to a data request of the client. The data to be displayed includes classification information, hierarchy information, and number information, and the classification information may include a plurality of classifications, and one parent classification may include at least one child classification. The hierarchy information may include a plurality of hierarchies, with parent-child relationships between the different hierarchies, each parent hierarchy including at least one child hierarchy. The hierarchy information corresponds to classification information, one for each hierarchy. Meanwhile, each category has corresponding quantity information, and the quantity information of the parent category is the sum of the quantity information of all the child categories. The data to be displayed may be data having a tree structure, for example.

And 104, displaying the data to be displayed in a graph form in a first page based on the classification information, the hierarchy information and the quantity information, wherein the graph style corresponds to the classification information, the hierarchy information and the quantity information.

Specifically, the first page is a visual page presented to the user at the client, and the user can acquire related information of the data to be displayed through the first page. The data to be displayed is presented to the user in the form of a chart, and compared with the text form, the chart can intuitively reflect the information contained in the data. Meanwhile, the chart style in the embodiment corresponds to the classification information, the hierarchy information and the quantity information, that is, the classification condition, the hierarchy structure and the data quantity of the data to be displayed can be displayed through a chart, and by way of example, a user can know that the data to be displayed includes three hierarchies through the chart in the first page, the classification quantity contained in each hierarchy, the data quantity contained in each classification, the relative relation between the data quantities, and the like.

Based on the above-mentioned steps 102 to 104, the data display method provided in this embodiment may display the classification information, the level information and the quantity information of the data to be displayed through a chart style, enrich the information quantity transmitted to the user after the data is visualized, enable the user to obtain the key information of the data to be displayed with the complex split level information, and promote the experience of the user.

In some embodiments, the classification information includes at least one first classification and at least one second classification that is a sub-classification of the at least one first classification, the hierarchy information includes a first hierarchy corresponding to the at least one first classification and a second hierarchy corresponding to the at least one second classification, the style of the graph includes a first graph style indicating different classifications and hierarchies corresponding to the classifications with different graphical regions, and different numbers with different sizes of graphical regions;

the step of including, based on the classification information, the hierarchy information, and the number information:

displaying the quantity information corresponding to at least one first category in the first hierarchy by adopting at least one first graphic area, and displaying the quantity information corresponding to at least one first category in the second hierarchy by adopting at least one second graphic area;

Specifically, in this embodiment, the classification information includes at least one first class and at least one second class that is a sub-class of the first class, and the hierarchy information includes at least one first hierarchy corresponding to each first class one-to-one and at least one second hierarchy corresponding to each second class one-to-one, where the first hierarchy is a parent hierarchy and the second hierarchy is a sub-hierarchy. The data to be displayed is presented in a first graph style comprising a plurality of graphical regions, different graphical regions indicating different classifications and levels corresponding to the classifications, e.g., a first graphical region for presenting a first classification in a first level and a second graphical region for presenting a second classification in a second level. The shape, color, etc. of the graphic area can be adjusted according to actual requirements, and the graphic area can be circular, square or triangular, etc. and the color can be red, green, yellow, etc. For the quantity information corresponding to each category, the size of the graphic area can be used for displaying, different sizes correspond to different quantity information, the size and the quantity information are positively correlated, the number is larger, the graphic area with larger size can be used for displaying, and the number is smaller, the graphic area with smaller size can be used for displaying. The data display method of the embodiment can display the classification information and the hierarchical structure of the data to be displayed to the user, and simultaneously can intuitively acquire the size relation among the numbers corresponding to different classifications, so that the user can conveniently perform subsequent business analysis according to the content displayed on the first page.

In some embodiments, the first chart style is a bubble chart style, and the second graphic region is included in the first graphic region corresponding to a first class to which a second class corresponding to the second graphic region belongs.

The bubble chart is one of the common chart analysis tools for data visualization, and can intuitively display data comparison of three dimensions, namely a horizontal axis value, a vertical axis value and a data volume size. The bubble map includes a plurality of bubbles of different sizes, and the size of the bubbles can display the size of the data volume. Bubble diagrams may help to enhance understanding of things. In this embodiment, a bubble chart pattern is selected as the first chart pattern. Fig. 2 shows a schematic diagram showing data to be displayed in a bubble chart style. Each bubble in the bubble map corresponds to a graphic area, and the hierarchical information and the classification information of the data can be distinguished through the positions among the bubbles. On the left side of fig. 2, a bubble diagram in the first page is shown, and when the second level is a sub-level of the first level, bubbles 202 for displaying the second level are included in bubbles 201 for displaying the first level, and at the same time, the second category corresponding to bubbles 202 is a sub-category of the first category corresponding to bubbles 201. If the first classification includes a plurality of second classifications, a plurality of bubbles 202 corresponding to the second classifications are displayed among the bubbles 201 for displaying the first classification. Through the bubble nesting mode, the classification relation and the hierarchy relation between the data can be intuitively displayed to the user, and the display effect of the data is improved. To the right of fig. 2 is shown an exploded view of the bubble diagram, the plurality of bubbles 202 specifically includes bubbles 2021, 2022, 2023, 2024, 2025, 2026, 2027. The size of the different bubbles is determined according to the amount of data contained therein, and it can be seen that the amount of data contained therein is different and the bubble size is different.

In some embodiments, the classification information further includes at least one third classification that is a sub-classification of the at least one second classification, the hierarchy information further including a third hierarchy corresponding to the at least one third classification;

Specifically, if the data to be displayed includes a plurality of levels, for example, a first level, a second level, and a third level, the second level is a sub-level of the first level, and the third level is a sub-level of the second level. Correspondingly, the first page comprises three graphic areas, namely a first graphic area, a second graphic area and a third graphic area, wherein the first graphic area is used for displaying a first classification in a first level, the second graphic area is used for displaying a second classification in a second level, and the third graphic area is used for displaying a third classification in a third level. Wherein the size of each graphic region is positively correlated with the corresponding quantity information. Fig. 3 shows a display diagram of data to be displayed including three levels, which is displayed in a bubble pattern in fig. 3. The bubble 301 for displaying the first graphic region has the largest size, the second bubble for displaying the second graphic region has the smallest size, and the third bubble for displaying the third graphic region has the smallest size. The bubbles 301 correspond to a first category, which includes a plurality of bubbles, and indicates that the first category includes a plurality of second categories, and the first level includes a first category and the second level includes a plurality of second categories. Wherein, three bubbles are included in one bubble 3021 for displaying the second category, which means that three third categories are included in the second category, and three third categories are included in the third hierarchy. Another bubble 3022 for displaying the second category contains two bubbles, meaning that the second category contains two third categories, which are also contained in the third hierarchy. The data display method provided by the embodiment can display the data to be displayed with a plurality of classification levels, and provide the user with level information as much as possible.

In some embodiments, the pattern of the chart further includes a second chart pattern displayed in a different color than the first chart pattern; the method further comprises the steps of:

Specifically, when the data to be displayed is displayed in the first page, different chart styles may be used for displaying. The patterns of the chart may include a first chart pattern and a second chart pattern. The second chart style is different from the first chart style in that the second chart style displays a corresponding graphic region using a different color from the first chart style. For example, the first graphic style displays the corresponding graphic region in blue, and the second graphic style displays the corresponding graphic region in colors other than blue. Illustratively, the second chart style is a thermodynamic chart style. Thermodynamic diagrams are statistical diagrams that display data by coloring color patches. When drawing, the rule of color mapping is required to be specified. For example, larger values are represented by darker colors, smaller values are represented by lighter colors; or a larger value is represented by a warm color, a smaller value by a cold color, etc. Thermodynamic diagrams can often attract the attention of users through color changes, and the purpose of highlighting the key points is achieved. In the embodiment, the data to be displayed is displayed jointly by adopting the first chart pattern and the second chart pattern, so that the richness of visual effect is increased, the number of the data is distinguished by the colors, the different colors correspond to different orders of magnitude, the data display is more visual, and the user experience is further improved.

Fig. 4 shows a schematic diagram showing data to be displayed in a bubble map style and a thermodynamic diagram style. Fig. 4 includes a first graphic region for displaying a first category in a first hierarchy, a second graphic region for displaying a second category in a second hierarchy, and a third graphic region for displaying a third category in a third hierarchy, the first graphic region corresponding to bubble 401, the second graphic region corresponding to bubble 402, and the third graphic region corresponding to bubble 403. Meanwhile, sub-classification data included in the third classification data, that is, fourth classification data, is displayed in a thermodynamic diagram pattern in the third graphic region. The color categories included in the thermodynamic diagram may correspond to fourth classification data, and illustratively, if three fourth classification data are included in the fourth hierarchy, the thermodynamic diagram displays the three fourth classification data in three colors, respectively, for example, red 4041, green 4042, and yellow 4043, respectively. Alternatively, the three fourth classifications of data are displayed in colors with different transparencies, respectively, for example, the three fourth classifications of data are displayed in green with transparencies of 80%, 70% and 60%, respectively. Alternatively, the data of each category is displayed in different types of mixed colors, for example, three fourth categories of data are displayed in red-yellow mixed colors, blue-green mixed colors, and orange-violet mixed colors, respectively.

It should be noted that, when the data to be displayed includes multiple classifications and multiple levels, the data to be displayed is displayed only by means of nesting of bubble diagrams, on the one hand, the display form is single, and on the other hand, when too many nested bubbles are present, the lower the level, the smaller the corresponding bubble size, and the definition of bubble display is affected. Therefore, two chart styles of bubble diagrams and thermodynamic diagrams can be adopted to simultaneously display the data to be displayed, so that clearer visual experience is brought to a user.

In a specific embodiment, the color setting of the second chart style may be implemented by the following code form:

if(Number(d.value)<＝30){

return“node node--small”

}else if(Number(d.value)>30&&Number(d.value)<＝300){

return“node node--middle”

}else if(Number(d.value)>300&&Number(d.value)<＝1000){

return“node node--big”

}else if(Number(d.value)>1000){

return“node node--leaf”

}else{

return“node node--small”

}

in the above code, d.value represents the data amount of one fourth category included in one third category, number (d.value) represents the numerical value of the data amount of the category, "node-small", "node-middle", "node-big", "node-leaf" represents the names corresponding to the different color styles. When Number (d.value) <=30, the return color pattern is "node-small"; when Number (d.value) >30 and Number (d.value) <=300, the return color pattern is "node-middle"; when Number (d.value) >300 and Number (d.value) <=1000, the return color pattern is "node-big"; when Number (d.value) >1000, the return color pattern is "node-leaf"; if no Number (d.value) exists, the default return color pattern is "node-small". It should be noted that the color patterns may be named as needed, and the number of color patterns may be adjusted as needed, and the above codes are only exemplary and not limiting.

The specific color corresponding to each color pattern may be set by the following code:

.node--leaf{

fill:url(#svgbigercolor)；

}

.node--small{

fill:url(#svgsmallcolor)；

}

.node--middle{

fill:url(#svgmiddlecolor)；

}

.node--big{

fill:url(#svgbigcolor)；

}

in the above code, each color pattern is associated with a specific color value. When the color pattern is node-leaf, the color value of the filling is svgbigercolor; when the color pattern is node-small, the color value of the filling is svgssmallcolor; when the color pattern is node-middle, the color value of the filling is svgmidlecolor; when the color pattern is node-big, the color value of the filling is svgbigcolor. The person skilled in the art may set various color values in advance, for example, set RGB values corresponding to each color value, etc.

In some embodiments, the method further comprises:

In order to bring better experience to users, the embodiment provides a dynamic display of data and a triggering interaction method. Since all information of the data to be displayed is displayed in the first page, if the data size of the data to be displayed is large, the data size is classified and the data size of the data to be displayed is large, a plurality of graphic areas in a multi-layer nested form are simultaneously displayed in the first page, and when a user wants to know the data information of the lower data size, the problem of unclear view may exist. Thus, in this embodiment, a trigger mode of amplifying and restoring the graphic region is given.

Specifically, when a trigger operation for a first graphics area is detected, the first graphics area, the second graphics area, and the third graphics area are enlarged. Fig. 5A shows a schematic view of the enlargement effect of the first graphic areas, and one of the first graphic areas 501 is selected in the first page 500A to perform the enlargement operation. After the trigger operation corresponding to the enlargement effect is generated, the first graphic region 501, each second graphic region 502, and each third graphic region 503 are enlarged simultaneously. As shown in fig. 5A, the trigger operation for generating the zoom-in effect may be a click operation within a predetermined trigger area 504, and the trigger area 504 of the first graphic area 501 may be other areas (areas displayed in gray scale in fig. 5A) in the first graphic area 501 except for the respective second graphic areas 502. Fig. 5B shows a schematic diagram of the restoration effect of the first graphic region, and after the triggering operation corresponding to the restoration effect is generated, the first graphic region 501, the second graphic region 502 and the third graphic region 503 are restored simultaneously. As shown in fig. 5B, the triggering operation for generating the zoom-in effect may be a clicking operation within a predetermined triggering area 505, and the triggering area 505 may be other areas (areas shown in gray scale in the drawing) in the first page 500B except for the first graphic area 501 and other first graphic areas. In comparison with fig. 5A, the sizes of the first graphic region 501, the second graphic region 502, and the third graphic region 503 have been restored to the original sizes.

In some embodiments, the displaying, with at least one third graphic region, the quantity information corresponding to at least one third category in the third hierarchy includes:

and displaying the third graphic area with the target size.

When different classification level data are displayed through different graphic areas, if the quantity information corresponding to the third classification is smaller, the size of the formed third graphic area is smaller, and when more graphic areas with smaller sizes exist, the user can not visually distinguish the data size contained in the plurality of third graphic areas. In order to ensure the definition of the display of each classified hierarchical data, the classified information, the hierarchical information and the quantitative information are accurately transmitted to the user, and the size of the third graphic region with smaller size is properly enlarged through a preset coefficient. And after determining the initial size of the third graphic region according to the quantity information corresponding to the third classification, multiplying the initial size by a preset coefficient to amplify the size, so as to obtain the target size. The target size is a size which can be clearly identified by the user in a normal viewing distance range, and the third graphic region is displayed in the target size. Fig. 6A shows a schematic diagram of displaying data to be displayed in an initial size, and fig. 6B shows a schematic diagram of displaying data to be displayed in a target size. In fig. 6A, the sizes of the third pattern areas 603 included in the first pattern area 601 and the second pattern area 602 are all initial sizes, and the size relationship between the amounts of data included in the third pattern areas 603 cannot be recognized because the amounts of data included in the third pattern areas 603 are small. The size of each third graphic region 603 in fig. 6B is an enlarged target size. The preset coefficient may be 10, for example. After the enlargement, the size relationship between the data amounts contained in each third pattern area 603 can be clearly seen.

In some embodiments, the method further comprises:

displaying an identification control in the first graphic area;

When the data to be displayed is displayed through the first graph style and the second graph style, only the level, the classification and the data quantity of the data to be displayed can be represented, and if a user wants to know the detailed data information corresponding to the first graph area in further detail, the user cannot know the detailed data information through the first page. Thus, a method of viewing corresponding detailed data information within the first graphical region is presented in this embodiment. Each first graphical region displays a corresponding identification control, which may be the name of the first graphical region. When a user initiates a triggering operation for the identification control, a first window is displayed in the first page, and the first window contains detailed data information corresponding to the first graphic area. Fig. 7 shows a schematic view of a first window. As shown in fig. 7, after the identification control 702 is clicked, a first window 703 corresponding to the first graphic region 701 is displayed on the first page, and a display style in the first window 703 may be a bar graph style to display detailed data information corresponding to the first graphic region 701. In other embodiments, the display style in the first window 703 may also be a style such as a line graph, a scatter graph, a table, or text. For example, the first window 703 may appear in a pop-up form on a first page, and when the user triggers the identification control 702 to generate a trigger operation, the first window 703 pops up in the first page for the user to query for detailed data information.

The data displayed in the first window is returned in a manner of calling the interface. Different identification controls can be connected with different interfaces in advance, after triggering operation is generated, the interface connected with the identification controls is directly called, corresponding detailed data are accessed through the interface, and the detailed data are returned to be displayed in the first window. The first window can analyze various chart dimensions through ECharts and other technologies so as to diversify chart styles. ECharts is a JavaScript-based data visualization chart library capable of providing visual, vivid, interactive and personalized data visualization charts.

In addition, in addition to the first graphic region corresponding to the first window, corresponding windows may be provided in other graphic regions. For example, a corresponding identification control is displayed in the second graphic region, the identification control is triggered, a second window is displayed in the first page, and the second window is used for displaying detailed data information corresponding to the second graphic region. Or displaying a corresponding identification control in the third graphic area, triggering the identification control, and displaying a third window in the first page, wherein the third window is used for displaying detailed data information corresponding to the third graphic area.

In some embodiments, the receiving the data to be displayed includes:

determining identification information of a user;

Considering business management requirements, different permissions are generally set for different users, and the data volume that can be viewed by users with different permissions is different, so that the data viewed in the visual page is also different. Before receiving the data to be displayed, it is necessary to first determine identification information of the user, where the identification information represents a unique identification of the user, and the identification information may be, for example, a user's job number. And generating a data access request according to the identification information, sending the data access request to the server, inquiring the data to be displayed by the server according to the identification information, and returning the data to the client. Before the data to be displayed is returned to the client, the server needs to verify the identification information, determines whether the identification information is matched with the authority corresponding to the data to be displayed in the data access request, returns the data to be displayed to the client if the matching is successful, and does not return the data to be displayed if the matching is failed. The data to be displayed can be transmitted in json format in the transmission process, and after the client receives the data to be displayed in json format, the data to be displayed is firstly analyzed and then displayed in the first page. By the method, the data security can be improved, and users with lower authority can not view data information with higher authority. Meanwhile, the authority is divided to distinguish different service fields for the users, the data information seen by the users in the different service fields is different, and the users in one service field cannot view the data in other service fields, so that the display effect of 'thousands of people and thousands of faces' of data is realized.

In a specific embodiment, the data access request may be implemented in the following code form:

Request({

url:‘cockpit/modules/leadData/getleadDatasUserCode＝Is_yll’,

method:‘Get’

}).

wherein, "cockpit/modules/readdata/getleadData" represents an access path, "usercode=is_ yll" represents that identification information UserCode of the user is_ yll, "method: 'Get'" represents a method for obtaining Get.

In a specific embodiment, after the client receives the Data to be displayed returned in json format, a d3.Js (Data-Driven documents. Javascript) technique is used to generate the bubble map. D3.js is a JavaScript library that can be used to visualize Web standard data. And forming a first graph area by data positioned at a first level in the data to be displayed, and if the first level data comprises a plurality of classifications, each classification corresponds to one first graph area, and determining the size of each first graph area by comparing all data amounts contained in the first graph area with data amounts contained in other first graph areas. If one of the first graphic areas contains a larger amount of data than the other of the first graphic areas, the first graphic area is larger in size than the other of the first graphic areas. Meanwhile, the size of each second graph area is determined by comparing the total data amount contained in the second graph area with the data amounts contained in other second graph areas. The size of each third graphic region is determined by comparing the total data amount contained in the third graphic region with the data amounts contained in other third graphic regions. The execution logic is reversed when the above operations are performed by a computer programming language. The computer programming language is to draw the second graphic region and the first graphic region sequentially after starting drawing the third graphic region. Illustratively, for data to be displayed having a tree structure, a root node and its recursive subordinate nodes are constructed from the hierarchical data using a d3.Hierarchy function, and attributes are calculated and added for each node. For each parent node, the value of the count attribute of all its child nodes (the value of the count attribute, i.e., the amount of data each node includes) is added as the value of that parent node, and the count value of the leaf node is taken as its value. And determining the size of the corresponding graph area through the value of each node, and further finishing drawing of the graph.

It should be noted that, the method of the embodiments of the present application may be performed by a single device, for example, a computer or a server. The method of the embodiment can also be applied to a distributed scene, and is completed by mutually matching a plurality of devices. In the case of such a distributed scenario, one of the devices may perform only one or more steps of the methods of embodiments of the present application, and the devices may interact with each other to complete the methods.

It should be noted that some embodiments of the present application are described above. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments described above and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

Based on the same inventive concept, the application also provides a data display device corresponding to the method of any embodiment.

Referring to fig. 8, the data display apparatus 800 includes:

a receiving module 802 configured to: receiving data to be displayed, wherein the data to be displayed comprises classification information and level information and quantity information corresponding to the classification information;

a display module 804 configured to: and displaying the data to be displayed in a graph form in a first page based on the classification information, the hierarchy information and the quantity information, wherein the style of the graph corresponds to the classification information, the hierarchy information and the quantity information.

In some embodiments, the classification information includes at least one first classification and at least one second classification that is a sub-classification of the at least one first classification, the hierarchy information includes a first hierarchy corresponding to the at least one first classification and a second hierarchy corresponding to the at least one second classification, the style of the graph includes a first graph style indicating different classifications and hierarchies corresponding to the classifications with different graphical regions, and different numbers with different sizes of graphical regions; the display module 804 is further configured to:

In some embodiments, the classification information further includes at least one third classification that is a sub-classification of the at least one second classification, the hierarchy information further including a third hierarchy corresponding to the at least one third classification; the display module 804 is further configured to:

In some embodiments, the pattern of the chart further includes a second chart pattern displayed in a different color than the first chart pattern; the display module 804 is further configured to: and displaying the third graph area by adopting the color corresponding to the second graph style.

In some embodiments, the apparatus further comprises a magnification reduction module 806, the magnification reduction module 806 configured to: amplifying the first, second and third graphic areas in response to a trigger operation for the first graphic area;

In some embodiments, the display module 804 is further configured to: determining the initial size of the third graphic area according to the quantity information corresponding to the third classification;

and displaying the third graphic area with the target size.

In some embodiments, the display module 804 is further configured to: displaying an identification control in the first graphic area;

In some embodiments, the second chart style is a thermodynamic chart style.

In some embodiments, the receiving module 802 is further configured to: determining identification information of a user;

For convenience of description, the above devices are described as being functionally divided into various modules, respectively. Of course, the functions of each module may be implemented in the same piece or pieces of software and/or hardware when implementing the present application.

The device of the foregoing embodiment is configured to implement the corresponding data display method in any of the foregoing embodiments, and has the beneficial effects of the corresponding method embodiment, which is not described herein.

Based on the same inventive concept, the application also provides an electronic device corresponding to the method of any embodiment, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the processor realizes the data display method of any embodiment when executing the program.

Fig. 9 shows a more specific hardware architecture of an electronic device according to this embodiment, where the device may include: a processor 1010, a memory 1020, an input/output interface 1030, a communication interface 1040, and a bus 1050. Wherein processor 1010, memory 1020, input/output interface 1030, and communication interface 1040 implement communication connections therebetween within the device via a bus 1050.

The processor 1010 may be implemented by a general-purpose CPU (Central Processing Unit ), microprocessor, application specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, etc. for executing relevant programs to implement the technical solutions provided in the embodiments of the present disclosure.

The Memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory ), static storage device, dynamic storage device, or the like. Memory 1020 may store an operating system and other application programs, and when the embodiments of the present specification are implemented in software or firmware, the associated program code is stored in memory 1020 and executed by processor 1010.

The input/output interface 1030 is used to connect with an input/output module for inputting and outputting information. The input/output module may be configured as a component in a device (not shown) or may be external to the device to provide corresponding functionality. Wherein the input devices may include a keyboard, mouse, touch screen, microphone, various types of sensors, etc., and the output devices may include a display, speaker, vibrator, indicator lights, etc.

Communication interface 1040 is used to connect communication modules (not shown) to enable communication interactions of the present device with other devices. The communication module may implement communication through a wired manner (such as USB, network cable, etc.), or may implement communication through a wireless manner (such as mobile network, WIFI, bluetooth, etc.).

Bus 1050 includes a path for transferring information between components of the device (e.g., processor 1010, memory 1020, input/output interface 1030, and communication interface 1040).

It should be noted that although the above-described device only shows processor 1010, memory 1020, input/output interface 1030, communication interface 1040, and bus 1050, in an implementation, the device may include other components necessary to achieve proper operation. Furthermore, it will be understood by those skilled in the art that the above-described apparatus may include only the components necessary to implement the embodiments of the present description, and not all the components shown in the drawings.

The electronic device of the foregoing embodiment is configured to implement the corresponding data display method in any of the foregoing embodiments, and has the beneficial effects of the corresponding method embodiment, which is not described herein.

Based on the same inventive concept, corresponding to any of the above embodiments of the method, the present application further provides a non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the data display method according to any of the above embodiments.

The computer readable media of the present embodiments, including both permanent and non-permanent, removable and non-removable media, may be used to implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device.

The storage medium of the foregoing embodiments stores computer instructions for causing the computer to execute the data display method according to any one of the foregoing embodiments, and has the advantages of the corresponding method embodiments, which are not described herein.

Those of ordinary skill in the art will appreciate that: the discussion of any of the embodiments above is merely exemplary and is not intended to suggest that the scope of the application (including the claims) is limited to these examples; the technical features of the above embodiments or in the different embodiments may also be combined within the idea of the present application, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of brevity.

Additionally, well-known power/ground connections to Integrated Circuit (IC) chips and other components may or may not be shown within the provided figures, in order to simplify the illustration and discussion, and so as not to obscure the embodiments of the present application. Furthermore, the devices may be shown in block diagram form in order to avoid obscuring the embodiments of the present application, and this also takes into account the fact that specifics with respect to implementation of such block diagram devices are highly dependent upon the platform on which the embodiments of the present application are to be implemented (i.e., such specifics should be well within purview of one skilled in the art). Where specific details (e.g., circuits) are set forth in order to describe example embodiments of the application, it should be apparent to one skilled in the art that embodiments of the application can be practiced without, or with variation of, these specific details. Accordingly, the description is to be regarded as illustrative in nature and not as restrictive.

While the present application has been described in conjunction with specific embodiments thereof, many alternatives, modifications, and variations of those embodiments will be apparent to those skilled in the art in light of the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the embodiments discussed.

The present embodiments are intended to embrace all such alternatives, modifications and variances which fall within the broad scope of the appended claims. Accordingly, any omissions, modifications, equivalents, improvements and/or the like which are within the spirit and principles of the embodiments are intended to be included within the scope of the present application.

Claims

1. A data display method, comprising:

2. The method of claim 1, wherein the classification information includes at least one first classification and at least one second classification that is a sub-classification of the at least one first classification, the hierarchy information includes a first hierarchy corresponding to the at least one first classification and a second hierarchy corresponding to the at least one second classification, the style of the graph includes a first graph style indicating the different classifications and hierarchies corresponding to the classifications with different graphical regions, and different numbers with different sized graphical regions;

3. The method of claim 2, wherein the first graph style is a bubble graph style and the second graphical region is contained within the first graphical region corresponding to a first class to which a second class corresponding to the second graphical region belongs.

4. The method of claim 2, wherein the classification information further comprises at least one third classification that is a sub-classification of the at least one second classification, the hierarchy information further comprising a third hierarchy corresponding to the at least one third classification;

5. The method of claim 4, wherein the graph style further comprises a second graph style, the second graph style being displayed in a different color than the first graph style; the method further comprises the steps of:

6. The method of claim 5, wherein the method further comprises:

7. The method of claim 4, wherein displaying the quantity information corresponding to at least one third category in the third hierarchy using at least one third graphical region comprises:

and displaying the third graphic area with the target size.

8. The method according to claim 2, wherein the method further comprises:

displaying an identification control in the first graphic area;

9. The method of claim 4, wherein the second chart pattern is a thermodynamic chart pattern.

10. The method of claim 1, wherein the receiving the data to be displayed comprises:

determining identification information of a user;

11. A data display device, comprising:

12. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of any one of claims 1 to 10 when the program is executed by the processor.

13. A non-transitory computer readable storage medium storing computer instructions for causing a computer to perform the method of any one of claims 1 to 10.

14. A computer program product comprising computer program instructions which, when run on a computer, cause the computer to perform the method of any one of claims 1 to 10.