Ranking list data display method and device, electronic equipment and storage medium

Abstract

The invention relates to the technical field of data processing, and discloses a ranking list data display method and device, electronic equipment and a storage medium. The method comprises the steps that based on a ranking list obtaining request, a target ranking list is displayed in a current interface, different entries in the target ranking list correspond to different colors, and entries with different values correspond to different entry lengths; in response to a modification request for the target ranking list, modifying attribute information of the target ranking list, the attribute information comprises an item sequence in the target ranking list, a font, a width, a height, a background color, a frame color, an item length, an item color, item transparency and an animation effect when the target ranking list is updated. The user can customize the display form of the ranking list.

Description

Technical Field

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

[0002] With the increasing application of big data, the demand for real-time visualization of data is gradually increasing. Rankings display and compare data in an intuitive way, making all data clear at a glance.

[0003] Current rankings mostly display data in a static manner, lacking flexibility. In actual applications, technicians need to modify, develop, and debug multiple times, increasing development and maintenance costs. Summary of the invention

[0004] In view of the above situation, the embodiments of the present application provide a ranking data display method, device, electronic device and storage medium, which are intended to solve the above problems or at least partially solve the above problems.

[0005] In a first aspect, an embodiment of the present application provides a ranking data display method, the method comprising:

[0006] Based on the ranking list acquisition request, the target ranking list is displayed in the current interface, where different items in the target ranking list correspond to different colors, and items with different values ​​correspond to different item lengths;

[0007] In response to a request to modify the target ranking list, the attribute information of the target ranking list is modified, the attribute information including the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and animation effects when the target ranking list is updated.

[0008] In some embodiments, the method of displaying a target ranking list in the current interface based on a ranking list acquisition request includes: acquiring real-time data of the target ranking list based on the ranking list acquisition request; generating a basic framework of the target ranking list based on a hypertext markup language HTML structure, wherein the basic framework includes an outer container, a title bar, and a ranking list item template; generating a layout style of the target ranking list based on a cascading style sheet CSS; rendering the real-time data of the target ranking list into the basic framework of the target ranking list component, generating the target ranking list based on the layout style of the target ranking list, and displaying the target ranking list in the current interface.

[0009] In some embodiments, the real-time data of the target ranking list is rendered into the target ranking list to generate the target ranking list, including: extracting entry fields from the real-time data of the target ranking list to generate entries of the target ranking list; setting entries based on the document object model DOM element, and generating the layout style of the entries based on CSS; calling appendChild to insert the entries of the target ranking list into the ranking container, and applying the layout style of the entries to generate the target ranking list.

[0010] In some embodiments, the method further includes: updating data information in the target ranking list, color of items in the target ranking list, and length of items in the target ranking list based on an update request.

[0011] In some embodiments, the update request includes an automatic update request and a manual update request; the updating of the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list based on the update request includes: in response to the update request being an automatic update request, automatically updating the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list at preset intervals; and / or in response to a user's manual update request for the target ranking list, updating the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list.

[0012] In some embodiments, the method further comprises: in response to a dragging operation of dragging the target ranking list to a target area, displaying the target ranking list in the target area, and automatically adjusting the width and height of the target ranking list and the width and height of the entries based on the size of the target area.

[0013] In some embodiments, the method further includes: in response to a click operation on a target item in the target ranking list, displaying detailed data of the target item; in response to a hover operation on a target item in the target ranking list, displaying prompt information of the target item, the prompt information including detailed data source and update time.

[0014] In a second aspect, the present application also provides a ranking data display device, the device comprising:

[0015] A display module, used to display the target ranking list in the current interface based on the ranking list acquisition request, where different items in the target ranking list correspond to different colors, and items with different values ​​correspond to different item lengths;

[0016] A modification module is used to modify the attribute information of the target ranking list in response to a modification request for the target ranking list, wherein the attribute information includes the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and the animation effect when the target ranking list is updated.

[0017] In some embodiments, the display module is specifically used to obtain real-time data of the target ranking list based on a ranking list acquisition request; generate a basic framework of the target ranking list based on a hypertext markup language HTML structure, the basic framework including an outer container, a title bar, and a ranking list item template; generate a layout style of the target ranking list based on a cascading style sheet CSS; render the real-time data of the target ranking list into the basic framework of the target ranking list component, and generate the target ranking list based on the layout style of the target ranking list, and display the target ranking list in the current interface.

