Visual chart updating methods and devices, electronic devices and storage media

Abstract

This application provides a method, apparatus, electronic device, and storage medium for updating visualization charts, belonging to the field of financial technology. The method includes: acquiring an original visualization chart of report data with configured labels for an original sliding component; acquiring historical query time information of the report data and configuring labels on the original sliding component based on the historical query time information to obtain a preliminary sliding component; configuring the preliminary sliding component with colors based on color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding components include historical interval labels; acquiring the marking style information of the current query interval; configuring label attributes on the candidate sliding components based on the marking style information, color configuration parameters, and historical interval labels to obtain a target sliding component; and updating the original visualization chart based on the target sliding component to obtain the target visualization chart. This application simplifies the operation of multiple data queries or exports of visualization charts.

Description

Technical Field

[0001] This application relates to the field of financial technology, and in particular to a method and apparatus for updating visual charts, an electronic device, and a storage medium. Background Technology

[0002] In the fintech field, there is a large amount of financial data, such as insurance policy data, financial product sales data, etc. In order to view financial data in different time periods more intuitively, visualization charts are set up to display the data.

[0003] In related technologies, a sliding input axis is set on the visualization chart to allow users to select the data time period. However, the sliding input axis only displays the currently selected time period and does not show previously selected time periods. If users need to view or export data from different time periods through the visualization chart, they need to record the previously selected time periods after each query to prevent duplicate queries or exports. However, recording the selected time periods multiple times increases the number of steps and affects the efficiency of data querying or exporting on the visualization chart. Therefore, how to simplify the data querying or exporting operations for different time periods on the visualization chart has become an urgent technical problem to be solved. Summary of the Invention

[0004] The main objective of this application is to provide a method, apparatus, electronic device, and storage medium for updating visual charts, which aims to simplify data querying or exporting operations for different time periods on visual charts.

[0005] To achieve the above objectives, a first aspect of this application proposes a method for updating a visual chart, the method comprising:

[0006] Obtain the raw visualization chart of the report data; wherein, the raw visualization chart is equipped with a raw sliding component with configuration labels, and the raw sliding component is used to set sliding marks according to the current query range;

[0007] Obtain the historical query time information of the report data, and configure the labels of the original sliding component according to the historical query time information to obtain the initial sliding component;

[0008] The initial sliding component is colored according to preset color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding component includes historical interval labels;

[0009] Obtain the tagging style information of the current query interval;

[0010] Based on the marker style information, the color configuration parameters, and the historical interval labels, the candidate sliding components are configured with label attributes to obtain the target sliding component;

[0011] The original visualization chart is updated based on the target sliding component to obtain the target visualization chart.

[0012] In some embodiments, obtaining historical query time information of the report data and configuring labels on the original sliding component based on the historical query time information to obtain a preliminary sliding component includes:

[0013] Obtain the historical query time information of the report data;

[0014] Based on the historical query time information, a range is selected on the original sliding component to obtain the historical query range; wherein, the historical query range includes: the historical query start node and the historical query end node;

[0015] Labels are set for the starting nodes of the historical queries to obtain the historical query starting point labels;

[0016] Labels are set for the historical query termination nodes to obtain historical query endpoint labels;

[0017] The initial sliding component is obtained by setting labels based on the historical query start point label and the historical query end point label.

[0018] In some embodiments, configuring the color of the initial sliding component according to preset color configuration parameters to obtain candidate sliding components includes:

[0019] The initial sliding component is divided into intervals to obtain the historical query interval and the non-historical query interval; wherein, the non-historical query interval is the interval outside the historical query interval on the initial sliding component;

[0020] The color attribute parameters of the preset original cascading style sheet are configured according to the color configuration parameters, the historical query range, and the non-historical query range to obtain the target cascading style sheet; wherein, the target cascading style sheet is used to set the colors of the historical query range and the non-historical query range;

[0021] The candidate sliding component is obtained by color rendering of the initial sliding component using the target Cascading Style Sheet.

[0022] In some embodiments, the color configuration parameters include: a first color parameter and a second color parameter, wherein the first color parameter is different from the color of the current query interval, and the second color parameter is the same as the background color of the original visualization chart; the step of configuring the color attribute parameters of the preset original cascading style sheet according to the color configuration parameters, the historical query interval, and the non-historical query interval to obtain the target cascading style sheet includes:

[0023] The historical query interval is used to calculate the interval percentage, thus obtaining the historical interval percentage;

[0024] The proportion of non-historical query intervals is calculated to obtain the proportion of non-historical intervals;

[0025] The target cascading style sheet is obtained by configuring the color attribute parameters of the original cascading style sheet based on the first color parameter, the second color parameter, the historical interval ratio, and the non-historical interval ratio.

[0026] In some embodiments, configuring label attributes of the candidate sliding components based on the label style information, the color configuration parameters, and the historical interval labels to obtain the target sliding component includes:

[0027] The historical interval labels are styled according to the label style information to obtain candidate interval labels;

[0028] The candidate interval labels are configured with colors according to the color configuration parameters to obtain updated interval labels;

[0029] The candidate sliding component is labeled according to the updated interval label to obtain the target sliding component.

[0030] In some embodiments, the acquisition of the raw visualization chart of the report data includes:

[0031] Get the current visualization chart of the report data;

[0032] The original sliding component is selected from the preset candidate sliding components;

