Chart dynamic effect configuration method and device, equipment and storage medium

Abstract

The invention discloses a chart dynamic effect configuration method and device, equipment and a storage medium, and relates to the technical field of data processing. The method comprises the steps of determining a candidate block-level container according to a chart visualization area of a target interface based on a data visualization chart library, and initializing a to-be-configured chart in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; based on the data visualization chart library, according to the to-be-configured chart, determining a target annular chart and chart configuration data of the target annular chart; and based on the cascading style sheet, configuring a dynamic effect for the target annular chart according to the chart configuration data to obtain a target block-level container. According to the technical scheme, the annular chart is generated through the data visualization chart library, the dynamic effect is configured through the cascading style sheet position annular chart, and the efficiency and the reliability of chart dynamic effect configuration can be effectively improved through combined use of the annular chart and the dynamic effect.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of computer technology, in particular to the field of data processing technology, and specifically to a method, device, equipment and storage medium for configuring a chart animation effect. Background Art

[0002] When building a large visualization screen, if you need to achieve a flying line effect that moves along a specific path, you can use Echarts (Enterprise Charts, data visualization charts) to generate a specified chart; but the use of Echaets is relatively limited, and can only achieve point-to-point flying line effects, and cannot set flying line effects for visualization graphics such as smooth line charts, map borders, and pie charts.

[0003] To solve this problem, the existing technology usually uses Canvas (Canvas Element) in combination with Echarts to realize chart animation configuration; although more complex animation configuration is realized, Canvas has high requirements on code, syntax, machine performance, etc., and its efficiency is low when processing simple animations. Summary of the invention

[0004] The present application provides a method, device, equipment and storage medium for configuring chart dynamic effects to improve the efficiency and reliability of chart dynamic effects configuration.

[0005] According to one aspect of the present application, a method for configuring a chart animation is provided, the method comprising:

[0006] Based on the data visualization chart library, according to the chart visualization area of ​​the target interface, a candidate block-level container is determined, and the chart to be configured is initialized in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language;

[0007] Based on the data visualization chart library, and according to the chart to be configured, determining a target ring chart and chart configuration data of the target ring chart;

[0008] Based on the cascading style sheet and according to the chart configuration data, a dynamic effect is configured for the target annular chart to obtain a target block-level container.

[0009] According to another aspect of the present application, a device for configuring a chart animation is provided, the device comprising:

[0010] A container determination module is used to determine a candidate block-level container based on a data visualization chart library and a chart visualization area of ​​a target interface, and initialize a chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language;

[0011] A chart determination module, configured to determine a target annular chart and chart configuration data of the target annular chart based on the data visualization chart library and the chart to be configured;

[0012] The dynamic effect configuration module is used to configure the dynamic effect for the target annular chart based on the cascading style sheet and according to the chart configuration data to obtain a target block-level container.

[0013] According to another aspect of the present application, an electronic device is provided, the electronic device comprising:

[0014] one or more processors;

[0015] A memory for storing one or more programs;

[0016] When the one or more programs are executed by the one or more processors, the one or more processors implement any one of the chart animation configuration methods provided in the embodiments of the present application.

[0017] According to another aspect of the present application, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, any one of the chart animation configuration methods provided in the embodiments of the present application is implemented.

[0018] According to another aspect of the present application, a computer program product is provided, including a computer program, and when the computer program is executed by a processor, the computer program implements any one of the chart animation configuration methods provided in the embodiments of the present application.

[0019] This application determines the candidate block-level container based on the chart visualization area of ​​the target interface based on the data visualization chart library, and initializes the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; based on the data visualization chart library, the target ring chart and the chart configuration data of the target ring chart are determined according to the chart to be configured; based on the cascading style sheet, the target ring chart is configured with dynamic effects according to the chart configuration data to obtain the target block-level container. The above technical scheme generates a ring chart through the data visualization chart library, and configures dynamic effects for the ring chart through the cascading style sheet. The combined use of the two can effectively improve the efficiency and reliability of the configuration of chart dynamic effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1It is a flowchart of a method for configuring a chart dynamic effect according to the first embodiment of the present application;

[0021] Figure 2 It is a flowchart of a method for configuring a chart dynamic effect according to the second embodiment of the present application;

[0022] Figure 3 It is a structural schematic diagram of a chart dynamic effect configuration device provided according to the third embodiment of the present application;

