Chart display method, electronic equipment, storage medium and product

Abstract

The invention discloses a chart display method, electronic equipment, a storage medium and a product, and relates to the technical field of internet computers, and the disclosed chart display method comprises the following steps: establishing a mapping relationship between each tag item and each columnar unit through a cascading style sheet; after a click event of a target tag item in the tag items is detected, color parameter resetting is carried out on the columnar units based on the mapping relation; and performing chart display according to the states of the columnar units after the color parameters are reset. According to the invention, a more flexible chart display effect can be provided.

Description

Technical Field

[0001] This application relates to the field of Internet computer technology, and particularly to a chart display method, an electronic device, a storage medium, and a product. Background Art

[0002] A visual information chart is a graphic design technology that presents complex information in an easy-to-understand way. By combining charts, images, text, and data, it condenses a large amount of information into a single graphic, enabling readers to quickly and accurately understand and remember the information.

[0003] Currently, the ECharts (a data visualization chart library) is mainly used to implement visual information charts. However, the flexibility of ECharts is relatively limited. Especially when dealing with the display of multiple data items, it is difficult to fully meet the specific requirements of users for display effects and interaction behaviors. Summary of the Invention

[0004] The main purpose of this application is to provide a chart display method, an electronic device, a storage medium, and a product, aiming to provide a more flexible chart display effect.

[0005] To achieve the above objective, this application proposes a chart display method, which includes:

[0006] Establish a mapping relationship between each label item and each column unit through a cascading style sheet;

[0007] After detecting a click event of a target label item among the label items, reset the color parameters of each column unit based on the mapping relationship;

[0008] Display the chart according to the state of the column unit after the color parameter reset.

[0009] In one embodiment, before the step of establishing the mapping relationship between each label item and each column unit through a cascading style sheet, the method further includes:

[0010] Establish each column unit including a background layer and a data layer through a cascading style sheet, where the background layer and the data layer are positioned overlapping, the background layer displays the maximum value, and the data layer displays the value;

[0011] For each column unit, set the background layer of the column unit to have fixed size parameters and fixed color parameters, and set the data layer of the column unit to have adjustable size parameters and adjustable color parameters.

[0012] In one embodiment, each label item includes an overall label item and a single-item label item. The step of establishing the mapping relationship between each label item and each column unit through a cascading style sheet includes:

[0013] For the overall label item, establish the mapping relationship between the overall label item and each of the column units through a cascading style sheet;

[0014] For the single-item label item, establish the mapping relationship between the single-item label item and the selected single-item column unit through a cascading style sheet.

[0015] In one embodiment, the step of resetting the color parameters of each of the column units based on the mapping relationship includes:

[0016] Determine the target column unit associated with the target label item based on the mapping relationship;

[0017] Set the color parameter of the data layer of the target column unit to a first parameter value, and set the color parameter of the data layer of the non-target column unit to a second parameter value, so that the color sharpness of the target column unit is higher than that of the non-target column unit.

[0018] In one embodiment, after the step of determining the target column unit associated with the target label item based on the mapping relationship, the following is further included:

[0019] Display the value of the data layer at a first preset position of the target column unit.

[0020] In one embodiment, the method further includes:

[0021] For each of the column units, set an operation control at a second preset position of the column unit;

[0022] In response to a trigger operation on the operation control, generate a setting pop-up window for the column unit, where the setting pop-up window is used to modify the color parameter and value of the data layer of the column unit.

[0023] In one embodiment, the method further includes:

[0024] Arrange the column units at equal intervals in the first axis direction of a grid layout;

[0025] Adjust the size parameters and intervals of the column units according to the current visible window size and the number of column units.

[0026] In addition, to achieve the above object, the present application also proposes an electronic device, which includes: a memory, a processor, and a computer program stored on the memory and executable on the processor, and the computer program is configured to implement the steps of the chart display method as described above.

[0027] In addition, to achieve the above object, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the chart display method as described above are implemented.

