TW202141256A - Data display method, computer readable storage medium, electronic device and chip - Google Patents
Data display method, computer readable storage medium, electronic device and chip Download PDFInfo
- Publication number
- TW202141256A TW202141256A TW109131395A TW109131395A TW202141256A TW 202141256 A TW202141256 A TW 202141256A TW 109131395 A TW109131395 A TW 109131395A TW 109131395 A TW109131395 A TW 109131395A TW 202141256 A TW202141256 A TW 202141256A
- Authority
- TW
- Taiwan
- Prior art keywords
- data
- ring
- arc
- type
- visualized
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/26—Visual data mining; Browsing structured data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/904—Browsing; Visualisation therefor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Storage Device Security (AREA)
- Digital Computer Display Output (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
Description
本發明關於資料視覺化領域，尤其關於一種資料顯示方法、電腦可讀儲存介質、電子設備和晶片。The present invention relates to the field of data visualization, in particular to a data display method, computer-readable storage medium, electronic equipment, and chip.
大資料與人們生活息息相關，全球資料呈現爆發增長、海量集聚的特點。從國家到個人越來越意識到資料的重要性。因此，對於大資料的視覺化操作以及視覺化呈現，尤為重要。視覺化是指將相對抽象的數位等內容轉化為直觀的圖形、圖像等呈現出來，便於閱讀者和研究者觀察、模擬、分析。以視覺化為基礎，近年來，地形視覺化、大資料視覺化、語音視覺化等技術在相應領域蓬勃發展。因此，需要研究能夠展示資料之間的關聯性且資料模型簡單的資料顯示方案。Big data is closely related to people's lives, and global data is characterized by explosive growth and massive accumulation. From the country to the individual, there is a growing awareness of the importance of information. Therefore, it is particularly important for the visual operation and visual presentation of big data. Visualization refers to the conversion of relatively abstract digital content into intuitive graphics, images, etc., which are convenient for readers and researchers to observe, simulate, and analyze. Based on visualization, in recent years, technologies such as terrain visualization, big data visualization, and voice visualization have flourished in corresponding fields. Therefore, it is necessary to study a data display scheme that can show the relevance of the data and has a simple data model.
本發明實施例公開了一種資料顯示方法、電腦可讀儲存介質、電子設備和晶片，能夠展示資料之間的關聯性，並且資料模型簡單。The embodiment of the invention discloses a data display method, a computer readable storage medium, an electronic device and a chip, which can display the correlation between the data and has a simple data model.
第一方面，本發明實施例提供了一種資料顯示方法，該方法包括：根據第一待視覺化資料，生成第一圓環；所述第一待視覺化資料包括第一類型的資料，所述第一類型的資料包括N種狀態的資料；所述第一圓環包括N段圓弧，所述N段圓弧中每段圓弧對應所述第一類型的一種狀態的資料，所述N為大於0的整數；顯示所述第一圓環。In a first aspect, an embodiment of the present invention provides a data display method. The method includes: generating a first ring based on the first to-be-visualized data; the first to-be-visualized data includes a first type of data, the The first type of data includes data in N states; the first ring includes N arcs, and each of the N arcs corresponds to data in one state of the first type. Is an integer greater than 0; the first ring is displayed.
本發明實施例中，用戶通過圓環的變化可以直觀的感受資料的變化，並且能夠較好的展示資料之間的關聯性。In the embodiment of the present invention, the user can intuitively feel the change of the data through the change of the circle, and can better display the correlation between the data.
在一個可選的實現方式中，所述顯示所述第一圓環包括：將當前顯示的第二圓環更新為所述第一圓環；所述第二圓環為在得到所述第一待視覺化資料之前，根據所述第一類型的第二資料生成的圓環。In an optional implementation manner, the displaying the first circular ring includes: updating the currently displayed second circular ring to the first circular ring; the second circular ring is obtained after obtaining the first circular ring; Before visualizing the data, a circular ring is generated based on the first type of second data.
在一個可選的實現方式中，所述方法還包括：顯示一個目標圖形，所述目標圖形內部具有描述資訊，所述描述資訊用於描述所述第一圓環中任一圓弧表示的內容。In an optional implementation manner, the method further includes: displaying a target graphic with description information inside the target graphic, and the description information is used to describe the content represented by any arc in the first ring .
在一個可選的實現方式中，所述第一圓環顯示於所述目標圖形的四周，所述目標圖形為表徵光暈星球的圓形。In an optional implementation manner, the first circular ring is displayed around the target graphic, and the target graphic is a circle representing a halo planet.
本發明實施例中，將至少一個圓環顯示在發光圓球的周圍，並在該發光圓球的內部顯示相應的描述資訊，以便於使用者更直接的感受資料的變化以及各圓環表徵的資料。In the embodiment of the present invention, at least one ring is displayed around the luminous sphere, and corresponding description information is displayed inside the luminous sphere, so that the user can more directly feel the changes in the data and the characteristics of each ring material.
在一個可選的實現方式中，所述顯示所述第一圓環之後，所述方法還包括：在接收到第一選擇指令之後，顯示第一圓弧對應的資料；所述第一選擇指令用於選擇所述第一圓環中的所述第一圓弧，所述第一圓弧為所述N段圓弧中的任一個。In an optional implementation manner, after the displaying the first circle, the method further includes: after receiving the first selection instruction, displaying the data corresponding to the first circle; the first selection instruction Used to select the first circular arc in the first circular ring, and the first circular arc is any one of the N circular arcs.
本發明實施例中，用戶通過這種圓環交互可以清晰明瞭的知道每一份資料在系統中扮演的角色，以便於使用者可以根據這些資料做出實際判斷，交互性強。In the embodiment of the present invention, the user can clearly know the role played by each piece of data in the system through this circle interaction, so that the user can make actual judgments based on the data, and the interaction is strong.
在一個可選的實現方式中，在接收到第一選擇指令之後，所述方法還包括：通過高亮方式顯示所述第一圓弧。In an optional implementation manner, after receiving the first selection instruction, the method further includes: displaying the first arc in a highlight manner.
本發明實施例中，通過高亮方式顯示第一圓環，以便於更直觀清楚地顯示使用者所關注的資料。In the embodiment of the present invention, the first circle is displayed in a highlighted manner, so as to more intuitively and clearly display the data that the user pays attention to.
在一個可選的實現方式中，所述通過高亮方式顯示所述第一圓弧包括：通過高亮方式顯示所述第一圓環的同時，增大所述第一圓環的寬度。In an optional implementation manner, the displaying the first circular arc in a highlight manner includes: increasing the width of the first circular ring while displaying the first circular ring in a highlight manner.
在一個可選的實現方式中，所述N段圓弧中的第二圓弧的長度與所述第二圓弧對應的資料在總資料中的占比正相關，所述總資料為所述第一待視覺化資料中的所述第一類型的資料，所述第二圓弧為所述N段圓弧中的任一個。In an optional implementation manner, the length of the second arc in the N arcs is positively correlated with the proportion of the data corresponding to the second arc in the total data, and the total data is the For the data of the first type in the first data to be visualized, the second arc is any one of the N arcs.
本發明實施例中，每個圓弧的長度能反映該圓弧對應的那種狀態的資料在總資料中的占比，這樣用於就能根據圓環的實際弧長以及其他輔助性的資料顯示來做簡單迅速的資料判斷。In the embodiment of the present invention, the length of each arc can reflect the proportion of the data corresponding to the arc in the total data, so that it can be used according to the actual arc length of the ring and other auxiliary data. Display to make simple and quick data judgment.
在一個可選的實現方式中，所述N段圓弧中任意兩段圓弧的顏色不同。In an optional implementation manner, the colors of any two arcs in the N arcs are different.
在一個可選的實現方式中，所述將當前顯示的第二圓環更新為所述第一圓環包括：將所述第二圓環渲染到當前顯示的畫面中；所述畫面包括至少一個圓環，每個圓環對應一種類型的資料。In an optional implementation manner, the updating the currently displayed second ring to the first ring includes: rendering the second ring to the currently displayed screen; the screen includes at least one Rings, each ring corresponds to one type of data.
在一個可選的實現方式中，所述至少一個圓環以旋轉方式顯示，並且所述至少一個圓環中任意兩個圓環的旋轉速度不同。In an optional implementation manner, the at least one circular ring is displayed in a rotating manner, and the rotation speeds of any two circular rings in the at least one circular ring are different.
在一個可選的實現方式中，所述根據第一待視覺化資料，生成第一圓環之前，所述方法還包括：根據第二待視覺化資料，生成M個圓環；所述M個圓環中每個圓環對應一種類型的資料，所述M個圓環包括所述第二圓環，所述M為大於1的整數，所述第二待視覺化資料包括至少一種類型的資料；將所述M個圓環渲染到當前顯示的畫面中。In an optional implementation manner, before generating the first circular ring based on the first to-be-visualized data, the method further includes: generating M circular rings based on the second to-be-visualized data; the M Each ring in the ring corresponds to one type of data, the M rings include the second ring, the M is an integer greater than 1, and the second to-be-visualized data includes at least one type of data ; Render the M rings into the currently displayed picture.
本發明實施例中，每個圓環可反映一種類型的資料，視覺化模型簡單，使得使用者可直觀的看到資料的分佈，有助於使用者理解系統即時運行以及運營情況。In the embodiment of the present invention, each circle can reflect one type of data, and the visualization model is simple, so that the user can intuitively see the distribution of the data, which helps the user understand the real-time operation and operation of the system.
第二方面，本發明實施例提供了一種電子設備，包括：生成單元，配置為根據第一待視覺化資料，生成第一圓環；所述第一待視覺化資料包括第一類型的資料，所述第一類型的資料包括N種狀態的資料；所述第一圓環包括N段圓弧，所述N段圓弧中每段圓弧對應所述第一類型的一種狀態的資料，所述N為大於0的整數；顯示單元，配置為顯示所述第一圓環。In a second aspect, an embodiment of the present invention provides an electronic device, including: a generating unit configured to generate a first ring based on the first to-be-visualized data; the first to-be-visualized data includes a first type of data, The first type of data includes data in N states; the first ring includes N arcs, and each arc of the N arcs corresponds to data in one state of the first type, so The N is an integer greater than 0; the display unit is configured to display the first ring.
在一個可選的實現方式中，所述顯示單元，配置為將當前顯示的第二圓環更新為所述第一圓環；所述第二圓環為在得到所述第一待視覺化資料之前，根據所述第一類型的資料生成的圓環。In an optional implementation manner, the display unit is configured to update the currently displayed second circular ring to the first circular ring; Previously, a circular ring was generated based on the first type of data.
在一個可選的實現方式中，所述顯示單元，還配置為顯示一個目標圖形，所述目標圖形內部具有描述資訊，所述描述資訊用於描述所述第一圓環中任一圓弧表示的內容。In an optional implementation manner, the display unit is further configured to display a target graphic with description information inside the target graphic, and the description information is used to describe any arc representation in the first ring Content.
在一個可選的實現方式中，所述第一圓環顯示於所述目標圖形的四周，所述目標圖形為表徵光暈星球的圓形。In an optional implementation manner, the first circular ring is displayed around the target graphic, and the target graphic is a circle representing a halo planet.
在一個可選的實現方式中，所述第一圓環顯示在一個表徵光暈星球的圓形的四周，所述圓形的內部顯示有描述資訊。In an optional implementation manner, the first ring is displayed around a circle representing a halo planet, and description information is displayed inside the circle.
在一個可選的實現方式中，所述電子設備還包括：接收單元，配置為接收第一選擇指令；所述第一選擇指令用於選擇所述第一圓環中的所述第一圓弧，所述第一圓弧為所述N段圓弧中的任一個；所述顯示單元，還配置為顯示所述第一圓弧對應的資料。In an optional implementation manner, the electronic device further includes: a receiving unit configured to receive a first selection instruction; the first selection instruction is used to select the first arc in the first ring The first arc is any one of the N arcs; the display unit is further configured to display data corresponding to the first arc.
在一個可選的實現方式中，所述顯示單元，配置為通過高亮方式顯示所述第一圓弧。In an optional implementation manner, the display unit is configured to display the first arc in a highlight manner.
在一個可選的實現方式中，所述顯示單元，配置為通過高亮方式顯示所述第一圓環的同時，增大所述第一圓環的寬度。In an optional implementation manner, the display unit is configured to increase the width of the first ring while displaying the first ring in a highlight manner.
在一個可選的實現方式中，所述N段圓弧中的第二圓弧的長度與所述第二圓弧對應的資料在總資料中的占比正相關，所述總資料為所述第一待視覺化資料中的所述第一類型的資料，所述第二圓弧為所述N段圓弧中的任一個。In an optional implementation manner, the length of the second arc in the N arcs is positively correlated with the proportion of the data corresponding to the second arc in the total data, and the total data is the For the data of the first type in the first data to be visualized, the second arc is any one of the N arcs.
在一個可選的實現方式中，所述N段圓弧中任意兩段圓弧的顏色不同。In an optional implementation manner, the colors of any two arcs in the N arcs are different.
在一個可選的實現方式中，所述顯示單元，配置為將所述第二圓環渲染到當前顯示的畫面中；所述畫面包括至少一個圓環，所述至少一個圓環中每個圓環對應一種類型的資料。In an optional implementation manner, the display unit is configured to render the second ring into the currently displayed picture; the picture includes at least one ring, and each circle in the at least one ring The ring corresponds to one type of data.
在一個可選的實現方式中，所述至少一個圓環以旋轉方式顯示，並且所述至少一個圓環中任意兩個圓環的旋轉速度不同。In an optional implementation manner, the at least one circular ring is displayed in a rotating manner, and the rotation speeds of any two circular rings in the at least one circular ring are different.
在一個可選的實現方式中，所述生成單元，還配置為根據第二待視覺化資料，生成M個圓環；所述M個圓環中每個圓環對應一種類型的資料，所述M個圓環包括所述第二圓環，所述M為大於1的整數，所述第二待視覺化資料包括至少一種類型的資料；所述顯示單元，還配置為將所述M個圓環渲染到當前顯示的畫面中。In an optional implementation manner, the generating unit is further configured to generate M rings according to the second data to be visualized; each ring of the M rings corresponds to one type of data, and The M rings include the second ring, the M is an integer greater than 1, and the second to-be-visualized data includes at least one type of data; the display unit is further configured to display the M circles The ring is rendered into the currently displayed picture.
第三方面，本發明實施例提供了一種電子設備，該電子設備包括：記憶體，用於儲存程式；處理器，用於執行所述記憶體儲存的所述程式，當所述程式被執行時，所述處理器用於執行如上述第一方面以及任一種可選的實現方式的方法。In a third aspect, an embodiment of the present invention provides an electronic device that includes: a memory for storing a program; a processor for executing the program stored in the memory, and when the program is executed , The processor is configured to execute the method in the first aspect and any one of the optional implementation manners described above.
第四方面，本發明實施例提供了一種晶片，該晶片包括處理器與資料介面，該處理器通過該資料介面讀取記憶體上儲存的指令，執行如上述第一方面以及任一種可選的實現方式的方法。In a fourth aspect, an embodiment of the present invention provides a chip that includes a processor and a data interface. The processor reads instructions stored on a memory through the data interface, and executes any of the above-mentioned first aspect and any optional Way of realization.
第五方面，本發明實施例提供了一種電腦可讀儲存介質，該電腦儲存介質儲存有電腦程式，該電腦程式包括程式指令，該程式指令當被處理器執行時使該處理器執行上述第一方面及任一種可選的實現方式的方法。In a fifth aspect, an embodiment of the present invention provides a computer-readable storage medium, the computer storage medium stores a computer program, the computer program includes program instructions, when the program instructions are executed by a processor, the processor executes the first Aspects and any optional implementation methods.
第六方面，本發明實施例提供了一種電腦程式產品，該電腦程式產品包括程式指令，所述程式指令當被處理器執行時使所述處理器執行上述第一方面以及任一種可選的實現方式的方法。In a sixth aspect, an embodiment of the present invention provides a computer program product, the computer program product includes program instructions that, when executed by a processor, cause the processor to execute the first aspect and any optional implementations described above Way way.
本發明的說明書實施例和申請專利範圍及上述附圖中的術語“第一”、“第二”、和“第三”等是用於區別類似的物件，而不必用於描述特定的順序或先後次序。此外，術語“包括”和“具有”以及他們的任何變形，意圖在於覆蓋不排他的包含，例如，包含了一系列步驟或單元。方法、系統、產品或設備不必限於清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對於這些過程、方法、產品或設備固有的其它步驟或單元。The terms "first", "second", and "third" in the embodiments of the specification of the present invention and the scope of the patent application and the above-mentioned drawings are used to distinguish similar items, and are not necessarily used to describe a specific order or Priority. In addition, the terms "including" and "having" and any variations of them are intended to cover non-exclusive inclusion, for example, including a series of steps or units. The method, system, product, or device is not necessarily limited to those clearly listed steps or units, but may include other steps or units that are not clearly listed or are inherent to these processes, methods, products, or devices.
本發明實施例提供一種資料顯示方法、電腦可讀儲存介質、電子設備和晶片，能夠展示資料之間的關聯性，並且資料模型簡單。本發明實施例提供的資料顯示方法（即資料視覺化方法）適用於資料視覺化場景中，使得使用者可以直觀的感受資料的變化，並且通過與視覺化資料交互可以清晰明瞭的知道每一份資料在系統中扮演的角色。The embodiment of the present invention provides a data display method, a computer-readable storage medium, an electronic device, and a chip, which can display the correlation between the data and has a simple data model. The data display method (ie data visualization method) provided by the embodiment of the present invention is suitable for data visualization scenes, so that users can intuitively feel the changes of data, and can clearly know each piece by interacting with the visualization data The role of data in the system.
圖1為本發明實施例提供的一種資料顯示方法流程圖。如圖1所示，該方法可包括如下。FIG. 1 is a flowchart of a data display method provided by an embodiment of the present invention. As shown in Figure 1, the method may include the following.
101、電子設備根據第一待視覺化資料，生成第一圓環。101. The electronic device generates a first ring based on the first to-be-visualized data.
上述第一待視覺化資料包括第一類型的資料，上述第一類型的資料包括N種不同狀態的資料；上述第一圓環包括N段圓弧，每段圓弧對應上述第一類型的一種狀態的資料，上述N為大於0的整數。本發明實施例的執行主體可以是臺式電腦、筆記型電腦、伺服器等電子設備。The first data to be visualized includes a first type of data, and the first type of data includes data in N different states; the first ring includes N arcs, and each arc corresponds to one of the first types. State information, the above N is an integer greater than 0. The execution subject of the embodiment of the present invention may be an electronic device such as a desktop computer, a notebook computer, and a server.
可選的，電子設備根據第一待視覺化資料，生成第一圓環可以是：根據第一待視覺化資料包括的至少一種類型的資料以及每種類型的資料對應的狀態，換算圓環的大小以及圓環的弧；其中，每個圓環表徵一種類型的資料，同一個圓環中不同圓弧表徵不同狀態的資料。舉例來說，第一圓環包括3段圓弧，每段圓弧對應一種狀態的第一類型的資料。Optionally, the electronic device generating the first circular ring based on the first to-be-visualized data may be: converting the circular ring based on at least one type of data included in the first to-be-visualized data and the state corresponding to each type of data The size and the arc of the ring; among them, each ring represents one type of data, and different arcs in the same ring represent data of different states. For example, the first ring includes three arcs, and each arc corresponds to a state of the first type of data.
示例性的，上述N段圓弧中的第二圓弧的長度與上述第二圓弧對應的資料在總資料中的占比正相關，上述總資料為上述第一待視覺化資料中的上述第一類型的資料，上述第二圓弧為上述N段圓弧中的任一個。Exemplarily, the length of the second arc in the N arcs is positively correlated with the proportion of the data corresponding to the second arc in the total data, and the total data is the above-mentioned data in the first to-be-visualized data. For the first type of data, the second arc is any one of the N arcs.
本實施例中，每一段圓弧的長取決於其對應的資料在總資料中的占比。例如，第二圓弧表徵的數值為100，總資料表征的數值為500，則該第二圓弧的弧長與第一圓環的長度的比值為20%，即第二圓弧的占比為20%。In this embodiment, the length of each arc depends on the proportion of the corresponding data in the total data. For example, if the value represented by the second arc is 100 and the value represented by the total data is 500, the ratio of the arc length of the second arc to the length of the first ring is 20%, that is, the proportion of the second arc Is 20%.
在該實現方式中，每個圓弧的長度能反映該圓弧對應的那種狀態的資料在總資料中的占比，這樣用於就能根據圓環的實際弧長以及其他輔助性的資料顯示來做簡單迅速的資料判斷。In this implementation, the length of each arc can reflect the proportion of the data corresponding to the arc in the total data, so that it can be used according to the actual arc length of the ring and other auxiliary data Display to make simple and quick data judgment.
可選地，上述N段圓弧中任意兩段圓弧的顏色不同。Optionally, the colors of any two arcs in the N arcs are different.
102、電子設備顯示上述第一圓環。102. The electronic device displays the aforementioned first circle.
在一些實施例中，上述第一圓環可以是首次根據上述第一待視覺化資料，生成的圓環。在一些實施例中，上述第一圓環可以是非首次根據上述第一待視覺化資料，生成的圓環；電子設備顯示上述第一圓環可以是將當前顯示的第二圓環更新為上述第一圓環；上述第二圓環為在得到上述第一待視覺化資料之前，根據上述第一類型的第二資料生成的圓環。In some embodiments, the first ring may be a ring generated for the first time based on the first to-be-visualized data. In some embodiments, the first ring may be a ring generated for the first time based on the first to-be-visualized data; the display of the first ring by the electronic device may be to update the currently displayed second ring to the first A ring; the second ring is a ring generated based on the first type of second data before the first to-be-visualized data is obtained.
可選的，上述第一待視覺化資料為電子設備對即時採集的資料進行匯總得到的待視覺化資料。可選的，上述第一待視覺化資料為服務端（例如伺服器）對即時採集到的資料進行匯總之後，發送給上述電子設備（對應前端）的。也就是說，電子設備從服務端（對應於後臺伺服器）獲得上述第一待視覺化資料。可選的，上述第一待視覺化資料為使用者通過移動儲存裝置，例如優盤、移動硬碟等，拷貝至上述電子設備的。Optionally, the above-mentioned first data to be visualized is data to be visualized obtained by aggregating real-time collected data by the electronic device. Optionally, the above-mentioned first data to be visualized is sent to the above-mentioned electronic device (corresponding to the front-end) after the server (for example, the server) summarizes the real-time collected data. In other words, the electronic device obtains the above-mentioned first to-be-visualized data from the server (corresponding to the background server). Optionally, the above-mentioned first data to be visualized is copied by the user to the above-mentioned electronic device through a mobile storage device, such as a USB flash drive, a mobile hard disk, and the like.
在一些實施例中，電子設備（即前端）可根據實際資料（即待視覺化資料）換算圓環的大小以及圓環的弧長（例如生成第一圓環）。舉例來說，電子設備根據待視覺化資料，生成多個由內到外分佈的圓環，每個圓環代表一種類型的資料，每個圓環包括至少一段圓弧，每段圓弧表徵一種狀態的資料。舉例來說，某個系統中產生了多種狀態不同但類型相同的資料，其中一種狀態的資料新增15份，那麼這個狀態相對應的弧長會變長。本發明實施例中，電子設備當前顯示有一個或者多個圓環（包括第二圓環）；該電子設備可根據最近得到的待視覺化資料，生成新的圓環，並更新當前顯示的圓環。電子設備具備或者連接有顯示裝置，例如顯示器，該顯示裝置用於顯示生成的圓環。In some embodiments, the electronic device (ie, the front end) can convert the size of the ring and the arc length of the ring (for example, generate the first ring) according to the actual data (ie, the data to be visualized). For example, the electronic device generates multiple rings distributed from the inside to the outside according to the data to be visualized. Each ring represents one type of data. Each ring includes at least one arc, and each arc represents one type. Status information. For example, if a system generates multiple data with different states but the same type, and 15 new data in one state, the arc length corresponding to this state will become longer. In the embodiment of the present invention, the electronic device currently displays one or more rings (including the second ring); the electronic device can generate a new ring based on the recently obtained data to be visualized, and update the currently displayed ring ring. The electronic device is provided with or connected to a display device, such as a display, for displaying the generated ring.
下面結合附圖來描述如何將當前顯示的第二圓環更新為第一圓環。The following describes how to update the currently displayed second ring to the first ring with reference to the accompanying drawings.
圖2為本發明實施例提供的一種視覺化介面的對比示意圖。如圖2所示，左半圖中的3個圓環為當前顯示的圓環，其中，202表示第二圓環；右半圖中的3個圓環為更新後的圓環，其中，205表示第一圓環。對比圖2的左半圖和右半圖可知，第二圓環202和第一圓環205相比，各圓弧的占比發生改變。示例性的，圖2左半圖中的圓環201、圓環202（即第二圓環）以及圓環203分別為根據第二待視覺化資料中的第一類型資料、第二類型資料以及第三類型資料生成的；圖2右半圖中的圓環204、圓環205（即第一圓環）以及圓環206分別為根據第一待視覺化資料中的第一類型資料、第二類型資料以及第三類型資料生成的；該第一待視覺化資料為最近獲得的待視覺化資料，該第二待視覺化資料為在獲得該第一待視覺化資料之前獲得的待視覺化資料。又舉例來說，電子設備當前顯示有圓環1至圓環3，其中，圓環1為根據類型1的資料生成的，圓環2為根據類型2的資料生成的，圓環3為根據類型3的資料生成的；在第一待視覺化資料包括的類型2和類型3的資料與第二待視覺化資料包括的類型2和類型3的資料不同時，更新圓環2和圓環3。應理解，電子設備可根據即時獲得的待視覺化資料，生成相應的圓環，並顯示。也就是說，電子設備可根據獲取的待視覺化資料即時更新顯示的圓環，圓環能即時反映當前的資料。在實際應用中，每次待視覺化資料發生變化時，都會觸發電子設備自動渲染成為新的比例的圓環。另外，同一圓環上的不同圓弧表徵類型相同狀態不同的資料，能體現資料之間的關聯性。FIG. 2 is a schematic diagram of comparison of a visual interface provided by an embodiment of the present invention. As shown in Figure 2, the 3 rings in the left half of the picture are the currently displayed rings, of which 202 represents the second ring; the 3 rings in the right half of the picture are the updated rings, of which, 205 Represents the first ring. Comparing the left half of the diagram and the right half of the diagram in FIG. 2, it can be seen that the proportions of the arcs of the
則在一些實施例中，上述將當前顯示的第二圓環更新為上述第一圓環包括：將上述第二圓環渲染到當前顯示的畫面中；上述畫面包括至少一個圓環，所述至少一個圓環中每個圓環對應一種類型的資料。Then, in some embodiments, updating the currently displayed second ring to the first ring includes: rendering the second ring to the currently displayed screen; the screen includes at least one ring, and the at least Each ring in a ring corresponds to one type of data.
示例性的，電子設備基於前端可縮放的向量圖形（Scalable Vector Graphics，SVG）以及畫布（Canvas）前端渲染技術動態渲染光環效果，即將所述第二圓環渲染到當前顯示的畫面中。Exemplarily, the electronic device dynamically renders the halo effect based on the front-end scalable vector graphics (Scalable Vector Graphics, SVG) and canvas (Canvas) front-end rendering technology, that is, the second ring is rendered into the currently displayed picture.
可選地，上述至少一個圓環以旋轉方式顯示，並且上述至少一個圓環中任意兩個圓環的旋轉速度不同。Optionally, the aforementioned at least one circular ring is displayed in a rotating manner, and the rotation speeds of any two of the aforementioned at least one circular ring are different.
示例性的，電子設備在做動畫渲染時使用層疊樣式表3級（Cascading Style Sheets Level 3，CSS3）animate工具對各圓環的轉動參數做調整,例如對不同的圓環的旋轉速率進行差速調整，以達到不同圓環不同速率的效果。另外，實現進場動畫由快到慢的變化以及旋轉動畫的控制。舉例來說，第一圓環每隔10秒旋轉360度。Exemplarily, the electronic device uses the Cascading Style Sheets Level 3 (CSS3) animate tool to adjust the rotation parameters of each ring when rendering the animation, for example, the rotation rate of different rings is differentially adjusted. Adjust to achieve the effect of different speeds of different rings. In addition, it realizes the change of approach animation from fast to slow and the control of rotation animation. For example, the first ring rotates 360 degrees every 10 seconds.
在一些實施例中，電子設備除了顯示上述第一圓環之外，還顯示一個目標圖形，上述目標圖形內部具有描述資訊，上述描述資訊用於描述上述第一圓環中任一圓弧表示的內容。示例性的，上述第一圓環顯示於上述目標圖形的四周，上述目標圖形為表徵發光圓球（即光暈星球）的圓形。在一些實施例中，上述第一圓環顯示在一個表徵光暈星球的圓形（對應於目標圖形）的四周，上述圓形的內部顯示有描述資訊。電子設備當前顯示的內容可視為一個視覺化模型，該視覺化模型包括至少一個圓環。示例性的，在當前顯示的圓環均未被選中的情況下，顯示第一描述資訊，所述第一描述資訊用於描述視覺化模型的資訊；在所述第一圓環被選中的情況下，顯示第二描述資訊，所述第二描述資訊用於描述所述第一類型的資料。In some embodiments, in addition to displaying the first circular ring, the electronic device also displays a target graphic. The target graphic has description information inside, and the description information is used to describe any arc in the first circular ring. content. Exemplarily, the first circular ring is displayed around the target graphic, and the target graphic is a circle that represents a luminous sphere (that is, a halo planet). In some embodiments, the above-mentioned first ring is displayed around a circle (corresponding to the target figure) that represents a halo planet, and description information is displayed inside the above-mentioned circle. The content currently displayed by the electronic device can be regarded as a visual model, and the visual model includes at least one circular ring. Exemplarily, when none of the currently displayed circles are selected, first descriptive information is displayed, where the first descriptive information is used to describe the information of the visualization model; when the first circle is selected In the case of displaying the second description information, the second description information is used to describe the first type of data.
圖3為本發明實施例提供的另一種視覺化介面的對比示意圖。圖3中，304和308均表徵發光圓球（即光暈星球），301至303分別表示一個圓環，305至307分別表示一個圓環，發光圓球304內部顯示的資訊為發光圓球304在各圓環均未被選中時顯示的描述資訊，發光圓球308內部顯示的資訊為發光圓球308在第一圓環（例如圓環306）上的第一圓弧被選中時顯示的描述資訊（即第一描述資訊），該第一描述資訊用於描述第一圓弧表示的內容。當滑鼠移動至某段圓環或者某段圓環被點擊時，該圓弧被選中。舉例來說，圖3左半圖為電子設備當前顯示的畫面，其中，當前顯示的各圓環（即圓環301至圓環303）均未被選中，發光圓球304內部顯示的資訊為用於描述視覺化模型的資訊，描述資訊例如可以是運行天數；圖3的右半圖為滑鼠移動至圓環302上的某一段圓弧或者通過滑鼠點擊圓環302上的某一段圓弧之後，顯示的畫面，其中，發光圓球308內部顯示的資訊為用於描述圓環306（對應於圓環302）上被選中的一段圓弧的資訊（即第一描述資訊）。通過將至少一個圓環顯示在發光圓球的周圍，並在該發光圓球的內部顯示相應的描述資訊，使得使用者更直接的感受資料的變化以及各圓環表徵的資料。FIG. 3 is a schematic diagram of comparison of another visualization interface provided by an embodiment of the present invention. In Figure 3, 304 and 308 both represent a light-emitting sphere (a halo planet), 301 to 303 represent a ring respectively, and 305-307 represent a ring respectively. The information displayed inside the light-emitting
本發明實施例中，用戶通過圓環的變化可以直觀的感受資料的變化，並且能夠較好的展示資料之間的關聯性。In the embodiment of the present invention, the user can intuitively feel the change of the data through the change of the circle, and can better display the correlation between the data.
圖1描述的是如何根據當前獲得的待視覺化資料，更新當前顯示的圓環的方法流程。下面來描述如何生成並顯示原始的圓環。Figure 1 describes how to update the currently displayed circle based on the currently obtained data to be visualized. The following describes how to generate and display the original ring.
可選的，電子設備在執行步驟101之前，可執行如下操作：根據第二待視覺化資料，生成M個圓環（對應於原始的圓環）；上述M個圓環中每個圓環對應一種類型的資料，上述M個圓環包括上述第二圓環，上述M為大於1的整數；將上述M個圓環（對應於圖2左半圖中的圓環）渲染到當前顯示的畫面中。上述第二待視覺化資料可以理解為啟動資料視覺化顯示任務之後，最先被顯示的待視覺化資料。在該實現方式中，每個圓環可反映一種類型的資料，視覺化模型簡單，使得使用者可直觀的看到資料的分佈，有助於使用者理解系統即時運行以及運營情況。Optionally, before performing
在一些實施例中，啟動資料視覺化顯示任務之後，根據第二待視覺化資料，生成M個圓環；通過進場動畫（例如各圓環的旋轉速度由快變慢）顯示上述M個圓環。進場動畫播放完畢之後，各圓環的旋轉速度不再改變。可選的，電子設備在將上述M個圓環渲染到當前顯示的畫面中的同時，可使用CSS3 animate 對圓環的轉動參數做調整（即動畫渲染），對不同的圓環的旋轉速率進行差速調整，以達到不同圓環不同速率的效果。後續電子設備可根據即時待視覺化資料來更新顯示的畫面，以便於使用者理解通過顯示的圓環和圓弧瞭解即時資料。In some embodiments, after starting the data visualization display task, M circles are generated according to the second to-be-visualized data; the above M circles are displayed through an approach animation (for example, the rotation speed of each circle changes from fast to slow) ring. After the approach animation is played, the rotation speed of each ring will no longer change. Optionally, the electronic device can use CSS3 animate to adjust the rotation parameters of the rings (that is, animation rendering) while rendering the above M rings into the currently displayed picture, and perform the rotation rate of different rings. Differential speed adjustment to achieve the effect of different speeds of different rings. The subsequent electronic device can update the displayed screen according to the real-time to-be-visualized data, so that the user can understand the real-time data through the displayed circle and arc.
前述實施例描述了如何顯示圓環以及根據更新後的資料更新顯示的圓環的方式。下面介紹用戶如何與圓環進行交互以瞭解所需資料的方式。The foregoing embodiment describes how to display the circle and the manner of updating the displayed circle according to the updated data. The following describes how the user interacts with the circle to understand the required information.
示例性的，電子設備在執行步驟102之後，可實現如下操作：在接收到第一選擇指令之後，顯示第一圓弧對應的資料；上述第一選擇指令用於選擇上述第一圓環中的上述第一圓弧，上述第一圓弧為上述N段圓弧中的任一個。Exemplarily, after performing
在一些實施例中，接收到第一選擇指令可以是接收到使用者通過輸入裝置（例如滑鼠）針對上述第一圓弧的點擊操作；還可以是將滑鼠移動至上述第一圓弧的操作；還可以是其他選擇上述第一圓弧的操作，本發明實施例不作限定。上述顯示第一圓弧對應的資料可以是在表徵發光圓球（即光暈星球）的圓形的內部顯示第一圓弧對應的資料的描述資訊和/或上述第一圓弧對應的資料；也可以是在表徵發光圓球（即光暈星球）的圓形的內部顯示第一圓弧對應的資料的描述資訊，並且在畫面中的其他位置顯示第一圓弧對應的資料。舉例來說，每個圓環反映一個區域（例如省級區域、市級區域、縣級區域）的某種傳染病的疫情資料，疫情資料分為確診人數、疑似病例數、死亡人數以及治癒人數（即對應4種狀態），其中，每個圓環中的圓弧分別反映確診人數、疑似病例數、死亡人數以及治癒人數中的一種；如果使用者點擊或者將滑鼠移動至表徵某個區域的疑似病例的圓弧上，則在表徵發光圓球（即光暈星球）的圓形的內部顯示疑似病例以及疑似病例數，並在其他位置顯示該區域的名稱。例如某個區域的確診人數、疑似病例、死亡人數均不為零，治癒人數為0，反映該區域的疫情的圓環包括3個圓弧，分別反映確診人數、疑似病例、死亡人數。又例如某個區域的確診人數、死亡人數以及治癒人數均為零，疑似病例不為0，反映該區域的疫情的圓環包括1個圓弧（即圓環），該圓環反映疑似病例。在該實現方式中，使用者通過這種圓環交互可以清晰明瞭的知道每一份資料在系統中扮演的角色，以便於使用者可以根據這些資料做出實際判斷，交互性強。In some embodiments, receiving the first selection instruction may be receiving a user's click operation on the above-mentioned first arc through an input device (such as a mouse); it may also be moving the mouse to the above-mentioned first arc. Operation; it may also be other operations for selecting the above-mentioned first arc, which is not limited in the embodiment of the present invention. The above-mentioned displaying the data corresponding to the first arc may be displaying the description information of the data corresponding to the first arc and/or the data corresponding to the above-mentioned first arc inside the circle that characterizes the luminous sphere (that is, the halo planet); It may also be that the description information of the data corresponding to the first arc is displayed inside the circle that characterizes the luminous sphere (that is, the halo planet), and the data corresponding to the first arc is displayed in other positions on the screen. For example, each circle reflects the epidemic information of a certain infectious disease in a region (such as a provincial region, a municipal region, or a county region). The epidemic information is divided into the number of confirmed cases, the number of suspected cases, the number of deaths, and the number of cured people. (That is, corresponding to 4 states), where the arc in each circle reflects one of the number of confirmed cases, the number of suspected cases, the number of deaths, and the number of people cured; if the user clicks or moves the mouse to a certain area On the arc of the suspected cases of, the suspected cases and the number of suspected cases are displayed inside the circle that characterizes the luminous sphere (that is, the halo planet), and the name of the area is displayed in other places. For example, the number of confirmed cases, suspected cases, and deaths in a certain area is not zero, and the number of cured people is 0. The circle reflecting the epidemic situation in the area includes 3 arcs, reflecting the number of confirmed cases, suspected cases, and deaths respectively. For another example, the number of confirmed cases, the number of deaths, and the number of cured cases in a certain area are all zero, and the number of suspected cases is not 0. The circle reflecting the epidemic situation in the area includes an arc (ie circle), which reflects the suspected case. In this implementation, the user can clearly know the role played by each piece of data in the system through this ring interaction, so that the user can make actual judgments based on the data, and the interaction is strong.
可選的，在接收到第一選擇指令之後，上述方法還包括：通過高亮方式顯示上述第一圓弧。可選地，在通過高亮方式顯示上述第一圓弧的同時，上述第一圓環的寬度增大。其中，通過高亮方式顯示上述第一圓弧可以是：上述第一圓環的亮度增高，上述第一圓環中除上述第一圓弧之外的圓弧的亮度均降低或者保持不變，以便於上述第一圓環中除上述第一圓弧之外的圓弧的亮度均低於上述第一圓弧的亮度。可選的，通過高亮方式顯示上述第一圓弧的同時，同比例增大上述第一圓環中的各圓弧。也就是說，通過高亮方式顯示的上述第一圓弧的寬度大於非高亮方式顯示的上述第一圓弧的寬度。圖4為本發明實施例提供的又一種視覺化介面的對比示意圖。圖4中，44和48均表徵發光圓球（即光暈星球），圓環41至圓環43依次表徵第一類型至第三類型的資料，圓環45至圓環47依次表徵第一類型至第三類型的資料，圓環421至圓弧423表徵3種類型（對應於圓環42）相同狀態不同的資料（例如同一區域的確診人數、疑似病例以及死亡人數），圓弧424（對應於第一圓弧）至圓弧426依次對應高亮方式顯示的圓環421至圓弧423，其中，圓環424的亮度高於圓環421的亮度，圓弧424（對應於第一圓弧）至圓弧426的寬度大於圓環421至圓弧423的寬度。舉例來說，電子設備當前顯示的畫面為圖4中的左半圖，當使用者點擊或者將滑鼠移動至圓弧421時，顯示圖4中的右半圖；其中，圓環421可視為第一圓弧。對比圖4的左半圖和右半圖可知，當某段圓弧被選中之後，通過高亮方式顯示該段圓弧，以便於用戶更直觀清晰地看到選中的圓環所表徵的資料。Optionally, after receiving the first selection instruction, the above method further includes: displaying the above first arc in a highlight manner. Optionally, while the first arc is displayed in a highlight manner, the width of the first ring is increased. Wherein, displaying the first arc in a highlight manner may be: the brightness of the first ring is increased, and the brightness of the arcs in the first ring except the first arc is decreased or remains unchanged, Therefore, the brightness of the arcs in the first circular ring except the first circular arc is lower than the brightness of the first circular arc. Optionally, while the first arc is displayed in a highlight manner, each arc in the first ring is increased in the same proportion. In other words, the width of the first arc displayed in the highlight mode is greater than the width of the first arc displayed in the non-highlight mode. FIG. 4 is a schematic diagram of comparison of yet another visual interface provided by an embodiment of the present invention. In Fig. 4, both 44 and 48 represent light-emitting spheres (that is, halo planets), rings 41 to 43 in turn represent the first to third types of data, and rings 45 to 47 in turn represent the first type To the third type of data,
本發明實施例中，使用者可以使用滑鼠點擊和移動到對應的圓弧上操作圓環，來達到切換資料等目的，交互性強、操作簡單。In the embodiment of the present invention, the user can use the mouse to click and move to the corresponding arc to operate the ring to achieve the purpose of switching data, etc., with strong interaction and simple operation.
圖5為本發明實施例提供的另一種資料顯示方法流程圖。圖5中的方法流程是對圖1中的方法流程的進一步細化和完善。如圖5所示，該方法可包括如下。FIG. 5 is a flowchart of another data display method provided by an embodiment of the present invention. The method flow in Figure 5 is a further refinement and improvement of the method flow in Figure 1. As shown in Figure 5, the method may include the following.
501、服務端（對應於後臺伺服器）即時或者週期性採集資料，並匯總得到第二待視覺化資料。501. The server (corresponding to the background server) collects data in real time or periodically, and summarizes the second data to be visualized.
502、服務端將第二待視覺化資料發送給電子設備（對應於前端）。502. The server sends the second to-be-visualized data to the electronic device (corresponding to the front end).
503、電子設備根據第二待視覺化資料，生成M個圓環。503. The electronic device generates M rings based on the second to-be-visualized data.
上述M個圓環中每個圓環對應一種類型的資料，上述M個圓環包括第二圓環，上述M為大於1的整數。可選的，上述M個圓環的大小不同。Each of the aforementioned M rings corresponds to one type of data, the aforementioned M rings include a second ring, and the aforementioned M is an integer greater than one. Optionally, the sizes of the aforementioned M rings are different.
504、電子設備將上述M個圓環渲染到當前顯示的畫面中。504. The electronic device renders the above M rings into the currently displayed picture.
電子設備將上述M個圓環渲染到當前顯示的畫面中可以是通過進場動畫（例如各圓環的旋轉速度由快變慢）顯示上述M個圓環。進場動畫播放完畢之後，各圓環的旋轉速度不再改變。可選的，電子設備在將上述M個圓環渲染到當前顯示的畫面中的同時，可使用CSS3 animate 對圓環的轉動參數做調整（即動畫渲染），對不同的圓環的旋轉速率進行差速調整，以達到不同圓環不同速率的效果。可選的，上述M個圓環均分佈在一個發光圓球（即光暈星球）的圓球的四周，且上述M個圓環中任意兩個圓環不重疊。可選的，上述M個圓環中各圓環的旋轉速度不同。上述M個圓環均以旋轉方式顯示，並且上述M個圓環中任意兩個圓環的旋轉速度不同。The electronic device rendering the above M rings into the currently displayed screen may display the above M rings through an approach animation (for example, the rotation speed of each ring changes from fast to slow). After the approach animation is played, the rotation speed of each ring will no longer change. Optionally, the electronic device can use CSS3 animate to adjust the rotation parameters of the rings (that is, animation rendering) while rendering the above M rings into the currently displayed picture, and perform the rotation rate of different rings. Differential speed adjustment to achieve the effect of different speeds of different rings. Optionally, the foregoing M rings are all distributed around a sphere of a luminous sphere (that is, a halo planet), and any two of the foregoing M rings do not overlap. Optionally, the rotation speed of each of the above M rings is different. The above-mentioned M rings are all displayed in a rotating manner, and the rotation speeds of any two of the above-mentioned M rings are different.
505、服務端將對採集的資料匯總得到的第一待視覺化資料發送給電子設備（對應於前端）。505. The server sends the first to-be-visualized data obtained by summarizing the collected data to the electronic device (corresponding to the front end).
506、電子設備根據第一待視覺化資料，生成第一圓環。506. The electronic device generates a first ring based on the first to-be-visualized data.
上述第一待視覺化資料包括第一類型的資料，上述第一類型的資料包括N種狀態的資料；上述第一圓環包括N段圓弧，每段圓弧對應上述第一類型的一種狀態的資料，上述N為大於0的整數。可選的，上述N段圓弧中的第二圓弧的長度與上述第二圓弧對應的資料在總資料中的占比正相關，上述總資料為上述第一待視覺化資料中的上述第一類型的資料，上述第二圓弧為上述N段圓弧中的任一個。The first to-be-visualized data includes a first type of data, and the first type of data includes data in N states; the first ring includes N arcs, and each arc corresponds to a state of the first type. The above-mentioned N is an integer greater than 0. Optionally, the length of the second arc in the N arcs is positively correlated with the proportion of the data corresponding to the second arc in the total data, and the total data is the above-mentioned data in the first to-be-visualized data. For the first type of data, the second arc is any one of the N arcs.
步驟506的實現方式可與步驟101的實現方式相同。示例性的，根據第一待視覺化資料，生成M個圓環（包括第一圓環）。The implementation of
507、電子設備將當前顯示的第二圓環更新為上述第一圓環。507. The electronic device updates the currently displayed second ring to the aforementioned first ring.
步驟507的實現方式可與步驟102的實現方式相同。示例性的，電子設備利用根據第一待視覺化資料生成的多個圓環，替換根據第二待視覺化資料生成的多個圓環。應理解，當伺服器（即後端）傳遞的資料或者外界有資料變化，都會觸發電子設備生成新的圓環，並顯示。也就是說，電子設備顯示的圓環可以是根據最近得到的待視覺化資料生成的，即顯示的圓環可以是即時更新的。The implementation of
508、在接收到第一選擇指令之後，顯示第一圓弧對應的資料，並通過高亮方式顯示上述第一圓弧。508. After receiving the first selection instruction, display the data corresponding to the first arc, and display the above-mentioned first arc by highlighting.
上述第一選擇指令用於選擇上述第一圓環中的上述第一圓弧，上述第一圓弧為上述N段圓弧中的任一個。可選的，在通過高亮方式顯示上述第一圓弧時，上述第一圓環的寬度增大。可選的，第一圓環中的任一段圓弧被選中時，被選中的一段圓弧的亮度增高，該第一圓環的大小不變且寬度變大，除該第一圓環之外的至少一個圓環的寬度變小。The first selection instruction is used to select the first arc in the first ring, and the first arc is any one of the N arcs. Optionally, when the first arc is displayed in a highlight manner, the width of the first ring is increased. Optionally, when any arc in the first ring is selected, the brightness of the selected arc increases, the size of the first ring remains unchanged and the width becomes larger, except for the first ring The width of at least one ring outside becomes smaller.
509、在檢測到上述第一圓弧未被選中之後，通過非高亮方式顯示上述第一圓弧。509. After detecting that the first arc is not selected, display the first arc in a non-highlighting manner.
示例性的，檢測到上述第一圓弧未被選中可以是檢測到其他圓弧被選中或者檢測到滑鼠從上述第一圓環上離開。通過非高亮方式顯示上述第一圓弧可以是上述第一圓環的亮度降低，並且上述第一圓環的寬度減小。Exemplarily, detecting that the first arc is not selected may be detecting that other arcs are selected or detecting that the mouse leaves the first ring. Displaying the first arc in a non-highlight manner may be that the brightness of the first ring is reduced, and the width of the first ring is reduced.
本發明實施例中，用戶通過圓環的變化可以直觀的感受資料的變化，使用者通過這種圓環交互可以清晰明瞭的知道每一份資料在系統中扮演的角色，以便於使用者可以根據這些資料做出實際判斷，交互性強。In the embodiment of the present invention, the user can intuitively feel the change of the data through the change of the circle, and the user can clearly know the role played by each piece of data in the system through this circle interaction, so that the user can follow These materials make actual judgments and are highly interactive.
圖6為本發明實施例提供的一種電子設備的結構示意圖。如圖6所示，該電子設備包括：
生成單元601，配置為根據第一待視覺化資料，生成第一圓環；上述第一待視覺化資料包括第一類型的資料，上述第一類型的資料包括N種狀態的資料；上述第一圓環包括N段圓弧，每段圓弧對應上述第一類型的一種狀態的資料，上述N為大於0的整數；
顯示單元602，配置為顯示上述第一圓環。FIG. 6 is a schematic structural diagram of an electronic device provided by an embodiment of the present invention. As shown in Figure 6, the electronic device includes:
The generating
在一個可選的實現方式中，顯示單元602，配置為將當前顯示的第二圓環更新為上述第一圓環；上述第二圓環為在得到上述第一待視覺化資料之前，根據上述第一類型的資料生成的圓環。In an optional implementation manner, the
在一個可選的實現方式中，顯示單元602，還配置為顯示一個目標圖形，上述目標圖形內部具有描述資訊，上述描述資訊用於描述當前顯示的內容。In an optional implementation manner, the
在一個可選的實現方式中，上述第一圓環顯示於上述目標圖形的四周，上述目標圖形為表徵光暈星球的圓形。In an optional implementation manner, the first circular ring is displayed around the target graphic, and the target graphic is a circle that represents a halo planet.
在一個可選的實現方式中，上述第一圓環顯示在一個表徵光暈星球的圓形的四周，上述圓形的內部顯示有描述資訊。In an optional implementation manner, the first ring is displayed around a circle that represents a halo planet, and description information is displayed inside the circle.
在一個可選的實現方式中，上述電子設備還包括：
接收單元603，配置為接收第一選擇指令；上述第一選擇指令用於選擇上述第一圓環中的上述第一圓弧，上述第一圓弧為上述N段圓弧中的任一個；
顯示單元602，還配置為顯示第一圓弧對應的資料。In an optional implementation manner, the above electronic device further includes:
The receiving
在一個可選的實現方式中，顯示單元602，配置為通過高亮方式顯示上述第一圓弧。In an optional implementation manner, the
在一個可選的實現方式中，顯示單元602，配置為通過高亮方式顯示上述第一圓環的同時，增大上述第一圓環的寬度。In an optional implementation manner, the
在一個可選的實現方式中，上述N段圓弧中的第二圓弧的長度與上述第二圓弧對應的資料在總資料中的占比正相關，上述總資料為上述第一待視覺化資料中的上述第一類型的資料，上述第二圓弧為上述N段圓弧中的任一個。In an optional implementation, the length of the second arc in the N arcs is positively correlated with the proportion of the data corresponding to the second arc in the total data, and the total data is the first to-be-viewed For the data of the first type in the chemical data, the second arc is any one of the N arcs.
在一個可選的實現方式中，上述N段圓弧中任意兩段圓弧的顏色不同。In an optional implementation manner, the colors of any two arcs in the above N arcs are different.
在一個可選的實現方式中，顯示單元602，配置為將上述第二圓環渲染到當前顯示的畫面中；上述畫面包括至少一個圓環，每個圓環對應一種類型的資料。In an optional implementation manner, the
在一個可選的實現方式中，上述至少一個圓環以旋轉方式顯示，並且上述至少一個圓環中任意兩個圓環的旋轉速度不同。In an optional implementation manner, the aforementioned at least one circular ring is displayed in a rotating manner, and the rotation speeds of any two of the aforementioned at least one circular ring are different.
在一個可選的實現方式中，生成單元601，還配置為根據第二待視覺化資料，生成M個圓環；上述M個圓環中每個圓環對應一種類型的資料，上述M個圓環包括上述第二圓環，上述M為大於1的整數；
顯示單元602，還配置為將上述M個圓環渲染到當前顯示的畫面中。In an optional implementation manner, the generating
應理解以上電子設備的各個單元的劃分僅僅是一種邏輯功能的劃分，實際實現時可以全部或部分集成到一個物理實體上，也可以物理上分開。例如，以上各個單元可以為單獨設立的處理元件，也可以集成同一個晶片中實現，此外，也可以以程式碼的形式儲存於控制器的記憶元件中，由處理器的某一個處理元件調用並執行以上各個單元的功能。此外各個單元可以集成在一起，也可以獨立實現。這裡的處理元件可以是一種積體電路晶片，具有信號的處理能力。在實現過程中，上述方法的各步驟或以上各個單元可以通過處理器元件中的硬體的集成邏輯電路或者軟體形式的指令完成。該處理元件可以是通用處理器，例如中央處理器（Central Processing Unit，CPU），還可以是被配置成實施以上方法的一個或多個積體電路，例如：一個或多個特定積體電路（Application-Specific Integrated Circuit，ASIC），或，一個或多個微處理器（Digital Signal Processor，DSP），或，一個或者多個現場可程式設計閘陣列（Field-Programmable Gate Array，FPGA）等。It should be understood that the division of each unit of the above electronic device is only a division of logical functions, and may be fully or partially integrated into one physical entity during actual implementation, or may be physically separated. For example, the above units can be separately established processing elements, or they can be integrated into the same chip. In addition, they can also be stored in the memory element of the controller in the form of program code, which is called and combined by a certain processing element of the processor. Perform the functions of each unit above. In addition, the various units can be integrated together or implemented independently. The processing element here can be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method or each of the above units can be completed by hardware integrated logic circuits in the processor element or instructions in the form of software. The processing element may be a general-purpose processor, such as a central processing unit (Central Processing Unit, CPU), or may be one or more integrated circuits configured to implement the above method, for example: one or more specific integrated circuits ( Application-Specific Integrated Circuit, ASIC), or, one or more microprocessors (Digital Signal Processor, DSP), or, one or more Field-Programmable Gate Array (FPGA), etc.
圖7為本發明實施例提供的一種電子設備的結構示意圖。如圖7所示，該電子設備70包括處理器701、記憶體702、通信介面703以及顯示裝置704；該處理器701、記憶體702、通信介面703以及顯示裝置704通過匯流排相互連接。FIG. 7 is a schematic structural diagram of an electronic device provided by an embodiment of the present invention. As shown in FIG. 7, the
記憶體702包括但不限於是隨機儲存記憶體（Random Access Memory，RAM）、唯讀記憶體（Read-Only Memory，ROM）、可擦除可程式設計唯讀記憶體（Erasable Programmable Read Only Memory，EPROM）、或可擕式唯讀記憶體（Compact Disc Read-Only Memory，CDROM），該記憶體1002用於相關指令及資料。通信介面1003用於接收和發送資料。The memory 702 includes, but is not limited to, Random Access Memory (RAM), Read-Only Memory (Read-Only Memory, ROM), and Erasable Programmable Read Only Memory (Erasable Programmable Read Only Memory). EPROM), or portable read-only memory (Compact Disc Read-Only Memory, CDROM), the memory 1002 is used for related instructions and data. The communication interface 1003 is used to receive and send data.
處理器701可以是一個或多個CPU，在處理器701是一個CPU的情況下，該CPU可以是單核CPU，也可以是多核CPU。上述實施例中由電子設備所執行的步驟可以基於該圖7所示的電子設備的結構。具體的，處理器1001可實現圖6中生成單元的功能。通信介面703可實現圖6中接收單元603的功能。顯示裝置704可以是顯示幕，可實現圖6中顯示單元602的功能。The processor 701 may be one or more CPUs. When the processor 701 is a CPU, the CPU may be a single-core CPU or a multi-core CPU. The steps performed by the electronic device in the foregoing embodiment may be based on the structure of the electronic device shown in FIG. 7. Specifically, the processor 1001 may implement the function of the generating unit in FIG. 6. The communication interface 703 can implement the functions of the receiving
該電子設備70中的處理器701用於讀取該記憶體702中儲存的程式碼，執行前述實施例中的資料顯示方法。The processor 701 in the
圖8是本發明實施例提供的一種伺服器的結構示意圖，該伺服器800可因配置或性能不同而產生比較大的差異，可以包括一個或一個以上CPU 822（例如，一個或一個以上處理器）和記憶體832，一個或一個以上儲存應用程式842或資料844的儲存介質830（例如一個或一個以上海量存放裝置）。其中，記憶體832和儲存介質830可以是短暫儲存或持久儲存。儲存在儲存介質830的程式可以包括一個或一個以上模組（圖示沒標出），每個模組可以包括對伺服器中的一系列指令操作。更進一步地，中央處理器822可以設置為與儲存介質830通信，在伺服器800上執行儲存介質830中的一系列指令操作。伺服器800可以為本發明提供的電子設備。FIG. 8 is a schematic structural diagram of a server provided by an embodiment of the present invention. The
伺服器800還可以包括一個或一個以上電源826，一個或一個以上有線或無線網路介面850，一個或一個以上輸入輸出介面858，和/或，一個或一個以上操作系統841，例如Windows ServerTM，Mac OS XTM，UnixTM, LinuxTM，FreeBSDTM等等。The
上述實施例中由服務端所執行的步驟可以基於該圖8所示的伺服器結構。The steps executed by the server in the foregoing embodiment may be based on the server structure shown in FIG. 8.
在本發明的實施例中提供一種電腦可讀儲存介質，上述電腦可讀儲存介質儲存有電腦程式，上述電腦程式被處理器執行時實現前述實施例中的資料顯示方法。In an embodiment of the present invention, a computer-readable storage medium is provided. The computer-readable storage medium stores a computer program, and the computer program is executed by a processor to implement the data display method in the foregoing embodiment.
本發明實施例提供了一種包含指令的電腦程式產品，當其在電腦上運行時，使得電腦執行前述實施例所提供的資料顯示方法。The embodiment of the present invention provides a computer program product containing instructions, which when running on a computer, causes the computer to execute the data display method provided in the foregoing embodiment.
以上所述，僅為本發明的具體實施方式，但本發明的保護範圍並不局限於此，任何熟悉本技術領域的技術人員在本發明揭露的技術範圍內，可輕易想到各種等效的修改或替換，這些修改或替換都應涵蓋在本發明的保護範圍之內。因此，本發明的保護範圍應以申請專利範圍的保護範圍為準。The above are only specific embodiments of the present invention, but the scope of protection of the present invention is not limited to this. Any person skilled in the art can easily think of various equivalent modifications within the technical scope disclosed by the present invention. Or replacements, these modifications or replacements should all be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the patent application.
101,102:步驟
201~206:圓環
301~303:圓環
304:發光圓球
305~307:圓環
308:發光圓球
41~43:圓環
44:發光圓球
45~47:圓環
48:發光圓球
421~426:圓弧
501~509:步驟
601:生成單元
602:顯示單元
603:接收單元
70:電子設備
701:處理器
702:記憶體
703:通信介面
704:顯示裝置
800:伺服器
822:中央處理器
826:電源
830:儲存介質
832:記憶體
841:操作系統
842:應用程式
844:資料
850:有線或無線網路介面
858:輸入輸出介面101, 102:
為了更清楚地說明本發明實施例或背景技術中的技術方案，下面將對本發明實施例或背景技術中所需要使用的附圖進行說明。 圖1為本發明實施例提供的一種資料顯示方法流程圖； 圖2為本發明實施例提供的一種視覺化介面的對比示意圖； 圖3為本發明實施例提供的另一種視覺化介面的對比示意圖； 圖4為本發明實施例提供的又一種視覺化介面的對比示意圖； 圖5為本發明實施例提供的另一種資料顯示方法流程圖； 圖6為本發明實施例提供的一種電子設備的結構示意圖； 圖7為本發明實施例提供的另一種電子設備的結構示意圖； 圖8為本發明實施例提供的一種伺服器的結構示意圖。In order to more clearly describe the technical solutions in the embodiments of the present invention or the background art, the following will describe the drawings that need to be used in the embodiments of the present invention or the background art. FIG. 1 is a flowchart of a data display method provided by an embodiment of the present invention; 2 is a schematic diagram of comparison of a visual interface provided by an embodiment of the present invention; 3 is a schematic diagram of comparison of another visual interface provided by an embodiment of the present invention; 4 is a schematic diagram of comparison of yet another visual interface provided by an embodiment of the present invention; FIG. 5 is a flowchart of another data display method provided by an embodiment of the present invention; FIG. 6 is a schematic structural diagram of an electronic device provided by an embodiment of the present invention; FIG. 7 is a schematic structural diagram of another electronic device provided by an embodiment of the present invention; FIG. 8 is a schematic structural diagram of a server provided by an embodiment of the present invention.
101,102:步驟101, 102: steps
Claims (15)
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010335227.7 | 2020-04-24 | ||
| CN202010335227.7A CN111597249A (en) | 2020-04-24 | 2020-04-24 | Data display method and related device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| TW202141256A true TW202141256A (en) | 2021-11-01 |
| TWI785380B TWI785380B (en) | 2022-12-01 |
Family
ID=72187651
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| TW109131395A TWI785380B (en) | 2020-04-24 | 2020-09-11 | Data display method, computer readable storage medium, electronic device and chip |
Country Status (5)
| Country | Link |
|---|---|
| JP (1) | JP2022533887A (en) |
| KR (1) | KR20210134940A (en) |
| CN (1) | CN111597249A (en) |
| TW (1) | TWI785380B (en) |
| WO (1) | WO2021212711A1 (en) |
Family Cites Families (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP2007116249A (en) * | 2005-10-18 | 2007-05-10 | Ｓｙｓｔｅｍ Ｓｏｌｕｔｉｏｎ株式会社 | Image recording device |
| CN101470711B (en) * | 2007-12-25 | 2011-04-20 | 国际商业机器公司 | Data visualization method and apparatus for layered graph structure |
| US8176096B2 (en) * | 2008-12-18 | 2012-05-08 | Microsoft Corporation | Data visualization interactivity architecture |
| US8810574B2 (en) * | 2009-04-02 | 2014-08-19 | Mellmo Inc. | Displaying pie charts in a limited display area |
| US9773288B2 (en) * | 2009-11-17 | 2017-09-26 | Endera Systems, Llc | Radial data visualization system |
| CN103049580B (en) * | 2013-01-17 | 2016-02-10 | 北京工商大学 | A kind of method for visualizing of hierarchical data and equipment |
| US9921732B2 (en) * | 2013-07-31 | 2018-03-20 | Splunk Inc. | Radial graphs for visualizing data in real-time |
| CN104951446A (en) * | 2014-03-25 | 2015-09-30 | 阿里巴巴集团控股有限公司 | Big data processing method and platform |
| US20150356160A1 (en) * | 2014-06-05 | 2015-12-10 | Deutsche Bank Ag | System and method for facilitating interactive data visualization and manipulation |
| CN105243070B (en) * | 2014-07-11 | 2020-02-14 | 华为技术有限公司 | Data visualization method and device |
| CN107016617B (en) * | 2016-01-28 | 2020-06-26 | 北京工商大学 | Visualization method of agricultural product pesticide residue detection data based on multiple radioactive rings |
| CN206594274U (en) * | 2016-09-08 | 2017-10-27 | 小牛动力（武汉）新能源技术有限公司 | A kind of BTU devices indicated with battery status |
| CN107067427B (en) * | 2017-05-18 | 2020-03-31 | 北京工商大学 | Polar coordinate layout visualization method for pesticide residue detection data |
| CN107798483A (en) * | 2017-11-16 | 2018-03-13 | 顺丰科技有限公司 | One kind is received and sends task management method |
-
2020
- 2020-04-24 CN CN202010335227.7A patent/CN111597249A/en active Pending
- 2020-08-24 KR KR1020217031284A patent/KR20210134940A/en active Search and Examination
- 2020-08-24 WO PCT/CN2020/110876 patent/WO2021212711A1/en active Application Filing
- 2020-08-24 JP JP2021557459A patent/JP2022533887A/en active Pending
- 2020-09-11 TW TW109131395A patent/TWI785380B/en active
Also Published As
| Publication number | Publication date |
|---|---|
| WO2021212711A1 (en) | 2021-10-28 |
| CN111597249A (en) | 2020-08-28 |
| TWI785380B (en) | 2022-12-01 |
| JP2022533887A (en) | 2022-07-27 |
| KR20210134940A (en) | 2021-11-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10452249B2 (en) | Tooltip feedback for zoom using scroll wheel | |
| US10254955B2 (en) | Progressively indicating new content in an application-selectable user interface | |
| US8933952B2 (en) | Pre-rendering new content for an application-selectable user interface | |
| US7019757B2 (en) | Changing the alpha levels of an application window to indicate a status of a computing task | |
| US9684426B2 (en) | Non-transitory computer-readable medium encoded with a 3D graphical user interface program and a computing device for operating the same | |
| US20150205482A1 (en) | Dynamic visual statistical data display navigation system and method for limited display device | |
| US9690449B2 (en) | Touch based selection of graphical elements | |
| US20080168382A1 (en) | Dashboards, Widgets and Devices | |
| US20080168367A1 (en) | Dashboards, Widgets and Devices | |
| US20080168368A1 (en) | Dashboards, Widgets and Devices | |
| Schirski et al. | Vista flowlib-framework for interactive visualization and exploration of unsteady flows in virtual environments | |
| TW201203084A (en) | Temporary formatting and charting of selected data | |
| US20150113452A1 (en) | Graphical user interface | |
| JPWO2013128974A1 (en) | Data display device, data display method, and program | |
| JPWO2008059849A1 (en) | Menu display device, information processing device, and menu display method | |
| TWI785380B (en) | Data display method, computer readable storage medium, electronic device and chip | |
| WO2023071996A1 (en) | Object display method and apparatus, electronic device, and storage medium | |
| US20220326916A1 (en) | Visualization method for software architecture and apparatus | |
| US10990251B1 (en) | Smart augmented reality selector | |
| Barsoum et al. | Towards adaptive Web scriptable user interfaces for virtual environments | |
| TW202423096A (en) | Cloud system and method for controlling cloud system | |
| Gerber et al. | More SDK Tools | |
| JP2010250527A (en) | Content presentation device, content presentation method, and program | |
| Curington | A High-Performance Immersive Visualization System |