[0018] In some embodiments, the display module is specifically used to extract entry fields from the real-time data of the target ranking list to generate entries of the target ranking list; set entries based on the document object model DOM element, and generate the layout style of the entries based on CSS; call appendChild to insert the entries of the target ranking list into the ranking container, and apply the layout style of the entries to generate the target ranking list.

[0019] In some embodiments, the updating module is used to update the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list based on the update request.

[0020] In some embodiments, the update request includes an automatic update request and a manual update request; the update module is specifically used to respond to the update request being an automatic update request, automatically updating the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list at preset intervals; and / or, in response to a user's manual update request for the target ranking list, updating the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list.

[0021] In some embodiments, the display module is further configured to display the target ranking list in the target area in response to a dragging operation of dragging the target ranking list to the target area, and the width and height of the target ranking list and the width and height of the items are automatically adjusted based on the size of the target area.

[0022] In some embodiments, the display module is also used to display detailed data of the target item in the target ranking list in response to a click operation on the target item in the target ranking list; and to display prompt information of the target item in response to a hover operation on the target item in the target ranking list, wherein the prompt information includes detailed data source and update time.

[0023] In a third aspect, an embodiment of the present application further provides an electronic device, comprising: a processor; and a memory arranged to store computer executable instructions, wherein the executable instructions, when executed, cause the processor to perform the steps of the first aspect described above.

[0024] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, which stores one or more programs. When the one or more programs are executed by an electronic device including multiple application programs, the electronic device executes the steps of the first aspect above.

[0025] At least one of the above technical solutions adopted in the embodiment of the present application can achieve the following beneficial effects: the target ranking list is displayed in the interface through the ranking acquisition request, different items in the target ranking list in the embodiment of the present application correspond to different colors, and different items have different values ​​and corresponding item lengths are also different, and the data is displayed intuitively through the item color and item length. Then, in response to the user's modification request for the target ranking list, the attribute information of the target ranking list is modified, and the user can customize the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and the animation effect when the target ranking list is updated, etc., according to the needs, and can realize a specific display form based on user needs, without the need to modify the display form of the ranking list through development or maintenance, thereby reducing maintenance costs and improving the flexibility of the ranking list display. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0027] Figure 1 A schematic diagram showing a flow chart of a method for displaying ranking data provided in an embodiment of the present application is shown;

[0028] Figure 2 A schematic diagram of a ranking interface provided in an embodiment of the present application is shown;

[0029] Figure 3 A flowchart showing a ranking data display method provided by another embodiment of the present application is shown;

[0030] Figure 4It shows a structural diagram of a ranking data display device provided in an embodiment of the present application;

[0031] Figure 5 A schematic structural diagram of an electronic device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0032] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0033] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that such use is interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the term "including" and its variants are to be interpreted as open-ended terms meaning "including but not limited to".

[0034] As described in the background technology, with the increasing application of big data, the demand for real-time visualization of data is gradually increasing. Especially for ranking data, users hope to not only quickly view the ranking of data, but also display key data through intuitive colors and dynamic layouts. This component is designed to meet this demand, allowing users to view diversified data in a customized form. In existing systems, ranking modules usually display data in a static manner, lack flexibility to adapt to different data formats, and cannot quickly implement specific display forms required by users. Therefore, in actual applications, users often need to modify, develop and debug multiple times, thereby increasing development and maintenance costs.

[0035] Based on this, the present application provides a ranking data display method, which allows users to adjust the order, style, animation effects and other contents of data items according to business needs.

[0036] Figure 1 A flowchart of a ranking data display method provided in an embodiment of the present application is shown. Figure 1 It can be seen that the present application at least includes step S101-step S102:

[0037] Step S101: Based on the ranking list acquisition request, the target ranking list is displayed in the current interface, and different items in the target ranking list correspond to different colors, and items with different values ​​correspond to different item lengths.

[0038] This application is mainly used in various interfaces that need to update and display ranking information in real time, such as an enterprise's data monitoring platform, big data analysis system, or other custom business intelligence (BI) interfaces.