[0028] In addition, to achieve the above object, the present application also provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps of the chart display method as described above are implemented.

[0029] The present application proposes a chart display method, which establishes a mapping relationship between each label item and each column unit through a Cascading Style Sheets (CSS); after detecting a click event of a target label item among the label items, the color parameters of each column unit are reset based on the mapping relationship; the chart is displayed according to the state of the column units after the color parameter reset.

[0030] In summary, in the present application, a mapping relationship between chart label items and column units is established through CSS (Cascading Style Sheets), so that the chart display is no longer limited by the built-in functions and styles of traditional ECharts. At the same time, by responding to the click event of the label item in real time and updating the chart display, users can obtain more immediate and intuitive visual feedback, enhancing the flexibility of the chart display effect and improving the user's sense of participation during use. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] The accompanying drawings here are incorporated into the specification and form a part of this specification, showing embodiments consistent with the present application, and are used together with the specification to explain the principles of the present application.

[0032] To more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the accompanying drawings required for use in the description of the embodiments or the prior art. Obviously, for those of ordinary skill in the art, other accompanying drawings can also be obtained based on these drawings without creative efforts.

[0033] Figure 1 It is a schematic flowchart provided for Embodiment 1 of the chart display method of the present application;

[0034] Figure 2 It is a schematic diagram of an example provided for Embodiment 1 of the chart display method of the present application;

[0035] Figure 3 It is another schematic diagram of an example provided for Embodiment 1 of the chart display method of the present application;

[0036] Figure 4 It is a schematic diagram of the chart layout provided for Embodiment 2 of the chart display method of the present application;

[0037] Figure 5 This is a schematic structural diagram of the chart display device according to an embodiment of the present application;

[0038] Figure 6 This is a schematic diagram of the device structure of the hardware operating environment involved in the chart display method according to an embodiment of the present application.

[0039] The realization of the purpose, functional features and advantages of the present application will be further described with reference to the embodiments and the accompanying drawings. Specific embodiments

[0040] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0041] For a better understanding of the technical solutions of the present application, the following will be described in detail with reference to the accompanying drawings of the specification and specific embodiments.

[0042] A visual information chart is a graphic design technology that presents complex information in an easy-to-understand way. By combining charts, images, text, and data, it condenses a large amount of information into one graphic, enabling readers to quickly and accurately understand and remember the information.

[0043] Currently, the ECharts chart library is mainly used to implement visual information charts, but the flexibility of ECharts is relatively limited. Especially when dealing with the display of multiple data items, it is difficult to fully meet the specific requirements of users for display effects and interactive behaviors.

[0044] The main solution of the embodiment of the present application is: establishing a mapping relationship between each label item and each column unit through cascading style sheets; after detecting the click event of the target label item in each label item, resetting the color parameters of each column unit based on the mapping relationship; and displaying the chart according to the state of the column unit after the color parameter reset.

[0045] Thus, by establishing a mapping relationship between the chart label items and the column units through CSS, the chart display is no longer limited by the built-in functions and styles of traditional ECharts. At the same time, by responding to the click event of the label item in real time and updating the chart display, users can obtain more immediate and intuitive visual feedback, enhancing the flexibility of the chart display effect and improving the user's sense of participation during use.

[0046] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication, and program running functions, such as a computer, a mobile phone, a server, etc., or an electronic device capable of implementing the above functions. The following takes an electronic device as an example to illustrate this embodiment and the following embodiments.

[0047] Based on this, an embodiment of the present application provides a chart display method. Refer to Figure 1 , Figure 1 which is a schematic flowchart of the first embodiment of the chart display method of the present application.

[0048] In this embodiment, the chart display method includes steps S10 to S30:

[0049] Step S10, establish a mapping relationship between each label item and each bar unit through a cascading style sheet;