[0023] Figure 4 It is a structural schematic diagram of an electronic device that implements the method for configuring chart dynamic effects according to an embodiment of the present application. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] In addition, it should be noted that in the technical solution of this application, the collection, storage, use, processing, transmission, provision and disclosure of relevant data such as chart visualization areas and candidate block-level containers are in compliance with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0027] Embodiment 1

[0028] Figure 1This is a flowchart of a method for configuring a chart dynamic effect according to the first embodiment of the present application. This embodiment is applicable to generating a ring chart and drawing dynamic effects for the ring chart. It can be executed by a chart dynamic effect configuration device. The chart dynamic effect configuration device can be implemented in the form of hardware and / or software. The chart dynamic effect configuration device can be configured in a computer device, such as a server. Figure 1 As shown, the method includes:

[0029] S110, based on the data visualization chart library, according to the chart visualization area of ​​the target interface, determine the candidate block-level container, and initialize the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language.

[0030] In this embodiment, the data visualization gallery table refers to a tool or library for displaying visualization charts of data; the data visualization gallery table of this application specifically refers to Echarts. The chart visualization area of ​​the target interface refers to the area in the target web page or application used to display chart data; it is usually an area of ​​HTML (HyperText Markup Language) elements. A candidate block-level container refers to an HTML element container that can carry a chart. It is usually a block-level element, and these elements occupy an entire row by default in the layout. Block-level tag elements refer to elements that occupy the entire line width in HTML, and these elements usually generate a new row in the web page layout. A chart to be configured refers to a chart that has not yet been set up before the chart is initialized; this chart will contain the structure and data of the chart, but its detailed configuration (such as style, color, animation, etc.) has not yet been fully defined.

[0031] Optionally, the candidate block-level container may be determined by, based on a data visualization chart library, determining container configuration data according to a chart visualization area of ​​a target interface; wherein the container configuration data includes a width ratio and a height ratio of the candidate block-level container in the chart visualization area; and based on the data visualization chart library, determining the candidate block-level container according to the container configuration data.

[0032] In this embodiment, container configuration data refers to data related to defining and configuring the appearance, layout, size, etc. of the chart container; it includes configurations such as the width and height ratio of the chart container in the target interface, which are used to determine the display effect of the chart in the target area; for example, the width ratio of a chart container may be 50% of the page width, and the height ratio may be 30% of the page height. The width ratio and height ratio of the chart visualization area refer to the proportion of the chart container in the target interface, usually expressed as a percentage; the width ratio refers to the percentage of the page width occupied by the chart container in the horizontal direction, and the height ratio refers to the percentage of the page height occupied by the chart container in the vertical direction; for example, a width ratio of 50% means that the container width occupies half of the page width, and similarly, a height ratio of 30% means that the container height occupies 30% of the page height.

[0033] Exemplarily, the width and height of the candidate block-level container are set to 100% and 100% of the visualization area, respectively, so that the candidate block-level container can change following the dragging of the target interface.

[0034] Optionally, the chart to be configured may be initialized in the candidate block-level container based on an initialization function of a data visualization chart library.

[0035] S120 . Based on the data visualization chart library and the chart to be configured, determine the target ring chart and the chart configuration data of the target ring chart.

[0036] In this embodiment, the target ring chart refers to a common data visualization form generated based on the chart to be configured, which is usually used to represent the proportion of each part to the total. Chart configuration data refers to all settings that control the appearance, behavior, and interaction of the chart; these configurations include the type of chart (such as ring chart, line chart, bar chart, etc.), color, coordinate axis, data, title, tooltip, etc.; configuration data is usually stored in JSON format.

[0037] Optionally, based on the chart configuration function of the data visualization chart library, the chart to be configured is configured according to the needs of the user to obtain the target ring chart and the chart configuration data of the target ring chart.

[0038] In this embodiment, the chart configuration function refers to a programming function used to create and customize a chart; it usually receives data provided by the user and some configuration parameters (such as chart type, color, label, size, etc.), and generates corresponding chart configuration objects; these configuration objects are then passed to the chart library for rendering the chart. User requirements refer to the specific requirements of users or developers for chart display; based on these requirements, the chart configuration function generates corresponding configuration data.

[0039] Exemplarily, the configuration items and data of the target ring chart are set through the chart configuration function of the data visualization chart library to render the configured chart to obtain the target ring chart, and the configuration items and data of the target ring chart are recorded to obtain the chart configuration data of the target ring chart.