[0039] The user selects the ranking data to be displayed in the operation interface, which is also a ranking acquisition request. For example, a data type selection box is set in the interface. The user clicks the data type selection box, and multiple data types are displayed in the operation interface, such as the annual consumption amount of each region, the income amount of key industries, and the monthly income amount of the catering industry. The user clicks on a data type to display the target ranking corresponding to the data type in the operation interface. For example Figure 2 As shown in (A) in the figure, the target ranking list for the annual consumption amount of each region is shown. It can be seen that the color of the entries for different regions in the target ranking list is different, and the different consumption amounts in different regions also correspond to different entry lengths. For example, the higher the consumer finance, the longer the entry length, simulating the progress bar style, so that users can know the consumption amount ranking of each region at a glance and intuitively display the comparison between data.

[0040] In some embodiments, for example Figure 2 As shown in (B), the entry color is a gradient color, and the entry color changes gradually as the data value changes, helping users to intuitively distinguish the importance of the data. Specifically, the gradient of the entry color is achieved through the linear-gradient function in CSS.

[0041] In addition, the ranking list is not limited to Figure 2 The bar chart ranking list shown may also be a line chart ranking list, a pie chart ranking list, a radar chart ranking list, or other ranking list styles that can provide ranking information. In some embodiments, a switching option is provided in the operation interface, and the user can switch the style of the ranking list as needed.

[0042] In some embodiments, multiple rankings can be displayed on a page. Specifically, when a target ranking is displayed on a page, the user can still obtain a ranking request to display the corresponding ranking in the current interface. Two rankings can be displayed together in the operation interface, such as overlapping, parallel, or out of order. The user can drag the ranking on the page to change the position of the ranking, so that multiple rankings can be viewed on a page.

[0043] Step S102: In response to a request to modify the target ranking list, modify attribute information of the target ranking list.

[0044] The attribute information includes the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency, and animation effects when the target ranking list is updated.

[0045] In some embodiments, when a user wants to modify the order of items in a ranking list, the modification request may be a long press operation of the user on an item in the target ranking list. After the long press operation, the item will shake, and the user can drag the item to modify the order of the item.

[0046] In some embodiments, a sidebar is provided in the operation interface, and an option box for modifying various attributes in the target ranking list is provided in the sidebar, and the user modifies the target ranking list by selecting a corresponding tab in the sidebar. Alternatively, the user right-clicks on the target ranking list to display a modification interface, and modifies the target ranking list through the modification interface.

[0047] Specifically, when developing a target ranking list, variable support is provided through CSS. Users can customize the ranking list's font, width, height, background color, border color, item length, item color, item transparency and other attribute information to enhance visual performance and expand the diversity of ranking list display.

[0048] from Figure 1 It can be seen from the method shown that the present application displays the target ranking list in the interface through the ranking acquisition request. Different items in the target ranking list in the embodiment of the present application correspond to different colors, and the corresponding item lengths are also different when the values ​​of different items are different. The data is displayed intuitively through the item color and item length. Then, in response to the user's modification request for the target ranking list, the attribute information of the target ranking list is modified. The user can customize the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and the animation effect when the target ranking list is updated according to the needs. It can realize a specific display form based on user needs, without the need to modify the display form of the ranking list through development or maintenance, reduce maintenance costs, and improve the flexibility of the ranking list display.

[0049] Figure 3 A flowchart of a method for displaying ranking data according to another embodiment of the present application is shown. Figure 3 It can be seen that the ranking data display method of this embodiment includes the following steps S201-S204:

[0050] Step S201: based on the ranking list acquisition request, obtain the real-time data of the target ranking list.

[0051] Step S202: Generate a basic framework of the target ranking list based on the hypertext markup language structure, the basic framework including an outer container, a title bar, and a ranking list item template.

[0052] Step S203: Generate a layout style of the target ranking list based on the cascading style sheet.

[0053] Step S204: Rendering the real-time data of the target ranking list into the basic framework of the target ranking list component, generating the target ranking list based on the layout style of the target ranking list, and displaying the target ranking list in the current interface.