[0050] It should be noted that in this embodiment, a chart is created using Cascading Style Sheets (CSS) technology. A cascading style sheet is a style sheet language used to describe the appearance and format of HTML (Hypertext Markup Language) or XML (Extensible Markup Language) documents. The created chart is specifically a bar chart, which includes multiple tab items (label items) and multiple bar units. Each label item represents a textual description of different data categories or items, and the bar unit represents a bar of a certain category of data volume. The quantity and name of the label item and the bar unit can be set based on user requirements, and no specific limitation is made in this embodiment.

[0051] Establish a corresponding mapping relationship between each label item and the bar unit in the chart through cascading style sheet technology, where each label item can establish a mapping relationship with one or more bar units in the chart simultaneously.

[0052] In a feasible embodiment, each label item includes an overall label item and a single-item label item. Step S10 may include steps S101 to S102:

[0053] Step S101, for the overall label item, establish a mapping relationship between the overall label item and each bar unit through a cascading style sheet;

[0054] For the overall label item, a mapping relationship between the overall label item and all bar units in the chart is constructed through cascading style sheet technology, so that users can intuitively view or compare the comprehensive data or overall trend of all bar units in the chart by clicking on the overall label item.

[0055] For example, in a sales data chart, all products are used as an overall label item. When the user clicks on it, all bar units representing the sales volumes of different products will respond in a certain way (such as a change in color brightness), thereby helping the user quickly grasp the overall sales situation.

[0056] Step S102: For a single label item, establish a mapping relationship between the single label item and the selected single bar unit through Cascading Style Sheets.

[0057] For a single label item, a mapping relationship between the single label item and a specific bar unit in the chart is constructed through Cascading Style Sheets technology, so that users can focus on viewing or analyzing the detailed information of a specific data category by clicking on the single label item.

[0058] For example, in a sales data chart, large appliances can be used as a single label item. When the user clicks on it, only the bar unit representing the sales volume of large appliances will respond in a prominent way (such as highlighting the color), while other bar units will remain unchanged or be slightly adjusted (such as graying the color) to ensure that the sales data of large appliances can be very intuitively noticed by the user.

[0059] In a feasible embodiment, steps S40 - S50 may also be included before step S10:

[0060] Step S40: Establish each bar unit including a background layer and a data layer through Cascading Style Sheets. Among them, the background layer and the data layer are positioned overlapping, the background layer shows the maximum value, and the data layer shows the numerical value.

[0061] Through Cascading Style Sheets technology, each bar unit is constructed into a double - layer structure including a background layer and a data layer. The background layer and the data layer are completely overlapped in positioning, jointly constituting the visualization basis of the bar unit.

[0062] Among them, the background layer is used to show the maximum value range of the bar unit, providing an intuitive reference framework for users to help them understand the upper limit of the data represented by the bar unit. The background layer is usually set as a dark background; the data layer is used to show the specific numerical value, which is the direct manifestation of the data information in the chart. For different bar units, different colors can be set for the data layer to facilitate distinguishing different categories of bar units. By combining the background layer and the data layer, not only can the hierarchy of the chart be enhanced, but also users can obtain a richer visual experience when browsing the chart.

[0063] Step S50: For each bar unit, set the background layer of the bar unit to have fixed size parameters and fixed color parameters, and set the data layer of the bar unit to have adjustable size parameters and adjustable color parameters.

[0064] It is worth mentioning that in this embodiment, the color parameter is one or more of saturation, brightness, transparency, and color.

[0065] For each column unit, set the background layer of the column unit with fixed size parameters and fixed color parameters to ensure that the size and color parameters of the background layer in the chart always remain consistent, providing users with a clear and stable visual reference; set the data layer of the column unit with adjustable size parameters, that is, the width or height of the data layer (depending on the type of chart) can be dynamically adjusted according to the actual value to intuitively reflect the size of the data. At the same time, the color parameters of the data layer can also be adjusted as needed, such as highlighting certain specific column units by changing saturation, brightness or transparency, providing users with a more intuitive and easy-to-understand chart display effect, thus meeting the diverse needs of users for data visualization.