[0033] The original visualization chart is obtained by configuring the components of the current visualization chart based on the original sliding component.

[0034] In some embodiments, obtaining the historical query time information of the report data includes:

[0035] Obtain historical query period information and time selection instructions for the report data;

[0036] The historical query time information is obtained by selecting a time period according to the time selection instruction.

[0037] To achieve the above objectives, a second aspect of this application provides a visualization chart updating apparatus, the apparatus comprising:

[0038] The data acquisition module is used to acquire the original visual charts of report data; wherein, the original visual charts are equipped with original sliding components with configuration labels, and the original sliding components are used to set sliding marks according to the current query range;

[0039] The label configuration module is used to obtain the historical query time information of the report data, and configure the labels of the original sliding component according to the historical query time information to obtain the initial sliding component;

[0040] The color configuration module is used to configure the color of the initial sliding component according to preset color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding component includes a historical interval label;

[0041] The information acquisition module is used to acquire the marking style information of the current query interval;

[0042] The label attribute configuration module is used to configure the label attributes of the candidate sliding component according to the label style information, the color configuration parameters and the historical interval label, so as to obtain the target sliding component;

[0043] The chart update module is used to update the original visualization chart according to the target sliding component to obtain the target visualization chart.

[0044] To achieve the above objectives, a third aspect of this application provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method described in the first aspect.

[0045] To achieve the above objectives, a fourth aspect of the present application provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the method described in the first aspect.

[0046] The visualization chart updating method, apparatus, electronic device, and storage medium proposed in this application obtain historical interval labels by setting labels corresponding to historical query time information on the sliding component of the original visualization chart. Then, the sliding component is partitioned and color-configured according to color configuration parameters and the historical interval labels. Next, the historical interval labels on the sliding component are color- and style-configured based on the label style information and color configuration parameters of the sliding markers, resulting in a target sliding component with labels identifying historical query time information and having the same style as the current query interval. Therefore, the original visualization chart is updated based on the target sliding component, adding labels of historical query time information to the current query interval. Users can adjust the current query interval based on the labels of historical query time information on the visualization chart, eliminating the need to record the queried time period each time when querying or exporting report data for different time periods. This simplifies the querying or exporting of report data for different time periods and improves the efficiency of querying or exporting report data for different time periods. Attached Figure Description

[0047] Figure 1 This is a schematic diagram of the structure of the sliding component that comes with the visual chart in the visual chart update method provided in this application embodiment;

[0048] Figure 2 This is a flowchart of the visualization chart update method provided in the embodiments of this application;

[0049] Figure 3 yes Figure 2 The flowchart of step S201 in the text;

[0050] Figure 4(a) is a schematic diagram of the basic sliding component in the visualization chart update method provided in the embodiments of this application;

[0051] Figure 4(b) is a schematic diagram of a sliding component with labels in the visualization chart update method provided in the embodiments of this application;

[0052] Figure 5 yes Figure 2 The flowchart of step S202 in the text;

[0053] Figure 6 This is a schematic diagram of the original sliding component's label attribute configuration in the visualization chart update method provided in this application embodiment;

[0054] Figure 7 yes Figure 5 The flowchart of step S501 in the process;

[0055] Figure 8 yes Figure 2 The flowchart of step S203 in the process;

[0056] Figure 9 yes Figure 8 The flowchart of step S802 in the process;

[0057] Figure 10(a) is a schematic diagram of color rendering corresponding to setting color attribute parameters in the visualization chart update method provided in the embodiment of this application;

[0058] Figure 10(b) is another color rendering diagram corresponding to setting color attribute parameters in the visualization chart update method provided in the embodiments of this application;

[0059] Figure 11 yes Figure 2 The flowchart of step S205 in the document;

[0060] Figure 12 This is a schematic diagram illustrating the transformation of the original sliding component into the target sliding component in the visualization chart update method provided in this application embodiment;

[0061] Figure 13 This is a schematic diagram of the structure of the visualization chart updating device provided in the embodiments of this application;

[0062] Figure 14 This is a schematic diagram of the hardware structure of the electronic device provided in the embodiments of this application;

[0063] Figure 15 This is a schematic diagram of the target visualization chart in the visualization chart update method provided in the embodiments of this application. Detailed Implementation

[0064] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0065] It should be noted that although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first," "second," etc., in the specification, claims, and the aforementioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence.

[0066] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0067] First, let's analyze some of the terms used in this application:

[0068] Artificial intelligence (AI) is a new branch of computer science that studies, develops, and applies theories, methods, technologies, and systems to simulate, extend, and expand human intelligence. It aims to understand the essence of intelligence and produce intelligent machines that can react in a way similar to human intelligence. Research in this field includes robotics, speech recognition, image recognition, natural language processing, and expert systems. AI can simulate the information processes of human consciousness and thought. Furthermore, AI utilizes digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceiving the environment, acquiring knowledge, and using that knowledge to achieve optimal results.

[0069] Visual charts: encompassing various types of graphs and images used to display data and information, making them easier to understand and analyze.

[0070] A Slider component is a slider or slider that allows users to select a value or choose from a set of options by dragging a handle (slider). Slider components are very common in various applications, such as adjusting volume, selecting dates, and selecting ranges.

[0071] Cascading Style Sheets (CSS) is a language used to describe the style of web page elements, allowing developers to control the layout, color, font, and other visual characteristics of web pages.