[0054] In steps S201-S204, the user selects the data source to be loaded in the operation interface, triggering the backend database query and data extraction. Specifically, the API interface or WebSocket connection is used to pull real-time data from the database and push it to the front-end hypertext markup language HTML component. After the front-end JavaScript receives the data, it performs preliminary data cleaning and filtering, and organizes key information such as ranking, name, value, unit and other data fields into structured data for subsequent rendering. Further, the HTML structure is initialized to create the basic framework of the ranking component, including HTML tags such as outer container, title bar, and ranking item template. The overall layout style of the ranking is defined by Cascading Style Sheets (CSS), such as the width and height of the container, border style, background color, etc., to adapt it to the large-screen display effect. Define variables and event listeners in the JavaScript script, prepare data update events and user interaction events, and initialize an empty ranking data array to receive and display data.

[0055] Finally, the entry fields are extracted from the real-time data of the target ranking list, the target ranking list is generated based on the Document Object Model (DOM) element, the entry is set, and the layout style of the entry is generated based on CSS; the appendChild node is called to insert the entry of the target ranking list into the ranking container, and the layout style of the entry is applied to generate the target ranking list.

[0056] Specifically, in the render() function, JavaScript reads the ranking, name, value, unit and other fields from the sorted data structure to generate each ranking entry. Define the Progress class to encapsulate each entry data, including order (rank), name (name), value (value), unit (unit) and other attributes, and render these entries to the HTM page through the ui() method. Use document.createElement to dynamically create DOM elements, set the content of each field, and assign appropriate CSS styles, including color and size, to make different entries visually layered. Insert the generated DOM element into the ranking container through appendChild() to achieve instant rendering and display of data.

[0057] In the embodiment of the present application, a new embedded ranking framework based on HTML and JavaScript is adopted. The ranking component is lightweight in design, relies on minimal external libraries, has high performance, and can adapt to real-time processing and display of large-scale data.

[0058] In some embodiments of the present application, in the above method, after the target ranking list is displayed on the page, since the data is updated in real time, the target ranking list also needs to be updated, and as the data in the target ranking list is updated, the color and length of each item in the target ranking list are also updated. Specifically, in response to the update request, the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list are updated.

[0059] In some embodiments, the update request includes an automatic update request and a manual update request. When the update request is an automatic update request, the system automatically updates the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list at preset intervals. When the update request is a manual update request, in response to the manual update request, the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list are updated.

[0060] Specifically, users can set the update type for each ranking list. For example, when triggering a ranking list acquisition request, after selecting the target data type, data update modes will appear, including manual update and automatic update. When the user chooses manual update, the target ranking list will update the list data with the user's manual update request. When the user chooses automatic update, he can also select the time for automatic update. The JavaScript embedded in the component will detect data changes and automatically refresh the page content based on event monitoring. The target ranking list will update the list data at preset intervals. Of course, in automatic update mode, users can still trigger manual update requests to update the target ranking list.

[0061] In some embodiments, when the data is updated, the color and length of the item will smoothly transition according to the new value to avoid visual interference caused by sudden changes. For example, requestAnimationFrame can be used in JavaScript to achieve a smooth animation effect.

[0062] In the embodiment of the present application, real-time data update is supported to ensure the timeliness of the ranking data. By seamlessly connecting with the background, the real-time data update function is realized to ensure that the data displayed on the front end is accurate and timely. Even in scenarios where data is updated frequently, the data can be displayed stably and quickly to meet the needs of real-time monitoring and other scenarios.

[0063] In some embodiments of the present application, when designing a target ranking list, the component is embedded in the visual BI system as an iframe, and the user can place the ranking list in different areas by dragging the component to adapt to the large-screen layout. Specifically, in response to the user dragging the target ranking list to the target area, the target ranking list is displayed in the target area, and the width and height of the target ranking list and the width and height of the items are automatically adjusted based on the size of the target area. In an embodiment of the present application, the component is written in standard HTML and CSS, supports embedding in various mainstream BI large screens, and can automatically adjust the layout according to the screen resolution, ensuring that clear and beautiful data display can be provided on desktops, large-screen displays or mobile devices, and the width, height and internal item size of the HTML component can be automatically adjusted according to the size of the iframe container. Adaptation is achieved through the CSS flex layout to ensure consistent display effects at different resolutions.