[0040] S130 . Based on the cascading style sheet and according to the chart configuration data, configure a dynamic effect for the target ring chart to obtain a target block-level container.

[0041] In this embodiment, Cascading Style Sheets (CSS) refers to a style language used to control web page layout and visual display; CSS defines the appearance style of web page elements, including color, font, layout, size, etc.; in the configuration of charts, CSS can be used to set the style of charts, such as width, height, background color, dynamic effects, etc.; it should be noted that the Cascading Style Sheets in this application specifically refer to Cascading Style Sheets Level 3 (CSS3). Dynamic effects refer to the animation effects produced by charts during presentation or interaction; the dynamic effects of charts can be used to enhance user experience, such as gradient effects when charts are loaded, dynamic transitions when data changes, etc.; dynamic effects are usually achieved through CSS animations or dynamic effect configurations provided by the chart library. The target block-level container refers to the block-level HTML element that actually contains and displays the chart; when the chart is embedded in the page, it will serve as the parent container of the chart; this container will include the visual styles such as the dynamic effect configuration, size, margins, etc. of the chart, and will eventually be presented to the user.

[0042] Exemplarily, by introducing a CSS file and taking the chart configuration data as a reference, various visual effects are created for the target ring chart to obtain a target block-level container.

[0043] The embodiment of the present application determines the candidate block-level container based on the chart visualization area of ​​the target interface based on the data visualization chart library, and initializes the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; based on the data visualization chart library, the target ring chart and the chart configuration data of the target ring chart are determined according to the chart to be configured; based on the cascading style sheet, the target ring chart is configured with dynamic effects according to the chart configuration data to obtain the target block-level container. The above technical scheme generates a ring chart through the data visualization chart library, and configures dynamic effects for the ring chart through the cascading style sheet. The combined use of the two can effectively improve the efficiency and reliability of the configuration of chart dynamic effects.

[0044] Embodiment 2

[0045] Figure 2It is a flow chart of a method for configuring chart dynamic effects provided in accordance with the second embodiment of the present application. Based on the technical solutions of the above embodiments, this embodiment refines "based on the cascading style sheet, according to the chart configuration data, configure dynamic effects for the target ring chart to obtain the target block-level container" into "based on the cascading style sheet, according to the chart configuration data, determine the pseudo-element configuration data; based on the custom function in the cascading style sheet, according to the pseudo-element configuration data, generate candidate pseudo-elements in the candidate block-level container, and use the candidate pseudo-elements to configure dynamic effects for the target ring chart to obtain the target block-level container". It should be noted that for the parts not described in detail in the embodiments of the present application, please refer to the relevant statements of other embodiments. Figure 2 As shown, the method includes:

[0046] S210, based on the data visualization chart library, according to the chart visualization area of ​​the target interface, determine the candidate block-level container, and initialize the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language.

[0047] S220. Based on the data visualization chart library and the chart to be configured, determine the target ring chart and the chart configuration data of the target ring chart.

[0048] S230 . Determine pseudo-element configuration data based on the cascading style sheet and the chart configuration data.

[0049] In this embodiment, the pseudo-element configuration data refers to the style and positioning parameters related to the CSS pseudo-elements; the pseudo-elements are usually used to create virtual elements in a page that do not actually exist in the DOM (Document Object Model) structure.

[0050] Optionally, the chart configuration data includes the center position of the chart circle, the width and height of the chart visualization area; the pseudo-element configuration data includes the center position of the pseudo-element circle and the rotation radius of the pseudo-element.

[0051] In this embodiment, the center position of the chart refers to the geometric center position of the chart. For a donut chart, this position is the reference point for all graphic data, and all chart content (such as sectors) are laid out and rotated relative to this position; in a donut chart, the center position usually determines the overall alignment and layout of the chart. The center position of the pseudo-element refers to the center position of the pseudo-element in the target area, which is usually aligned with the center position of the chart to ensure the alignment of the pseudo-element with the chart. The pseudo-element rotation radius refers to the rotation radius of the pseudo-element relative to its center position; this radius determines the range of rotation of the pseudo-element around the center; it can be used in a donut chart to define the radius range of chart components (such as sectors or animation effects), thereby affecting the appearance and movement trajectory of the pseudo-element.

[0052] Furthermore, the center position of the chart is used as the center position of the pseudo-element; based on the cascading style sheet, the width and height of the chart visualization area are used as boundaries, and the pseudo-element rotation radius is determined according to user requirements.