[0072] `linear-gradient` is a property in Cascading Style Sheets used to create a linear gradient effect. It can be applied to properties such as the background or border of web page elements. This property allows you to define the direction and color changes of the gradient.

[0073] In the fintech field, a large amount of financial data is generated, such as financial product sales data, financial product browsing data, insurance policy data, etc. In order to view financial data in different time periods more intuitively and to conduct financial data analysis, visualization charts are set up to display the data.

[0074] In related technologies, visualization charts often include a built-in slider component that allows users to select data time periods for interactive data manipulation. However, this slider only displays the currently selected time period. If a user needs to query or export data for different time periods, each selection must be recorded before querying the next time period, increasing the number of steps required for data retrieval or export and impacting efficiency. Therefore, simplifying the data retrieval or export process for different time periods on visualization charts and improving efficiency has become a pressing technical challenge.

[0075] Based on this, embodiments of this application provide a visualization chart update method and apparatus, electronic device and storage medium, which aim to set labels corresponding to historical query time information on the sliding component of the visualization chart so that each time period selection can be based on the labels of historical query time information, without the need to manually record the historical selected time period, thereby assisting in data query or export operations for different time periods and improving the efficiency of data query or export for different time periods.

[0076] The visualization chart updating method, apparatus, electronic device, and storage medium provided in this application are specifically described through the following embodiments. First, the visualization chart updating method in this application is described.

[0077] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) refers to the theories, methods, technologies, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.

[0078] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.

[0079] The visualization chart updating method provided in this application relates to the field of financial technology. This visualization chart updating method can be applied to a terminal, a server, or software running on either a terminal or a server. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, etc.; the server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application implementing the visualization chart updating method, but is not limited to the above forms.

[0080] This application can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform specific tasks or implement specific abstract data types. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0081] It should be noted that in all specific embodiments of this application, when processing data related to user identity or characteristics, such as user information, user behavior data, user historical data, and user location information, user permission or consent is obtained first. Furthermore, the collection, use, and processing of this data comply with relevant laws, regulations, and standards. In addition, when embodiments of this application require access to sensitive personal information of users, separate permission or consent from the user is obtained through pop-ups or redirection to confirmation pages. Only after obtaining the user's separate permission or consent is the necessary user-related data required for the proper functioning of these embodiments acquired.

[0082] The visualization chart update method provided in this application adds labels with historical query time information to the visualization chart, while also displaying historical query intervals. Conventional visualization charts come with built-in sliding components, but these components cannot display intervals corresponding to historical query time information. Furthermore, visualization charts are generally drawn using graphics drawing scripts (canvas), making it impossible to modify them using front-end technologies after introduction. In related technologies, such as... Figure 1 As shown, the built-in slider component of the chart library (i.e., the slider component on the visualization chart) only has the function of displaying the current query range and cannot display the range corresponding to the historical query time information. If it is necessary to display the current query range and the range corresponding to the historical query time information on the slider component of the visualization chart at the same time, the visualization chart and the slider component of the visualization chart need to be rebuilt, but the development difficulty is high and the overall development cost is large.

[0083] In the visualization chart update method provided in this application embodiment, the original sliding component is modified to form interval labels with historical query time information, and the visualization chart is updated based on the modified sliding component. There is no need to redevelop the visualization chart, which reduces development difficulty and development cost.

[0084] Figure 2 This is an optional flowchart of the visualization chart update method provided in the embodiments of this application. Figure 2 The method may include, but is not limited to, steps S201 to S206.

[0085] Step S201: Obtain the original visualization chart of the report data; wherein, the original visualization chart has an original sliding component with configuration labels, and the original sliding component is used to set sliding marks according to the current query range;

[0086] Step S202: Obtain historical query time information of report data, and configure labels for the original sliding component based on the historical query time information to obtain the initial sliding component;

[0087] Step S203: Configure the color of the initial sliding component according to the preset color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding component includes historical interval labels;

[0088] Step S204: Obtain the marking style information of the current query interval;

[0089] Step S205: Configure the label attributes of the candidate sliding components according to the label style information, color configuration parameters and historical interval labels to obtain the target sliding component;

[0090] Step S206: Update the original visualization chart according to the target sliding component to obtain the target visualization chart.

[0091] Steps S201 to S206 of this embodiment involve obtaining an original visual chart and an original sliding component with configured labels. Historical query time information of the report data is obtained, and labels are set on the original sliding component based on this historical query time information to obtain a preliminary sliding component with labels corresponding to the historical query time information. To prevent the labels corresponding to the historical query time information on the preliminary sliding component from affecting the display of the current query interval, the preliminary sliding component needs to be color-configured according to color configuration parameters. Then, label attributes are set on the preliminary sliding component based on the mark style information and color configuration parameters of the current query interval to obtain the target sliding component. Therefore, by configuring interval labels corresponding to the historical query time information on the original sliding component and adjusting the color and style of the interval labels to distinguish the current query interval, the target sliding component is obtained. Thus, the original visual chart is updated based on the target sliding component to obtain the target visual chart, resulting in a visual chart with historical interval labels. Users can adjust the current query interval based on the historical interval labels to select different time periods. At the same time, when querying or exporting data for different time periods, there is no need to manually record each selected time period. Data queries or exports for different time periods can be performed quickly, improving the efficiency of data queries or exports for different time periods on visualization charts.