[0064] In some embodiments of the present application, click events and hover events are provided. In response to a user's click operation on a target item in a target ranking list, detailed data of the target item is displayed; in response to a user's hover operation on a target item in a target ranking list, prompt information of the target item is displayed, and the prompt information includes detailed data source and update time.

[0065] Specifically, tooltip technology is used to add hover prompt information to each item to display additional information such as detailed data source, update time, etc. The style of tooltip is controlled by CSS, and its appearance and disappearance animation effects are achieved through CSS transition or JavaScript.

[0066] In some embodiments of the present application, through configuration files or visualization options, users can set API interface parameters to adapt to different data sources, including request time intervals, data field mapping, paging, etc. This facilitates subsequent maintenance and function expansion and reduces secondary development costs.

[0067] In some embodiments of the present application, a ranking data display device is provided, and the ranking data display device corresponds one-to-one to the ranking data display method in the above embodiment. Figure 4 As shown, the ranking data display device includes a display module 101 , a modification module 102 and an update module 103 .

[0068] Display module 101, used to display the target ranking list in the current interface based on the ranking list acquisition request, where different items in the target ranking list correspond to different colors, and items with different values ​​correspond to different item lengths;

[0069] The modification module 102 is used to modify the attribute information of the target ranking list in response to a modification request for the target ranking list, wherein the attribute information includes the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and the animation effect when the target ranking list is updated.

[0070] In some embodiments of the present application, in the above-mentioned device, the display module 101 is specifically used to obtain real-time data of the target ranking list based on a ranking list acquisition request; generate a basic framework of the target ranking list based on a hypertext markup language HTML structure, the basic framework including an outer container, a title bar, and a ranking list item template; generate a layout style of the target ranking list based on a cascading style sheet CSS; render the real-time data of the target ranking list into the basic framework of the target ranking list component, and generate the target ranking list based on the layout style of the target ranking list, and display the target ranking list in the current interface.

[0071] In some embodiments of the present application, in the above-mentioned device, the display module 101 is specifically used to extract entry fields from the real-time data of the target ranking list to generate entries of the target ranking list; set entries based on the document object model DOM element, and generate the layout style of the entries based on CSS; call the append child node appendChild to insert the entries of the target ranking list into the ranking container, and apply the layout style of the entries to generate the target ranking list.

[0072] In some embodiments of the present application, in the above-mentioned apparatus, the updating module 103 is used to update the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list based on the update request.

[0073] In some embodiments of the present application, in the above-mentioned device, the update request includes an automatic update request and a manual update request;

[0074] The updating module 103 is specifically configured to automatically update the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list at preset intervals in response to the update request being an automatic update request; and / or

[0075] In response to a manual update request of a user for a target ranking list, data information in the target ranking list, color of items in the target ranking list, and length of items in the target ranking list are updated.

[0076] In some embodiments of the present application, in the above-mentioned device, the display module 101 is also used to display the target ranking list in the target area in response to a dragging operation of dragging the target ranking list to the target area, and the width and height of the target ranking list and the width and height of the items are automatically adjusted based on the size of the target area.

[0077] In some embodiments of the present application, in the above-mentioned device, the display module 101 is also used to display detailed data of the target item in the target ranking list in response to a click operation on the target item in the target ranking list; and to display prompt information of the target item in response to a hover operation on the target item in the target ranking list, wherein the prompt information includes detailed data source and update time.

[0078] It should be noted that any of the above-mentioned ranking data display devices can implement the above-mentioned ranking data display method in a one-to-one correspondence, which will not be repeated here.

[0079] Figure 5 FIG. 1 is a schematic diagram showing the structure of an electronic device provided in an embodiment of the present application. Figure 5 As shown, at the hardware level, the electronic device includes a processor, and optionally also includes an internal bus, a network interface, and a memory. Among them, the memory may include a memory, such as a high-speed random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk storage, etc. Of course, the electronic device may also include hardware required for other services.

[0080] The processor, network interface and memory can be interconnected through an internal bus, which can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0081] The memory is used to store programs. Specifically, the program may include program code, and the program code includes computer operation instructions. The memory may include internal memory and non-volatile memory, and provides instructions and data to the processor.

[0082] The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it, forming a ranking data display device at the logical level. The processor executes the program stored in the memory and is specifically used to execute the above method.