[0066] Step S20, after detecting the click event of the target label item in each label item, reset the color parameters of each column unit based on the mapping relationship;

[0067] After detecting that the user clicks on a certain label item (i.e., the target label item) in each label item, according to the previously established association relationship between the label item and the column unit, reset the color parameters of the column units in the chart.

[0068] In a feasible embodiment, step S20 may include steps S201 to S202:

[0069] Step S201, determine the target column unit associated with the target label item based on the mapping relationship;

[0070] After detecting that the user clicks on a certain label item (i.e., the target label item) in each label item, first, according to the previously established mapping relationship between the label item and the column unit, quickly and accurately locate the column unit associated with the target label item, that is, the target column unit, to ensure that the user's interaction action can be directly and accurately reflected on the chart, enabling the user to intuitively see the data display change effect corresponding to the click event.

[0071] Step S202, set the color parameters of the data layer of the target column unit to the first parameter value, and set the color parameters of the data layer of the non-target column unit to the second parameter value, so that the color vividness of the target column unit is higher than that of the non-target column unit.

[0072] After determining the target column unit, adjust the color parameters of the target column unit to highlight the target column unit.

[0073] Specifically, the color parameter of the data layer of the target columnar unit is set to a specific value (i.e., the first parameter value), which corresponds to a higher saturation, brightness, or transparency, or even a color that is clearly different from other columnar units. In this embodiment, the specific data of the first parameter value is not limited, as long as the target columnar unit is highlighted in the chart. At the same time, in order to maintain the overall coordination and aesthetics of the chart, the color parameter of the data layer of the non-target columnar unit (i.e., the columnar unit that has no mapping relationship with the target label item) is set to another value (i.e., the second parameter value), which corresponds to a lower saturation, brightness, or transparency. In this embodiment, the specific data of the second parameter value is not limited.

[0074] Therefore, by setting differentiated colors for target column cells and non-target column cells, it is ensured that the target column cells that users are concerned about are fully highlighted, thereby improving the usability and readability of the chart.

[0075] In a feasible embodiment, step S201 may further include step S203:

[0076] Step S203 , displaying the value of the data layer at a first preset position of the target columnar unit.

[0077] After determining the target bar unit, the value of the data layer is displayed at the first preset position of the target bar unit to more intuitively and effectively display the specific value of the category data corresponding to the target bar unit, wherein the first preset position is such as the top or end of the target bar unit data layer (depending on the type of chart).

[0078] Step S30 , displaying a chart according to the state of the columnar units after the color parameters are reset.

[0079] The entire chart is updated and displayed according to the state of the columnar unit after the color parameters are reset.

[0080] For example, a chart created by CSS is as follows Figure 2As shown in the figure, the chart includes six label items: overall evaluation, director and production company, actors, subject audience, script, and production level. Among them, the overall evaluation is the overall label item, and the director and production company, actors, subject audience, script, and production level are individual label items. The chart also includes five column units, which are the data score bars for the five categories of director and production company, actors, subject audience, script, and production level. In the created chart, the overall evaluation label item has established a mapping relationship with each column unit (director and production company, actors, subject audience, script, and production level). The director and production company label item has established a mapping relationship with the column unit of the director and production company category. The actors label item has established a mapping relationship with the column unit of the actors category. The subject audience label item has established a mapping relationship with the column unit of the subject audience category. The script label item has established a mapping relationship with the column unit of the script category. The production level label item has established a mapping relationship with the column unit of the production level category.

[0081] After detecting that the overall evaluation label item triggers a click event, the color parameters of each column unit are reset based on the mapping relationship. That is, the overall evaluation label item is the target label item, and the column units of the director and production company, actors, subject audience, script, and production level are all target column units. The color parameters of the data layer of each target column unit are set to the first parameter value to highlight all the column units and display the specific values of each target column unit.