[0092] In step S201 of some embodiments, the report data may specifically be financial report data. It should be noted that, if applied to the banking sector, the report data could be sales data of the bank's financial products, personal transaction data, etc.; if applied to the insurance sector, the report data could be policy data of different insurance categories, consultation data, etc. This embodiment does not impose specific limitations on the financial sector in which the report data is located. Specifically, the original visualization chart has an original sliding component, and the original sliding component can be configured with labels. Further explanation is that the sliding component, also called a Slider component, supports user selection within a time interval and can accept both continuous and discrete values.

[0093] Please see Figure 3 In some embodiments, step S201 may include, but is not limited to, steps S301 to S303:

[0094] Step S301: Obtain the current visualization chart of the report data;

[0095] Step S302: Select the original sliding component from the preset candidate sliding components;

[0096] Step S303: Configure the current visualization chart according to the original sliding component to obtain the original visualization chart.

[0097] It should be noted that the Slider component includes a basic slider component, a slider component with an input box, a slider component with labels, a slider component that dynamically adds or removes nodes, etc. A basic slider component can only select a range; that is, it only displays a marker for the currently selected range. A slider component with labels, however, not only displays the currently selected marker but also has labels, and these labels represent different numerical values. Specifically, the basic slider component is shown in Figure 4(a), and the slider component with labels is shown in Figure 4(b). It can be seen that the slider component has two numerical labels.

[0098] In step S301 of some embodiments, the current visualization chart has a basic sliding component. However, the basic sliding component can only display the marker for the current query interval and cannot set the marker for the historical query time information. Therefore, it is necessary to modify the sliding component on the current visualization chart to support the display of historical query time information.

[0099] In steps S302 to S303 of some embodiments, the original sliding component is first selected from the candidate sliding components, that is, the sliding component with the label is selected. It should be noted that multiple candidate sliding components are set, and each candidate sliding component has a different category and supports different functions. In this embodiment, selecting the sliding component with the label from multiple categories of candidate sliding components can support the marking of historical query time information. Therefore, by configuring the original sliding component on the current visualization chart, the basic sliding component is replaced by the sliding component with the label, so as to obtain the original visualization chart with the original sliding component.

[0100] In steps S301 to S303 of this embodiment, the original sliding component is selected from the candidate sliding components, that is, the original sliding component with label configuration is selected, and the original sliding component is configured on the current visualization chart to obtain the original visualization chart that supports the label configuration corresponding to the historical query time information.

[0101] Please see Figure 5 In some embodiments, step S202 may include, but is not limited to, steps S501 to S505:

[0102] Step S501: Obtain historical query time information for report data;

[0103] Step S502: Select an interval on the original sliding component based on the historical query time information to obtain the historical query interval; wherein, the historical query interval includes: the historical query start node and the historical query end node;

[0104] Step S503: Set labels for the starting nodes of historical queries to obtain the labels for the starting points of historical queries;

[0105] Step S504: Set labels for the historical query termination nodes to obtain historical query endpoint labels;

[0106] Step S505: Set labels for the original sliding component based on the historical query start point label and the historical query end point label to obtain the initial sliding component.

[0107] In steps S501 to S502 of some embodiments, the historical query time information can be a time period of a historical query, or a point in time of a historical query. Furthermore, the historical query time information can be the time of the last query, or it can be the time of one of multiple historical queries. It should be noted that if the historical query time information is a time period, and a historical query interval is selected on the original sliding component, then the historical query start node and historical query end node included in the historical query interval will be different. If the historical query time information is a point in time, then the historical query start node and historical query end node will be the same. In this embodiment, the historical query time information is a previously queried time period, so the historical query start node and historical query end node are different. The historical query start node and historical query end node are found on the original sliding component based on the historical query time information. For example, if the range of the original sliding component is 2000-2024, and the historical query time information is 2010-2015, then the time node of 2010 on the original sliding component will be used as the starting node of the historical query, and the time node of 2015 on the original sliding component will be used as the ending node of the historical query.

[0108] In steps S503 to S505 of some embodiments, the original sliding component supports label setting. This is achieved by setting a corresponding historical query start-point label on the historical query start node and a corresponding historical query end-point label on the historical query end node. Finally, the historical query start-point label and historical query end-point label are set on the original sliding component to generate a preliminary sliding component with labels corresponding to the historical query time information.

[0109] Specifically, the original slider component has a label attribute, also known as the Marks attribute. This is a supported configuration feature of the original slider component. By configuring the Marks attribute, one or more data points can be marked on the data axis of the original slider component. For example, ... Figure 6As shown, the starting node for historical queries is determined to be 2010, and the ending node is determined to be 2015. The Marks property of the original sliding component is configured with the value [{value:2010, label:'2010'},{value:2015, label:'2015'}] to configure the historical query start and end labels on the original sliding component.

[0110] Please see Figure 7 In some embodiments, step S501 may include, but is not limited to, steps S701 to S702:

[0111] Step S701: Obtain historical query period information and time selection instructions for report data;

[0112] Step S702: Select the historical query time period information according to the time selection instruction to obtain the historical query time information.

[0113] In step S701 of some embodiments, the historical query time period information is the time period information of multiple historical queries, and the time selection instruction is the selection made on the multiple historical query time period information, used to indicate the selected historical query time period information.