[0083] The processor may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above processor may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in the embodiments of the present application can be directly embodied as a hardware decoding processor to be executed, or a combination of hardware and software modules in the decoding processor to be executed. The software module may be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0084] The electronic device can execute the ranking data display method provided by multiple embodiments of the present application, and realize the ranking data display device. Figure 4 The functions of the illustrated embodiment will not be described in detail in the embodiments of the present application.

[0085] An embodiment of the present application also proposes a computer-readable storage medium, which stores one or more programs, and the one or more programs include instructions. When the instructions are executed by an electronic device including multiple application programs, the electronic device can execute the ranking data display method provided by multiple embodiments of the present application.

[0086] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0087] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0088] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0089] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0090] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0091] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0092] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media 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 disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0093] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity or device including the element.

[0094] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0095] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A ranking data display method, characterized in that: The method comprises: Based on the ranking list acquisition request, the target ranking list is displayed in the current interface, where different items in the target ranking list correspond to different colors, and items with different values ​​correspond to different item lengths; In response to a request to modify the target ranking list, the attribute information of the target ranking list is modified, the attribute information including the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and animation effects when the target ranking list is updated.

2. The method according to claim 1, characterized in that The method of displaying the target ranking list in the current interface based on the ranking list acquisition request includes: Based on the ranking list acquisition request, obtain the real-time data of the target ranking list; Based on the hypertext markup language HTML structure, a basic framework of the target ranking list is generated, wherein the basic framework includes an outer container, a title bar, and a ranking list item template; Generate the layout style of the target ranking list based on Cascading Style Sheets (CSS); The real-time data of the target ranking list is rendered into the basic framework of the target ranking list component, and the target ranking list is generated based on the layout style of the target ranking list, and the target ranking list is displayed in the current interface.

3. The method according to claim 2, characterized in that Rendering the real-time data of the target ranking list into the target ranking list to generate the target ranking list includes: Extracting entry fields from the real-time data of the target ranking list to generate entries of the target ranking list; Based on the Document Object Model DOM element, set the item and generate the layout style of the item based on CSS; The append child node appendChild is called to insert the item of the target ranking list into the ranking list container, and the layout style of the item is applied to generate the target ranking list.

4. The method according to claim 1, characterized in that: The method further comprises: The data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list are updated based on the update request.

5. The method according to claim 4, characterized in that The update request includes an automatic update request and a manual update request; The updating of the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list based on the update request includes: In response to the update request being an automatic update request, automatically updating the data information in the target ranking list, the color of the items in the target ranking list, and the length of the items in the target ranking list at preset intervals; and / or In response to a manual update request of a user for a target ranking list, data information in the target ranking list, color of items in the target ranking list, and length of items in the target ranking list are updated.

6. The method according to any one of claims 1 to 5, characterized in that The method further comprises: In response to a dragging operation of dragging the target ranking list to a target area, the target ranking list is displayed in the target area, and the width and height of the target ranking list and the width and height of the items are automatically adjusted based on the size of the target area.

7. The method according to claim 1, characterized in that The method further comprises: In response to a click operation on a target item in the target ranking list, displaying detailed data of the target item; In response to a hover operation on a target item in the target ranking list, prompt information of the target item is displayed, wherein the prompt information includes detailed data source and update time.

8. A ranking data display device, characterized in that: The device comprises: A display module, used to display the target ranking list in the current interface based on the ranking list acquisition request, where different items in the target ranking list correspond to different colors, and items with different values ​​correspond to different item lengths; A modification module is used to modify the attribute information of the target ranking list in response to a modification request for the target ranking list, wherein the attribute information includes the order of items in the target ranking list, the font, width, height, background color, border color, item length, item color, item transparency of the target ranking list, and the animation effect when the target ranking list is updated.

9. An electronic device, comprising: processor; as well as A memory arranged to store computer executable instructions, wherein when the executable instructions are executed, the processor executes the steps of the ranking data display method according to any one of claims 1 to 7.

10. A computer-readable storage medium storing one or more programs, which, when executed by an electronic device including a plurality of application programs, enable the electronic device to execute the steps of the ranking data display method as described in any one of claims 1 to 7.

Images