[0053] S240 , based on the custom function in the cascading style sheet and according to the pseudo-element configuration data, generate a candidate pseudo-element in the candidate block-level container, and use the candidate pseudo-element to configure a dynamic effect for the target ring chart to obtain a target block-level container.

[0054] In this embodiment, the custom function refers to a function in the cascading style sheet that allows developers to define complex style changes or animation effects; it can be used to define animation effects or dynamic effects of pseudo-elements to help achieve dynamic display of ring charts (such as rotation, transformation, etc.). The target ring chart configuration dynamic effect refers to the visual effect or animation applied to the ring chart, usually including rotation, scaling, color change, gradient and other dynamic effects of chart elements.

[0055] Optionally, the candidate pseudo-element is used to configure the animation for the target ring chart. The candidate pseudo-element is used to insert a virtual element into the target ring chart. The virtual element is used to create various visual effects without the need for additional HTML tags.

[0056] Optionally, you can configure animation for the target ring chart by setting the style and dynamic rotation of the pseudo element.

[0057] Exemplarily, the width and height of the pseudo-element are set to a dynamic value; the upper and lower borders of the pseudo-element are set to be green solid lines, and the borders are rounded by 50% to present a circular border; a rotation animation is added to the circular border, with an angle from 0 degrees to 360 degrees, a duration of 2 seconds, and an infinite loop.

[0058] In an optional implementation, after configuring the target ring chart with dynamic effects according to the chart configuration data and obtaining the target block-level container, the target block-level container is detected in real time, and when it is identified that the chart configuration data has changed, the current configuration data of the chart configuration data is obtained; and the pseudo-element configuration data of the pseudo-element is adjusted according to the current configuration data.

[0059] In this embodiment, timed detection refers to dynamically monitoring changes in chart configuration data and adjusting the chart according to the changes. In this scenario, real-time detection can monitor changes in configuration data (such as chart size, style, or data updates) through JavaScript. Once a change occurs, the system will immediately adjust the pseudo-element configuration data and animation to ensure that the visual effects of the chart and pseudo-element remain consistent. Current configuration data refers to the latest configuration data obtained by the system in real time when the chart configuration changes; this data reflects the actual state of the chart, including size, position, style, etc.; through the current configuration data, developers can adjust the pseudo-element configuration to adapt to the new configuration of the chart.

[0060] The embodiment of the present application determines the candidate block-level container based on the chart visualization area of ​​the target interface based on the data visualization chart library, and initializes the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; based on the data visualization chart library, the target ring chart and the chart configuration data of the target ring chart are determined according to the chart to be configured; based on the cascading style sheet, the pseudo-element configuration data is determined according to the chart configuration data; based on the custom function in the cascading style sheet, the candidate pseudo-elements are generated in the candidate block-level container according to the pseudo-element configuration data, and the candidate pseudo-elements are used to configure the dynamic effects for the target ring chart to obtain the target block-level container. The above technical scheme generates a ring chart through the data visualization chart library, and configures the dynamic effects for the ring chart through the cascading style sheet. The combined use of the two can effectively improve the efficiency and reliability of the configuration of the chart dynamic effects.

[0061] Embodiment 3

[0062] Figure 3 This is a schematic diagram of a diagram dynamic effect configuration device according to the third embodiment of the present application, which can be applied to generating a ring diagram and drawing dynamic effects for the ring diagram. The diagram dynamic effect configuration device can be implemented in the form of hardware and / or software, and the diagram dynamic effect configuration device can be configured in a computer device, such as a server. Figure 3 As shown, the device comprises:

[0063] The container determination module 310 is used to determine a candidate block-level container based on the data visualization chart library and the chart visualization area of ​​the target interface, and initialize the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language;

[0064] A chart determination module 320, for determining a target ring chart and chart configuration data of the target ring chart based on the data visualization chart library and the chart to be configured;

[0065] The dynamic effect configuration module 330 is used to configure dynamic effects for the target ring chart based on the cascading style sheet and according to the chart configuration data to obtain a target block-level container.

[0066] The embodiment of the present application determines the candidate block-level container based on the chart visualization area of ​​the target interface based on the data visualization chart library, and initializes the chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; based on the data visualization chart library, the target ring chart and the chart configuration data of the target ring chart are determined according to the chart to be configured; based on the cascading style sheet, the target ring chart is configured with dynamic effects according to the chart configuration data to obtain the target block-level container. The above technical scheme generates a ring chart through the data visualization chart library, and configures dynamic effects for the ring chart through the cascading style sheet. The combined use of the two can effectively improve the efficiency and reliability of the configuration of chart dynamic effects.