[0114] In step S702 of some embodiments, a time selection is performed in the historical query time period information based on the time selection instruction. Specifically, a historical query time period can be selected as the historical query time information, or a time period or a point in time within the historical query time period information can be selected as the historical query time information. Therefore, by voluntarily selecting the time period to be compared as the historical query time information, when querying or exporting data in the current query interval, the two time periods can be adjusted based on the time period to be compared, facilitating quick querying or exporting of data from the two time periods to be compared.

[0115] Specifically, if there are multiple historical query periods, such as 2008-2012, 2010-2015, and 2015-2017, and if it is necessary to compare 2012-2015 and 2015-2018, users can select 2012-2015 as the historical query period if the historical query period is 2010-2015. Then, the original visualization chart can display the historical interval labels corresponding to 2012-2015, so that users can slide to 2015-2018 based on the historical interval labels to query or export data.

[0116] In steps S701 to S702 of this embodiment, historical query time information is selected from the historical query time period information according to the time selection instruction, so that the historical query time information can be customized. This allows the historical interval label to be set according to needs, increasing the flexibility of the historical interval label setting on the visualization chart.

[0117] Please see Figure 8 In some embodiments, step S203 may include, but is not limited to, steps S801 to S803:

[0118] Step S801: Divide the initial sliding component into intervals to obtain historical query intervals and non-historical query intervals; wherein, the non-historical query intervals are the intervals other than the historical query intervals on the initial sliding component;

[0119] Step S802: Configure the color attribute parameters of the preset original cascading style sheet according to the color configuration parameters, historical query range and non-historical query range to obtain the target cascading style sheet; wherein, the target cascading style sheet is used to set the colors of the historical query range and non-historical query range.

[0120] Step S803: Render the initial sliding component with color using the target Cascading Style Sheet to obtain the candidate sliding component.

[0121] In step S801 of some embodiments, the initial sliding component is provided with a historical query start point label and a historical query end point label. The historical query start point label and the historical query end point label can be used to divide the historical query range and non-historical query range on the initial sliding component. It should be noted that the historical query range is the range between the historical query start point label and the historical query end point label, and the non-historical query range is the range on the initial sliding component other than the historical query range.

[0122] In step S802 of some embodiments, the sliding area on the initial sliding component is a container, which cannot be divided into multiple containers and its background color set segment by segment. This embodiment uses the original Cascading Style Sheet (CSS), which is a language used to describe the style of web page elements, allowing control over the layout, color, and font of the web page. That is, it can set the color of the historical query range and the non-historical query range on the initial sliding component. It should be noted that the original CSS sets the color of different ranges on the initial sliding component through attributes. Therefore, by configuring the color attribute parameters of the original CSS according to the color configuration parameters, the historical query range, and the non-historical query range, a target CSS is obtained. The target CSS can then set the color of the historical query range and the non-historical query range on the initial sliding component separately, achieving segmented color settings.

[0123] In step S803 of some embodiments, the initial sliding component is colored by the target Cascading Style Sheet, that is, different colors are rendered in the historical query range and non-historical query range of the initial sliding component according to the attribute values ​​configured in the target Cascading Style Sheet, so as to realize the color setting of the range.

[0124] In steps S801 to S803 of this embodiment, the historical query interval and non-historical query interval on the initial sliding component are divided into color settings by using cascading style sheets to obtain candidate sliding components that highlight the historical interval, making it easier for users to intuitively determine the historical query interval.

[0125] In some embodiments, the color configuration parameters include: a first color parameter and a second color parameter. The first color parameter is different from the color of the current query interval, and the second color parameter is the same as the background color of the original visualization chart. It should be noted that the first color parameter is used to represent the color of historical query intervals. By setting the color of the historical query interval to be different from the color of the current query interval, the historical query interval can be distinguished from the current query interval. The second color parameter is the color of non-historical query intervals. Setting the second color parameter to be the same as the background color of the original visualization chart, i.e., setting the non-historical query interval to be the same as the background color of the original visualization chart, will reflect the historical query interval.

[0126] Please see Figure 9 In some embodiments, step S802 includes, but is not limited to, steps S901 to S903:

[0127] Step S901: Calculate the percentage of the historical query interval to obtain the percentage of the historical interval;

[0128] Step S902: Calculate the proportion of non-historical query intervals to obtain the proportion of non-historical intervals;

[0129] Step S903: Configure the color attribute parameters of the original cascading style sheet according to the first color parameter, the second color parameter, the proportion of historical intervals, and the proportion of non-historical intervals to obtain the target cascading style sheet.

[0130] In steps S901 to S902 of some embodiments, the sum of the historical query interval and the non-historical query interval is the entire sliding interval of the candidate sliding component. The historical query interval is then used to calculate its proportion, that is, the ratio of the historical query interval to the entire sliding interval of the candidate sliding component is calculated to obtain the historical interval proportion. Similarly, the non-historical query interval is used to calculate its proportion, that is, the ratio of the non-historical interval to the entire sliding interval of the candidate sliding component is calculated to obtain the non-historical interval proportion.