[0082] In another scenario, as Figure 3 shown, after detecting that the actors label item triggers a click event, the color parameters of each column unit are reset based on the mapping relationship. That is, the actors label item is the target label item, and the column unit of the actors is the target column unit. The column units of the director and production company, subject audience, script, and production level are all non-target column units. The color parameters of the data layer of the target column unit are set to the first parameter value, and the color parameters of the data layer of the non-target column units are set to the second parameter value to highlight the column unit of the actors and display the specific value of the column unit of the actors, and the column units of the director and production company, subject audience, script, and production level are dimmed.

[0083] Thus, according to the mapping relationship, it is possible to quickly locate the target column unit corresponding to the target label item and highlight its column color to highlight the situation of the target category data, forming a clear, intuitive, and dynamic chart, which not only enhances the interactivity and readability of the chart but also brings a richer visual experience and interaction experience to the user.

[0084] Thus, in the embodiments of the present application, by establishing a mapping relationship between chart label items and column units through CSS, the chart display is no longer limited by the built-in functions and styles of traditional ECharts. At the same time, by responding to click events of label items in real time and updating the chart display, users can obtain more immediate and intuitive visual feedback, enhancing the flexibility of the chart display effect and improving the user's sense of participation during use.

[0085] Based on the first embodiment of the present application, in the second embodiment of the present application, the same or similar content as in the above-mentioned first embodiment can be referred to the above introduction and will not be repeated hereinafter. On this basis, the chart display method of the present application may further include steps A10 to A20:

[0086] Step A10, for each column unit, an operation control is set at a second preset position of the column unit;

[0087] For each column unit in the chart, an operation control is set at the second preset position of the column unit, where the second preset position is, for example, the entire area occupied by the data layer of the column unit. Users only need to click or touch gently to immediately activate the interaction function related to the corresponding column unit.

[0088] Step A20, in response to a triggering operation on the operation control, a setting pop-up window for the column unit is generated, where the setting pop-up window is used to modify the color parameters and values of the data layer of the column unit.

[0089] When a user triggers an operation control on a certain column unit through an interaction action, a setting pop-up window dedicated to modifying the attributes of the data layer of the column unit is immediately generated and displayed. The setting pop-up window allows users to freely adjust the color parameters (such as color, brightness, transparency, etc.) of the data layer of the column unit and directly modify the value of the data layer of the column unit.

[0090] In an actual application scenario, users only need to make simple selections and inputs in the setting pop-up window to easily achieve personalized customization of column units, thereby facilitating users to better understand and utilize the information conveyed by the chart.

[0091] The chart display method of the present application may further include steps B10 to B20:

[0092] Step B10, arranging each column unit at equal intervals in the first axis direction of the grid layout;

[0093] To enhance the overall aesthetics and readability of the chart, a grid layout is adopted, and each bar unit is arranged at equal intervals along the first axis direction of the grid layout (usually horizontal or vertical, depending on the specific design of the chart). This ensures a uniform spatial distribution between the bar units, making the chart more visually neat and easy for users to quickly capture and understand information.

[0094] Step B20, adjust the size parameters and intervals of each bar unit according to the current visible window size and the number of bar units.

[0095] Since the chart may need to be displayed in visible windows of different sizes and resolutions, the chart can dynamically adjust the size parameters (such as width or height) of each bar unit and the intervals between them according to the size of the current visible window and the total number of bar units. Thus, no matter whether the user views the chart on a large screen or a small screen, a clear, easy-to-read and aesthetic visual effect can be obtained. At the same time, it ensures the integrity and readability of the information in the chart in different display environments, improving the adaptability and user experience of the chart.

[0096] Exemplarily, in a feasible implementation, the chart layout is as Figure 4 shown. Through the grid layout, the Y-axis has a fixed width, and the right side adapts to the page width. The Y-axis is set to relative positioning so that 0 can be positioned to a specified location. The X-axis uses absolute positioning and grid layout. The bar unit uses 2 divs (block containers) which are A and B respectively. The A div (i.e., the background layer) is absolutely positioned to set the background color of the bottom layer of the column, overlapping with the position of the B div (i.e., the data layer), and which column is highlighted is displayed according to the tab switch.