[0067] Optionally, the motion effect configuration module 330 includes:

[0068] A configuration data determination unit, configured to determine pseudo-element configuration data according to the chart configuration data based on the cascading style sheet;

[0069] The dynamic effect configuration unit is used to generate candidate pseudo-elements in the candidate block-level container based on the custom function in the cascading style sheet and the pseudo-element configuration data, and use the candidate pseudo-elements to configure dynamic effects for the target ring chart to obtain the target block-level container.

[0070] Optionally, the chart configuration data includes the center position of the chart, the width and height of the chart visualization area; the pseudo-element configuration data includes the center position of the pseudo-element and the rotation radius of the pseudo-element; accordingly, the configuration data determination unit is specifically used to:

[0071] Use the center of the chart as the center of the pseudo element;

[0072] Based on the cascading style sheet, the width and height of the chart visualization area are used as the limit, and the pseudo-element rotation radius is determined according to the user's needs.

[0073] Optionally, the device further includes a configuration data updating module; the configuration data updating module is used to:

[0074] After configuring the dynamic effect for the target ring chart according to the chart configuration data and obtaining the target block-level container, the target block-level container is detected in real time, and when it is recognized that the chart configuration data has changed, the current configuration data of the chart configuration data is obtained;

[0075] Adjust the pseudo-element configuration data of the pseudo-element according to the current configuration data.

[0076] Optionally, the container determination module 310 is specifically configured to:

[0077] Based on the data visualization chart library, the container configuration data is determined according to the chart visualization area of ​​the target interface; wherein the container configuration data includes the width ratio and height ratio of the candidate block-level container in the chart visualization area;

[0078] Based on the data visualization chart library, candidate block-level containers are determined according to the container configuration data.

[0079] Optionally, the chart determination module 320 is specifically configured to:

[0080] Based on the chart configuration function of the data visualization chart library, the chart to be configured is configured according to the needs of the user, and the chart configuration data of the target ring chart and the target ring chart are obtained.

[0081] The chart dynamic effect configuration device provided in the embodiment of the present application can execute the chart dynamic effect configuration method provided in any embodiment of the present application, and has the corresponding functional modules and beneficial effects for executing each chart dynamic effect configuration method.

[0082] According to an embodiment of the present application, the present application also provides an electronic device, a readable storage medium and a computer program product.

[0083] Embodiment 4

[0084] Figure 4 4 is a schematic diagram of the structure of an electronic device 410 that implements the method for configuring the dynamic effects of a chart in an embodiment of the present application. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workbenches, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices (such as helmets, glasses, watches, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present application described and / or required herein.

[0085] like Figure 4As shown, the electronic device 410 includes at least one processor 411, and a memory connected to the at least one processor 411 in communication, such as a read-only memory (ROM) 412, a random access memory (RAM) 413, etc., wherein the memory stores a computer program that can be executed by at least one processor, and the processor 411 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 412 or the computer program loaded from the storage unit 418 to the random access memory (RAM) 413. In RAM413, various programs and data required for the operation of the electronic device 410 can also be stored. The processor 411, ROM412 and RAM413 are connected to each other via a bus 414. An input / output (I / O) interface 415 is also connected to the bus 414.

[0086] Multiple components in the electronic device 410 are connected to the I / O interface 415, including: an input unit 416, such as a keyboard, a mouse, etc.; an output unit 417, such as various types of displays, speakers, etc.; a storage unit 418, such as a disk, an optical disk, etc.; and a communication unit 419, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 419 allows the electronic device 410 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0087] Processor 411 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of processor 411 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. Processor 411 executes the various methods and processes described above, such as a method for configuring a chart animation effect.

[0088] In some embodiments, the chart animation configuration method may be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as a storage unit 418. In some embodiments, part or all of the computer program may be loaded and / or installed on the electronic device 410 via the ROM 412 and / or the communication unit 419. When the computer program is loaded into the RAM 413 and executed by the processor 411, one or more steps of the chart animation configuration method described above may be performed. Alternatively, in other embodiments, the processor 411 may be configured as a chart animation configuration method in any other appropriate manner (e.g., by means of firmware).