[0131] In step S903 of some embodiments, the original Cascading Style Sheet (CSS) is also referred to as CSS, and its color attribute parameter is called linear-gradient. linear-gradient is used to create a linear gradient effect, that is, to create a color range between the historical query range and the non-historical query range. The target Cascading Style Sheet is obtained by configuring linear-gradient through the historical range percentage, the first color parameter, the non-historical query range, and the second color parameter. Therefore, the target Cascading Style Sheet can be set to use the first color parameter for color rendering for the historical range percentage and the second color parameter for color rendering for the non-historical range percentage, achieving partitioned color rendering.

[0132] Specifically, the syntax of `linear-gradient` is: `linear-gradient(direction, color-stop1, color-stop2, ...)`, where `direction` represents the angle value specifying the direction of the gradient, and `color-stop1, color-stop2, ...` are used to specify the start and end colors of the gradient. For example, as shown in Figure 10(a), if the value of `linear-gradient` is configured as `(to right, dark gray 0%, light gray 100%)`, the rendered effect is a gradual transition from dark gray to light gray from left to right. As shown in Figure 10(b), if the value of `linear-gradient` is configured as `(to right, dark gray 0%, dark gray 50%, light gray 50%, light gray 100%)`, the rendered effect is a transition from left to right, with the first 50% being dark gray and the last 50% being light gray. Therefore, by determining the proportion of historical intervals, the proportion of non-historical intervals, the first color parameter, and the second color parameter, the partition colors can be set on the sliding component of the initial sliding component.

[0133] As disclosed above, if the first color parameter is the pixel value corresponding to gray and the second color parameter is the pixel value corresponding to white, the initial sliding component is colored by the target cascading style sheet configured with the color attribute parameters, that is, the historical query range is set to gray and the non-historical query range is set to white.

[0134] In steps S901 to S903 of this embodiment, the proportion of historical query intervals is calculated as the historical interval proportion, and the proportion of non-historical query intervals is calculated as the non-historical interval proportion. Based on the historical interval proportion, the non-historical interval proportion, the first color parameter, and the second color parameter, the color attribute parameters of the original Cascading Style Sheet are set to obtain the configured target Cascading Style Sheet. Therefore, the configured target Cascading Style Sheet allows for setting different colors to render historical query intervals and non-historical query intervals, highlighting the historical query intervals and achieving a visual display of historical query time information.

[0135] In step S204 of some embodiments, the marker style information is the style information of the sliding marker of the current query interval, and the marker style information is used to indicate the style of the historical interval label.

[0136] Please see Figure 11 In some embodiments, step S205 may include, but is not limited to, steps S1101 to S1103:

[0137] Step S1101: Set the style of the historical interval labels according to the label style information to obtain the candidate interval labels;

[0138] Step S1102: Configure the color of the candidate interval labels according to the color configuration parameters to obtain the updated interval labels;

[0139] Step S1103: Perform label replacement processing on the candidate sliding components according to the updated interval labels to obtain the target sliding component.

[0140] In step S1101 of some embodiments, the style of the historical interval label is set to the style corresponding to the marker style information to obtain the candidate interval label after style change. It should be noted that by setting the style of the historical interval label to the same style as the sliding marker, the style of the nodes on the sliding interval of the sliding component can be unified, which makes it easier to determine the historical query time information through the historical interval label.

[0141] In step S1102 of some embodiments, the candidate interval labels are configured with colors to obtain updated interval labels, and the color of the updated interval labels is different from the color of the sliding markers, which facilitates the distinction between historical query intervals and the current query interval. It should be noted that, in this embodiment, the candidate interval labels are configured with colors according to the first color parameter to obtain updated interval labels with the same color as the historical query intervals.

[0142] In step S1103 of some embodiments, the historical interval label within the candidate sliding component is replaced with the updated interval label to obtain the target sliding component. Therefore, the target sliding component can not only display the current query interval and the historical query interval, but the labels of the historical query interval and the sliding markers on the current query interval have the same style but different colors.

[0143] Specifically, such as Figure 12 As shown, the original sliding component is as follows Figure 12 As shown in the sliding component above, the target sliding component is obtained by modifying the labels on the original sliding component according to the historical query range, color configuration parameters, and label style information, through range setting, color rendering, and label style modification. The target sliding component is as follows: Figure 12 The sliding component is shown below.

[0144] In steps S1101 to S1103 of this example, by setting the historical interval label to the same style as the sliding mark and setting the color of the historical interval label to be different from that of the sliding mark, the historical query interval is highlighted while the display of the historical query interval and the current query interval is unified, making it convenient to adjust the current query interval.

[0145] In step S206 of some embodiments, the original visualization chart is updated according to the target sliding component, that is, the original sliding component on the original visualization chart is replaced with the target sliding component to display the current query interval and the historical query interval. It should be noted that the sliding marker corresponding to the current query interval can be adjusted according to the user's operation to adjust the current query interval, but the interval label corresponding to the historical query interval cannot be adjusted, serving as an indicator of the current query interval so that the user can adjust the current query interval according to the interval label corresponding to the historical query interval.

[0146] For example, such as Figure 15 As shown, if a user sets the historical query time information on the target visualization chart to the period of their last query, and that period was 2010-2015, and they currently need to query policy data for 2013-2018 to compare the policy data for the 2010-2015 and 2013-2018 periods, displaying a label corresponding to the 2010-2015 period on the target visualization chart helps the user understand that they have already queried policy data for that period and currently only need to query policy data for the 2013-2018 period. Therefore, by displaying labels corresponding to historical query time information on the target visualization chart, users can clearly see the time periods of the policy data retrieved in the two queries, allowing them to quickly query or export policy data for both time periods for comparison and analysis.