[0097] In summary, in this embodiment, through a series of innovative steps such as introducing a multi-layer bar unit structure, fine-tuning color parameter settings, integrating operation controls, and dynamically adjusting the grid layout, the interactivity, readability and adaptability of the chart are significantly improved. Users can not only intuitively highlight the target bar unit by clicking on the label item, but also easily modify the color attributes of the bar unit under the guidance of the operation control to achieve personalized customization. At the same time, the bar units are arranged at equal intervals using the grid layout, and the size and interval are dynamically adjusted according to the visible window size, ensuring that the chart can maintain a clear, tidy and easy-to-read layout in various display environments. Under the combined action of these steps, the flexibility and user-friendliness of the chart are greatly enhanced, making data visualization more intuitive and efficient.

[0098] It should be noted that the above examples are only for understanding this application and do not constitute a limitation on the chart display method of this application. Based on this technical concept, more forms of simple transformations are within the protection scope of this application.

[0099] An embodiment of the present application further provides a chart display device. Please refer to Figure 5 , the chart display device includes:

[0100] A mapping relationship establishment module 10, configured to establish a mapping relationship between each label item and each column unit through a cascading style sheet;

[0101] A parameter reset module 20, configured to, after detecting a click event of a target label item in each label item, reset the color parameters of each column unit based on the mapping relationship;

[0102] A chart display module 30, configured to display a chart according to the state of the column unit after the color parameters are reset.

[0103] Optionally, the chart display device further includes a column unit establishment module (not shown), and the column unit establishment module is configured to:

[0104] Establish each column unit including a background layer and a data layer through a cascading style sheet, wherein the background layer and the data layer are positioned overlapping, the background layer displays the maximum value, and the data layer displays the value;

[0105] For each column unit, set the background layer of the column unit to have fixed size parameters and fixed color parameters, and set the data layer of the column unit to have adjustable size parameters and adjustable color parameters.

[0106] Optionally, each label item includes an overall label item and a single-item label item, and the mapping relationship establishment module 10 is further configured to:

[0107] For the overall label item, establish a mapping relationship between the overall label item and each column unit through a cascading style sheet;

[0108] For the single-item label item, establish a mapping relationship between the single-item label item and the selected single-item column unit through a cascading style sheet.

[0109] Optionally, the parameter reset module 20 is further configured to:

[0110] Determine the target column unit associated with the target label item based on the mapping relationship;

[0111] Set the color parameter of the data layer of the target column unit to a first parameter value, and set the color parameter of the data layer of the non-target column unit to a second parameter value, so that the color sharpness of the target column unit is higher than that of the non-target column unit.

[0112] Optionally, the parameter reset module 20 is further configured to:

[0113] Display the value of the data layer at a first preset position of the target column unit.

[0114] Optionally, the chart display device further includes a control setting module (not shown), and the control setting module is used for:

[0115] For each column unit, an operation control is set at a second preset position of the column unit;

[0116] In response to a trigger operation on the operation control, a setting pop-up window for the column unit is generated, wherein the setting pop-up window is used to modify the color parameters and numerical values of the data layer of the column unit.

[0117] Optionally, the column unit establishment module is further used for:

[0118] Arrange each column unit at equal intervals in the first axis direction of the grid layout;

[0119] Adjust the size parameters and intervals of each column unit according to the current visible window size and the number of column units.

[0120] The chart display device provided by the embodiment of the present application adopts the chart display method in the above embodiment, and can provide a more flexible chart display effect. Compared with the prior art, the beneficial effects of the chart display device provided by the embodiment of the present application are the same as those of the chart display method provided by the above embodiment, and other technical features in the chart display device are the same as those disclosed in the chart display method of the above embodiment, and will not be elaborated here.