[0089] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0090] The computer programs for implementing the methods of the present application may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable graphic animation configuration device, so that when the computer program is executed by the processor, the functions / operations specified in the flow chart and / or block diagram are implemented. The computer program may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0091] In the context of the present application, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, device, or equipment. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or equipment, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0092] To provide interaction with a user, the systems and techniques described herein may be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or trackball) through which the user can provide input to the electronic device. Other types of devices may also be used to provide interaction with the user; for example, the feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form (including acoustic input, voice input, or tactile input).

[0093] The systems and techniques described herein may be implemented in a computing system that includes backend components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes frontend components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0094] A computing system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The client and server relationship is generated by computer programs running on the corresponding computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system to solve the defects of difficult management and weak business scalability in traditional physical hosts and VPS services.

[0095] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this application can be executed in parallel, sequentially or in different orders, as long as the expected results of the technical solution of this application can be achieved, and this document is not limited here.

[0096] The above specific implementations do not constitute a limitation on the protection scope of this application. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of this application should be included in the protection scope of this application.

Claims

1. A method for configuring a chart dynamic effect, characterized in that: include: Based on the data visualization chart library, according to the chart visualization area of ​​the target interface, a candidate block-level container is determined, and the chart to be configured is initialized in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; Based on the data visualization chart library, and according to the chart to be configured, determining a target ring chart and chart configuration data of the target ring chart; Based on the cascading style sheet and according to the chart configuration data, a dynamic effect is configured for the target annular chart to obtain a target block-level container.

2. The method according to claim 1, characterized in that: The method of configuring the target annular chart with dynamic effects based on the cascading style sheet and according to the chart configuration data to obtain the target block-level container includes: Based on the cascading style sheet, determining pseudo-element configuration data according to the chart configuration data; Based on the custom function in the cascading style sheet and according to the pseudo-element configuration data, a candidate pseudo-element is generated in the candidate block-level container, and the candidate pseudo-element is used to configure the animation for the target annular chart to obtain the target block-level container.

3. The method according to claim 2, characterized in that The chart configuration data includes the center position of the chart, the width and height of the visualization area of ​​the chart; the pseudo-element configuration data includes the center position of the pseudo-element and the rotation radius of the pseudo-element; accordingly, the determining of the pseudo-element configuration data based on the chart configuration data based on the cascading style sheet includes: Using the center position of the chart as the center position of the pseudo element; Based on the cascading style sheet, the rotation radius of the pseudo-element is determined according to the user's requirements with the width and height of the chart visualization area as the limit.

4. The method according to claim 2, characterized in that: After configuring the target annular chart with dynamic effects according to the chart configuration data and obtaining the target block-level container, the method further includes: Performing real-time detection on the target block-level container, and obtaining current configuration data of the chart configuration data when identifying that the chart configuration data has changed; The pseudo-element configuration data of the pseudo-element is adjusted according to the current configuration data.

5. The method according to claim 1, characterized in that Based on the data visualization chart library and the chart visualization area of ​​the target interface, candidate block-level containers are determined, including: Based on the data visualization chart library, the container configuration data is determined according to the chart visualization area of ​​the target interface; wherein the container configuration data includes the width ratio and height ratio of the candidate block-level container in the chart visualization area; Based on the data visualization chart library and according to the container configuration data, a candidate block-level container is determined.

6. The method according to claim 1, characterized in that The step of determining a target ring chart and chart configuration data of the target ring chart based on the data visualization chart library and according to the chart to be configured includes: Based on the chart configuration function of the data visualization chart library, the chart to be configured is configured according to the user's requirements to obtain a target ring chart and chart configuration data of the target ring chart.

7. A chart dynamic effect configuration device, characterized in that: include: A container determination module is used to determine a candidate block-level container based on a data visualization chart library and a chart visualization area of ​​a target interface, and initialize a chart to be configured in the candidate block-level container; wherein the candidate block-level container is a block-level tag element of a hypertext markup language; A chart determination module, configured to determine a target annular chart and chart configuration data of the target annular chart based on the data visualization chart library and the chart to be configured; The dynamic effect configuration module is used to configure the dynamic effect for the target annular chart based on the cascading style sheet and according to the chart configuration data to obtain a target block-level container.

8. An electronic device, characterized in that: include: one or more processors; A memory for storing one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the chart animation configuration method as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method for configuring chart dynamic effects as described in any one of claims 1 to 6 is implemented.

10. A computer program product, comprising a computer program, wherein when the computer program is executed by a processor, the computer program implements the method for configuring a chart animation according to any one of claims 1 to 6.

Images