[0147] This embodiment first obtains the current visualization chart of the report data, and the sliding component on the current visualization chart is the basic sliding component. The original sliding component is selected from the candidate sliding components. The original sliding component is a sliding component with label settings. Therefore, the basic sliding component on the current visualization chart is replaced with the original sliding component to obtain the original visualization chart. Then, the historical query time information is selected from the historical query time information in the user's historical query process, that is, it is determined which time period label needs to be added to the visualization chart. In order to construct a system where the label corresponding to the historical query time information has a different color but a unified style with the sliding mark of the current query interval, the historical query interval is first determined on the original sliding component based on the historical query time information, and the start and end points of the historical query interval are set as labels to obtain historical interval labels that match the historical query time information. At the same time, based on the historical interval labels, the historical query interval and non-historical query interval on the initial sliding component can be divided. The proportion of the historical query interval is calculated to obtain the historical interval proportion, and then the proportion of the non-historical query interval is calculated to obtain the non-historical interval proportion. Then, the color attribute parameters of the preset original cascading style sheet are configured according to the first color parameter, the second color parameter, the historical interval proportion, and the second historical interval proportion to obtain the target cascading style sheet. Therefore, by using the target Cascading Style Sheet, the color of the historical query interval on the initial sliding component can be set to be different from the color of the current query interval, while the color of the non-historical query interval can be set to be the same as the background color of the original visualization chart, thus obtaining candidate sliding components. Then, the style of the historical interval labels on the candidate sliding components is set to be the same as the style of the sliding markers, but the color is the same as the historical query interval color, thus obtaining the target sliding component. Specifically, the historical query interval on the target sliding component is displayed in gray, and the style of the historical interval labels is the same as the style of the sliding markers; the non-historical query intervals are displayed in white. Finally, the original sliding component on the original visualization chart is replaced with the target sliding component to update the visualization chart. This adds labels for the historical query intervals to the existing current query interval, allowing users to clearly perceive the time period between two consecutive data queries when they need to perform multiple data queries or exports, enabling them to quickly query or export report data.

[0148] Please see Figure 13 This application also provides a visualization chart updating device to implement the above-described visualization chart updating method. The device includes:

[0149] The data acquisition module 1301 is used to acquire the original visual charts of report data; the original visual charts are equipped with original sliding components with configuration labels, and the original sliding components are used to set sliding marks according to the current query range;

[0150] The label configuration module 1302 is used to obtain the historical query time information of the report data, and configure the labels of the original sliding component according to the historical query time information to obtain the initial sliding component;

[0151] Color configuration module 1303 is used to configure the color of the initial sliding component according to preset color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding components include historical interval labels;

[0152] The information acquisition module 1304 is used to acquire the marking style information of the current query range;

[0153] The label attribute configuration module 1305 is used to configure the label attributes of candidate sliding components according to the label style information, color configuration parameters and historical interval labels, so as to obtain the target sliding component.

[0154] The chart update module 1306 is used to update the original visualization chart based on the target sliding component to obtain the target visualization chart.

[0155] The specific implementation of this visualization chart updating device is basically the same as the specific embodiment of the visualization chart updating method described above, and will not be repeated here.

[0156] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described visualization chart update method. This electronic device can be any smart terminal, including tablet computers, in-vehicle computers, etc.

[0157] Please see Figure 14 , Figure 14 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes:

[0158] The processor 1401 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application.

[0159] The memory 1402 can be implemented as a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 1402 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 1402 and is called and executed by the processor 1401 using the visualization chart update method of the embodiments of this application.

[0160] The input / output interface 1403 is used to implement information input and output;

[0161] The communication interface 1404 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0162] Bus 1405 transmits information between various components of the device (e.g., processor 1401, memory 1402, input / output interface 1403, and communication interface 1404);

[0163] The processor 1401, memory 1402, input / output interface 1403 and communication interface 1404 are connected to each other within the device via bus 1405.

[0164] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described visualization chart update method.

[0165] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0166] The visualization chart updating method, apparatus, electronic device, and storage medium provided in this application embodiment set labels corresponding to historical query time information on the sliding component of the visualization chart, so that each time period selection can be based on the labels of historical query time information, without the need to manually record the historical selected time period, thereby assisting in data query or export operations for different time periods and improving the efficiency of data query or export for different time periods.

[0167] The embodiments described in this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0168] Those skilled in the art will understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of this application, and may include more or fewer steps than shown, or combine certain steps, or different steps.

[0169] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0170] Those skilled in the art will understand that all or some of the steps in the methods disclosed above, as well as the functional modules / units in the systems and devices, can be implemented as software, firmware, hardware, or suitable combinations thereof.

[0171] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0172] It should be understood that in this application, "at least one (item)" means one or more, and "more than" means two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent three cases: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one (item) of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one (item) of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0173] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of the units described above is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0174] The units described above as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0175] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0176] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes multiple instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0177] The preferred embodiments of the present application have been described above with reference to the accompanying drawings, but this does not limit the scope of the claims of the present application. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and substance of the embodiments of the present application shall be within the scope of the claims of the present application.

Claims