[0121] The embodiment of the present application provides an electronic device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein, the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the chart display method in the first embodiment above.

[0122] Next, refer to Figure 6 , which shows a schematic structural diagram of an electronic device suitable for implementing the embodiment of the present application. The electronic device in the embodiment of the present application may include, but is not limited to, mobile terminals such as laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions: tablet computers), etc. and fixed terminals such as digital TVs, desktop computers, etc. Figure 6 The electronic device shown is only an example and should not impose any limitation on the functions and usage scope of the embodiment of the present application.

[0123] As Figure 6As shown, the electronic device may include a processing device 1001 (such as a central processing unit, a graphics processing unit, etc.), which may perform various appropriate actions and processes according to a program stored in the read-only memory 1002 or a program loaded from the storage device 1003 into the random access memory 1004. In the random access memory 1004, various programs and data required for the operation of the electronic device are also stored. The processing device 1001, the read-only memory 1002, and the random access memory 1004 are connected to each other through a bus 1005. The input / output interface 1006 is also connected to the bus. Generally, the following systems may be connected to the input / output interface 1006: an input device 1007 including, for example, a touch screen, a touchpad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 may allow the electronic device to communicate with other devices wirelessly or wiredly to exchange data. Although the figure shows an electronic device having various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems may be alternatively implemented or had.

[0124] In particular, according to the embodiments disclosed in the present application, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program codes for executing the methods shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from the network through the communication device, or installed from the storage device 1003, or installed from the read-only memory 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the methods of the embodiments disclosed in the present application are executed.

[0125] The electronic device provided by the embodiments of the present application adopts the chart display method in the above embodiments, and can provide a more flexible chart display effect. Compared with the prior art, the beneficial effects of the electronic device provided by the embodiments of the present application are the same as those of the chart display method provided by the above embodiments, and other technical features in the electronic device are the same as the features disclosed in the chart display method of the previous embodiment, which will not be elaborated here.

[0126] It should be understood that the various parts disclosed in the embodiments of the present application may be implemented by hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics may be combined in a suitable manner in any one or more embodiments or examples.

[0127] The above is only the specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present application can easily think of changes or substitutions, which should all be covered within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

[0128] An embodiment of the present application provides a computer-readable storage medium having computer-readable program instructions (i.e., computer programs) stored thereon, and the computer-readable program instructions are used to execute the chart display method in the above embodiment.

[0129] The computer-readable storage medium provided by the embodiment of the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems or devices, or any combination of the above. More specific examples of the computer-readable storage medium may include, but are not limited to: electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM) or flash memory, optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium that contains or stores a program, and the program can be used by or in combination with an instruction execution system or device. The program code contained on the computer-readable storage medium can be transmitted by any appropriate medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

[0130] The above computer-readable storage medium may be included in an electronic device; or it may exist separately without being assembled into the electronic device.

[0131] The above computer-readable storage medium carries one or more programs. When the one or more programs are executed by an electronic device, the electronic device is caused to: establish a mapping relationship between each label item and each column unit through a cascading style sheet; after detecting a click event of a target label item among each label item, reset the color parameters of each column unit based on the mapping relationship; and perform chart display according to the state of the column units after the color parameter reset.

[0132] Computer program code for performing the operations of the embodiments of the present application may be written in one or more programming languages or combinations thereof. The above-mentioned programming languages include object-oriented programming languages such as Java, Smalltalk, C++, and also include conventional procedural programming languages such as the "C" language or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, executed as an independent software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (for example, by connecting through the Internet using an Internet service provider).

[0133] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagram may represent a module, a program segment, or a part of code that contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than that marked in the accompanying drawings. For example, two consecutive blocks shown may actually be executed substantially in parallel, and they may sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, and the combination of blocks in the block diagram and / or flowchart, may be implemented by a dedicated hardware-based system for performing the specified functions or operations, or may be implemented by a combination of dedicated hardware and computer instructions.