1. A method for updating a visual chart, characterized in that, The method includes: Obtain the raw visualization chart of the report data; wherein, the raw visualization chart is equipped with a raw sliding component with configuration labels, and the raw sliding component is used to set sliding marks according to the current query range; Obtain the historical query time information of the report data, and configure the labels of the original sliding component according to the historical query time information to obtain the initial sliding component; The initial sliding component is colored according to preset color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding component includes historical interval labels; Obtain the tagging style information of the current query interval; Based on the marker style information, the color configuration parameters, and the historical interval labels, the candidate sliding components are configured with label attributes to obtain the target sliding component; The original visualization chart is updated based on the target sliding component to obtain the target visualization chart; The step of configuring the color of the initial sliding component according to preset color configuration parameters to obtain candidate sliding components includes: The initial sliding component is divided into intervals to obtain historical query intervals and non-historical query intervals; wherein, the non-historical query intervals are the intervals on the initial sliding component other than the historical query intervals; The color attribute parameters of the preset original cascading style sheet are configured according to the color configuration parameters, the historical query range, and the non-historical query range to obtain the target cascading style sheet; wherein, the target cascading style sheet is used to set the colors of the historical query range and the non-historical query range; The candidate sliding component is obtained by color rendering of the initial sliding component using the target Cascading Style Sheet; The step of configuring label attributes for the candidate sliding component based on the label style information, the color configuration parameters, and the historical interval labels to obtain the target sliding component includes: The historical interval labels are styled according to the label style information to obtain candidate interval labels; The candidate interval labels are configured with colors according to the color configuration parameters to obtain updated interval labels; The candidate sliding component is labeled according to the updated interval label to obtain the target sliding component.

2. The method according to claim 1, characterized in that, The step of obtaining historical query time information of the report data and configuring labels for the original sliding component based on the historical query time information to obtain a preliminary sliding component includes: Obtain the historical query time information of the report data; Based on the historical query time information, a range is selected on the original sliding component to obtain the historical query range; wherein, the historical query range includes: the historical query start node and the historical query end node; Labels are set for the starting nodes of the historical queries to obtain the historical query starting point labels; Labels are set for the historical query termination nodes to obtain historical query endpoint labels; The initial sliding component is obtained by setting labels based on the historical query start point label and the historical query end point label.

3. The method according to claim 1, characterized in that, The color configuration parameters include: a first color parameter and a second color parameter, wherein the first color parameter is different from the color of the current query interval, and the second color parameter is the same as the background color of the original visualization chart; the step of configuring the color attribute parameters of the preset original cascading style sheet according to the color configuration parameters, the historical query interval, and the non-historical query interval to obtain the target cascading style sheet includes: The historical query interval is used to calculate the interval percentage, thus obtaining the historical interval percentage; The proportion of non-historical query intervals is calculated to obtain the proportion of non-historical intervals; The target cascading style sheet is obtained by configuring the color attribute parameters of the original cascading style sheet based on the first color parameter, the second color parameter, the historical interval ratio, and the non-historical interval ratio.

4. The method according to any one of claims 1 to 3, characterized in that, The original visualization charts for obtaining report data include: Get the current visualization chart of the report data; The original sliding component is selected from the preset candidate sliding components; The original visualization chart is obtained by configuring the components of the current visualization chart based on the original sliding component.

5. The method according to claim 2, characterized in that, The step of obtaining the historical query time information of the report data includes: Obtain historical query period information and time selection instructions for the report data; The historical query time information is obtained by selecting a time period according to the time selection instruction.

6. A visual chart updating device, characterized in that, The device includes: The data acquisition module is used to acquire the original visual charts of report data; wherein, the original visual charts are equipped with original sliding components with configuration labels, and the original sliding components are used to set sliding marks according to the current query range; The label configuration module is used to obtain the historical query time information of the report data, and configure the labels of the original sliding component according to the historical query time information to obtain the initial sliding component; The color configuration module is used to configure the color of the initial sliding component according to preset color configuration parameters to obtain candidate sliding components; wherein, the candidate sliding component includes a historical interval label; The information acquisition module is used to acquire the marking style information of the current query interval; The label attribute configuration module is used to configure the label attributes of the candidate sliding component according to the label style information, the color configuration parameters and the historical interval label, so as to obtain the target sliding component; The chart update module is used to update the original visualization chart according to the target sliding component to obtain the target visualization chart; The step of configuring the color of the initial sliding component according to preset color configuration parameters to obtain candidate sliding components includes: The initial sliding component is divided into intervals to obtain historical query intervals and non-historical query intervals; wherein, the non-historical query intervals are the intervals on the initial sliding component other than the historical query intervals; The color attribute parameters of the preset original cascading style sheet are configured according to the color configuration parameters, the historical query range, and the non-historical query range to obtain the target cascading style sheet; wherein, the target cascading style sheet is used to set the colors of the historical query range and the non-historical query range; The candidate sliding component is obtained by color rendering of the initial sliding component using the target Cascading Style Sheet; The step of configuring label attributes for the candidate sliding component based on the label style information, the color configuration parameters, and the historical interval labels to obtain the target sliding component includes: The historical interval labels are styled according to the label style information to obtain candidate interval labels; The candidate interval labels are configured with colors according to the color configuration parameters to obtain updated interval labels; The candidate sliding component is labeled according to the updated interval label to obtain the target sliding component.

7. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the visualization chart update method according to any one of claims 1 to 5.

8. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the visualization chart update method according to any one of claims 1 to 5.

Images