[0134] The modules involved in the embodiments described in the present application may be implemented in software or in hardware. Among them, the name of the module does not constitute a limitation on the unit itself in some cases.

[0135] The readable storage medium provided by the embodiments of the present application is a computer-readable storage medium. The computer-readable storage medium stores computer-readable program instructions (i.e., computer programs) for performing the above-mentioned chart display method, and can provide a more flexible chart display effect. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the embodiments of the present application are the same as those of the chart display method provided by the above embodiments, and will not be elaborated here.

[0136] The embodiment of the present application further provides a computer program product, including a computer program, which when executed by a processor, implements the steps of the chart display method as described above.

[0137] The computer program product provided by the embodiment of the present application can mine effective information from the data generated by an information technology system. Compared with the prior art, the beneficial effects of the computer program product provided by the embodiment of the present application are the same as those of the chart display method provided by the above embodiment, and will not be elaborated here.

[0138] The above are only partial embodiments of the present application, and do not limit the patent scope of the present application. Any equivalent structural transformation made under the technical concept of the present application by using the content of the specification and drawings of the present application, or any direct / indirect application in other related technical fields, is included in the patent protection scope of the present application.

Claims

1. A method for displaying a chart, characterized in that: The chart display method comprises: A mapping relationship between each label item and each columnar unit is established through a cascading style sheet; After detecting a click event of a target label item in each of the label items, resetting the color parameters of each of the columnar units based on the mapping relationship; The chart is displayed according to the state of the columnar unit after the color parameters are reset.

2. The method for displaying a chart according to claim 1, wherein: Before the step of establishing the mapping relationship between each tag item and each columnar unit through the cascading style sheet, the step further includes: Establishing each of the columnar units including a background layer and a data layer through a cascading style sheet, wherein the background layer and the data layer are positioned and overlapped, the background layer displays a maximum value, and the data layer displays a value; For each of the columnar units, the background layer of the columnar unit is set to have a fixed size parameter and a fixed color parameter, and the data layer of the columnar unit is set to have an adjustable size parameter and an adjustable color parameter.

3. The method for displaying a chart according to claim 1, wherein: Each of the label items includes an overall label item and a single label item. The step of establishing a mapping relationship between each label item and each columnar unit through a cascading style sheet includes: For the overall label item, a mapping relationship between the overall label item and each of the columnar units is established through a cascading style sheet; For the single label item, a mapping relationship between the single label item and the selected single columnar unit is established through a cascading style sheet.

4. The method for displaying a chart according to claim 1, wherein: The step of resetting the color parameters of each columnar unit based on the mapping relationship includes: Determine the target columnar unit associated with the target tag item based on the mapping relationship; The color parameter of the data layer of the target columnar unit is set to a first parameter value, and the color parameter of the data layer of the non-target columnar unit is set to a second parameter value, so that the color vividness of the target columnar unit is higher than the color vividness of the non-target columnar unit.

5. The method for displaying a chart according to claim 4, wherein: After the step of determining the target columnar unit associated with the target tag item based on the mapping relationship, the method further includes: The value of the data layer is displayed at a first preset position of the target columnar unit.

6. The method for displaying a chart according to claim 1, wherein: The method further comprises: For each of the columnar units, an operation control is arranged at a second preset position of the columnar unit; In response to a triggering operation on the operation control, a setting pop-up window for the columnar unit is generated, wherein the setting pop-up window is used to modify color parameters and values ​​of the data layer of the columnar unit.

7. The method for displaying a graph according to any one of claims 1 to 6, wherein: The method further comprises: Arrange the columnar units at equal intervals in the first axis direction of the grid layout; The size parameters and intervals of each of the columnar units are adjusted according to the current visible window size and the number of columnar units.

8. An electronic device, characterized in that: The electronic device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the chart display method according to any one of claims 1 to 7.

9. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the chart display method according to any one of claims 1 to 7 are implemented.

10. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the steps of the chart display method described in any one of 1 to 7 are implemented.

Images