Data large-screen adaptation method and device, equipment, storage medium and program product

Abstract

The invention discloses a data large screen adaptation method and device, equipment, a storage medium and a program product, and is applied to a data visualization platform, the method comprises the following steps: obtaining block-level elements in a data large screen page, an original width and an original height of each block-level element, a preset edge distance in a width direction and a preset reference width; calculating a difference value between the preset reference width and the preset edge distance to obtain an element width; calculating the ratio of the element width to the original width to obtain a first scaling; for each block-level element, calculating to obtain an element height corresponding to the block-level element according to the original height and the first scaling of the block-level element; according to the element width and the element height corresponding to the block-level elements, arranging each block-level element in the height direction to generate a style file; and sending the style file to the mobile terminal equipment, so that the mobile terminal equipment displays the style file in the visual area. In this way, the style files adaptive to different mobile terminal devices can be generated, and therefore the cost is reduced.

Description

Technical Field

[0001] This application belongs to the field of data visualization technology, and in particular relates to a method, apparatus, device, storage medium and program product for data screen adaptation. Background Technology

[0002] Data visualization platforms can integrate large amounts of data into intuitive and easy-to-understand charts or graphs. Currently, data visualization platforms are typically displayed in the form of large data dashboards, which are mainly used in scenarios such as exhibition halls, dispatch centers, and monitoring centers.

[0003] With the development of drones and robots, operators can efficiently control them using mobile devices. Therefore, migrating large data screens from PCs to mobile devices facilitates timely monitoring and operation of drones and robots.

[0004] However, existing solutions for adapting data dashboards to mobile devices require the pre-development of multiple page layouts to accommodate the page structures of different mobile devices, resulting in high development costs. Summary of the Invention

[0005] This application provides a method, apparatus, device, storage medium, and program product for adapting to large data screens, which can reduce development costs.

[0006] In a first aspect, embodiments of this application provide a method for adapting data dashboards, applied to a data visualization platform, the method comprising: Obtain the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset base width; Calculate the difference between the preset baseline width and the preset margin to obtain the element width; For each block-level element, the ratio of the element width to the original width is calculated to obtain a first scaling ratio; For each block-level element, the element height corresponding to the block-level element is calculated according to the original height of the block-level element and the first scaling ratio; Arrange each block-level element along its height according to its width and height, and generate a style file. The style file is sent to the mobile device so that the mobile device can display the style file in the visible area.

[0007] In one possible implementation, obtaining the block-level elements in the data dashboard page includes: Obtain the preset attribute values ​​of each block-level element in the data dashboard page; The block-level element is determined based on the preset attribute value.

[0008] In one possible implementation, calculating the element height corresponding to the block-level element based on the original height of the block-level element and the first scaling ratio includes: If the block-level element includes child elements, obtain the original height of the child elements; Sum the original heights of all child elements except the one with the highest original height to obtain the first sum value; Calculate the sum of the first sum and the original height of the block-level element to obtain the second sum; Calculate the product of the second sum and the first scaling factor to obtain the element height corresponding to the block-level element.

[0009] In one possible implementation, the step of arranging each block-level element along its height according to its width and height, and generating a style file, includes: Add each of the block-level elements to the preset vertical page in the order of each block-level element; For each block-level element, calculate the sum of the element height, preset element spacing, and title reserved spacing of the added block-level elements in the preset vertical page to obtain a third sum. For each block-level element, the product of the third sum and the first scaling ratio is calculated to obtain the first distance of the block-level element from the preset vertical page top edge; For each block-level element, if the block-level element includes child elements, each child element is added to the block-level element region in the order of the child elements. For each child element in the block-level element, calculate the sum of the element height of the added child elements in the block-level element region and the preset element spacing to obtain the fourth sum. Calculate the product of the fourth sum and the first scaling factor to obtain the second distance between the child element and the upper boundary of the block-level element region, and generate the style file.

[0010] In one possible implementation, calculating the element height corresponding to the block-level element based on the original height of the block-level element and the first scaling ratio includes: If the block-level element does not include child elements, the element height of the block-level element is obtained by multiplying its original height by the first scaling factor.

[0011] In one possible implementation, sending the style file to the mobile device includes: Receive loading requests sent by terminal devices; In response to the loading request, verify the device type of the terminal device; If the terminal device is determined to be the mobile device, the visible area parameters of the mobile device are obtained; Based on the visible area parameters and the style file, a page interaction logic file is generated. The page interaction logic file is used to instruct the mobile device to display the style file by scrolling the page. The style file and the page interaction logic file are sent to the mobile device.

[0012] Secondly, embodiments of this application provide a data dashboard adaptation device applied to a data visualization platform, the device comprising: The acquisition module is used to acquire the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset base width. The calculation module is used to calculate the difference between the preset baseline width and the preset left and right margins to obtain the element width; The calculation module is used to calculate the ratio of the element width to the original width for each block-level element to obtain a first scaling ratio; The calculation module is used to calculate the element height corresponding to each block-level element according to the original height of the block-level element and the first scaling ratio. The generation module is used to arrange each block-level element in the height direction according to the element width and element height corresponding to each block-level element, and generate a style file; The sending module is used to send the style file to the mobile device so that the mobile device can display the style file in the visible area.

[0013] Thirdly, embodiments of this application provide an electronic device, the device including: a processor and a memory storing computer program instructions; The method for data screen adaptation, as described in the first aspect, is implemented when the processor executes computer program instructions.

[0014] Fourthly, embodiments of this application provide a computer storage medium on which computer program instructions are stored, and when the computer program instructions are executed by a processor, the data screen adaptation method of the first aspect is implemented.

[0015] Fifthly, embodiments of this application provide a computer program product in which instructions, when executed by the processor of an electronic device, cause the electronic device to perform the data screen adaptation method as described in the first aspect.

[0016] This application discloses a method, apparatus, device, storage medium, and program product for adapting data dashboards. The data visualization platform extracts block-level elements from the data dashboard page, along with the original height and width of each block-level element. Then, it calculates the difference between a preset baseline width and a preset margin on that width to determine the element width of each block-level element, scaling each element to the same width. A first scaling ratio is calculated using the element width and the original width to determine the scaling ratio of each block-level element. Furthermore, the element height of each block-level element is calculated using the scaling ratio and the original height, thus scaling the height of the block-level elements. In this way, the block-level elements are arranged vertically according to their calculated width and height, resulting in a multi-row, column-based page layout that is more suitable for mobile device displays. When a mobile device loads data dashboard data, the data visualization platform sends a style file for the vertically arranged page layout to the mobile device, allowing the mobile device to display the vertically arranged page layout in its visible area. In this way, style files can be adapted to different mobile devices, eliminating the need to pre-develop multiple page layouts adapted to different mobile devices, thereby reducing development costs. Attached Figure Description

[0017] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 This is a flowchart illustrating a method for adapting data to a large screen, as provided in an embodiment of this application. Figure 2a This is an exemplary schematic diagram of a PC-based data dashboard provided in an embodiment of this application; Figure 2b This is an exemplary schematic diagram of another PC-based data dashboard provided in an embodiment of this application; Figure 2c This is an exemplary schematic diagram of another PC-based data dashboard provided in the embodiments of this application; Figure 3 This is an exemplary schematic diagram of a mobile device data screen provided in an embodiment of this application; Figure 4 This is a flowchart illustrating a method for generating a style file according to an embodiment of this application; Figure 5a This is an exemplary schematic diagram of a block-level element containing child elements provided in an embodiment of this application; Figure 5b This is a schematic diagram illustrating the effect of vertically arranging sub-elements according to an embodiment of this application; Figure 6 This is an exemplary schematic diagram of a style file generation method provided in an embodiment of this application; Figure 7 This is provided by the embodiments of this application. Figure 1 A flowchart illustrating the specific implementation of S106 in the diagram; Figure 8 This is a schematic diagram illustrating the effect of a navigation menu provided in an embodiment of this application; Figure 9 This is an exemplary schematic diagram of a data screen adaptation method provided in an embodiment of this application; Figure 10 This is a schematic diagram of the structure of a data screen adaptation device provided in an embodiment of this application; Figure 11 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0019] The features and exemplary embodiments of various aspects of this application will be described in detail below. To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain this application and not to limit it. For those skilled in the art, this application can be implemented without some of these specific details. The following description of the embodiments is merely to provide a better understanding of this application by illustrating examples.

[0020] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising..." does not exclude the presence of additional identical elements in the process, method, article, or apparatus that includes the element.

[0021] Currently, there are three main ways to adapt PC-based data dashboards to mobile devices: The first approach involves configuring different pages for different mobile devices. Once it's determined that a mobile device is loading data, the data visualization platform retrieves the corresponding page for that mobile device and sends it to the device.

[0022] However, in the first approach, when data is updated, it requires double the cost of simultaneously modifying both the PC-based and mobile-based data dashboards, resulting in low efficiency and high development and maintenance costs.

[0023] The second method involves dynamically adjusting the elements in the data dashboard using techniques such as media queries or flexible layouts, so that the size of the adjusted elements meets the parameters of the visible area.

[0024] However, in the second approach, techniques such as media queries or flexible layouts increase code complexity, thereby increasing maintenance costs.

[0025] The third approach is to match different user interface (UI) components to different mobile devices, thereby providing different page layouts for different mobile devices.

[0026] Then, using different UI components to provide different page layouts for different mobile devices requires developers to learn how to use different UI components, which increases the learning cost for developers and thus increases the total cost.

[0027] To address the problems existing in the prior art, embodiments of this application provide a method, apparatus, device, storage medium, and program product for data dashboard adaptation. The following first describes the method for data dashboard adaptation provided in this application embodiment. This method is applied to a data visualization platform, such as... Figure 1 As shown, the method includes: S101. Obtain the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset base width.

[0028] This data dashboard page is a PC-based data dashboard, as shown below. Figure 2a , Figure 2b and Figure 2c As shown. Among them, Figure 2a An example is shown of a block-level element consisting of two child elements, each of which can be a data graphic or a data icon. Figure 2b and Figure 2c Two different page layouts for PC-based data dashboards.

[0029] The original width and original height are the width and height of the block-level element in the PC-side data dashboard, and the unit can be pixels.

[0030] The preset margins and preset baseline widths in the width direction are preset based on experience.

[0031] S102. Calculate the difference between the preset baseline width and the preset margin to obtain the element width.

[0032] Element width refers to the width of block-level elements in a vertically arranged layout.

[0033] It should be noted that in a vertical layout, the width of each block-level element is the same.

[0034] Specifically, the vertical arrangement layout is as follows: Figure 3 As shown, in Figure 3 In the text, the vertical layout consists of a title and multiple block-level elements. Figure 3 Three block-level elements are shown as an example.

[0035] S103. For each block-level element, calculate the ratio of the element width to the original width to obtain the first scaling ratio.

[0036] S104. For each block-level element, calculate the element height corresponding to the block-level element according to the original height of the block-level element and the first scaling ratio.

[0037] The method for calculating the height of a block-level element, depending on whether it contains child elements, falls into the following two categories: When a block-level element includes child elements, the child elements are arranged vertically in order within the block-level element's area. The heights of the arranged child elements are summed. Then, the height occupied by the block-level element's title and the spacing between child elements are added to the sum to obtain the height of the block-level element. The product of the height of the block-level element and the first scaling factor is calculated to obtain the element height of the block-level element.

[0038] If the block-level element does not contain child elements, the element height is obtained by directly calculating the product of the original height of the block-level element and the first scaling factor.

[0039] S105. Arrange each block-level element along its height according to its width and height, and generate a style file.

[0040] The data visualization platform can traverse each block-level element in a preset order, arrange each block-level element vertically in the height direction, thereby obtaining a vertical layout, and generate a style file based on the page with the vertical layout. This embodiment does not impose specific restrictions on the preset order.

[0041] In one example, the preset order can be from the top left element of the data dashboard to the bottom right element. The PC-based data dashboard includes four block-level elements, represented as block-level element 1, block-level element 2, block-level element 3, and block-level element 4. The data visualization platform extracts block-level element 1 according to the preset order and adds it to the vertical page, then extracts block-level element 2 and adds it below block-level element 1, then extracts block-level element 3 and adds it below block-level element 2, and finally extracts block-level element 4 and adds it below block-level element 3, thus obtaining the vertical layout.

[0042] S106. Send the style file to the mobile device so that the mobile device can display the style file in the visible area.

[0043] Using the method provided in this application, the data visualization platform extracts block-level elements from the data dashboard page, along with the original height and width of each block-level element. Then, it calculates the difference between a preset baseline width and a preset margin on that width to determine the element width of the block-level element, scaling each block-level element to the same width. A first scaling ratio is calculated using the element width and the original width, thereby determining the scaling ratio of each block-level element. Then, using the scaling ratio and the original height of each block-level element, the element height of the corresponding block-level element is calculated, thus scaling the height of the block-level elements. In this way, the block-level elements are arranged vertically according to their calculated element width and height, resulting in a multi-row, column-based page layout that is more suitable for mobile device displays. When the mobile device loads the data dashboard data, the data visualization platform sends a style file for the vertically arranged page layout to the mobile device, allowing the mobile device to display the vertically arranged page layout in its visible area. In this way, style files can be adapted to different mobile devices, eliminating the need to pre-develop multiple page layouts adapted to different mobile devices, thereby reducing development costs.

[0044] In some embodiments of this application, for block-level elements in a PC-based data dashboard, developers can extract these elements according to actual business needs and adapt them to mobile devices. Specifically, the above-mentioned S101, obtaining the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset baseline width, can be implemented as follows: Step A: Obtain the preset attribute values ​​of each block-level element in the data dashboard page.

[0045] After the data visualization platform generates a large data dashboard on the PC, developers manually mark the attributes of each block-level element to obtain the preset attribute values ​​corresponding to each block-level element.

[0046] Developers can customize any attribute parameter to carry preset attribute values ​​according to the actual business scenario.

[0047] Step B: Determine the block-level element based on the preset attribute values.

[0048] In one example, the preset value for each block-level element can be set using the custom attribute `data-block`. When `data-block` is set to `none`, the content of the block-level element is hidden in the vertical layout; when `data-block` is empty, the content of the block-level element is added to the vertical layout; when `data-block` is set to `vert-name(-sub)`, the content of the block-level element is added to the vertical layout, and its child elements are vertically rearranged.

[0049] The method provided in this application provides the preset attribute values ​​for each block-level element in a data dashboard page. These preset attribute values ​​are set in advance by developers based on experience, and the block-level elements to be extracted from the data dashboard page can be determined based on these preset attribute values. In this way, the original width and height of block-level elements can be extracted according to actual business needs, reducing the amount of data and improving data processing efficiency.

[0050] Regarding S104 above, for each block-level element, the element height corresponding to the block-level element is calculated according to the original height of the block-level element and the first scaling ratio. There are two possible cases: Case 1: When a block-level element includes child elements, obtain the original height of the child elements. Sum the original heights of all child elements except the one with the highest original height to get a first sum. Calculate the first sum and the original height of the block-level element to get a second sum. Calculate the product of the second sum and the first scaling factor to obtain the element height corresponding to the block-level element.

[0051] The original height and width of block-level elements and their child elements can be obtained in the PC view using JavaScript, a programming language.

[0052] Understandably, when a block-level element contains child elements, the original height of the block-level element is determined by the original height of the highest child element. Therefore, by summing the original heights of all child elements except the one with the highest original height, and then calculating the sum of the first sum and the original height of the block-level element, we can obtain the height of the block-level element after vertically arranging the elements in the PC data dashboard.

[0053] Specifically, when a block-level element includes child elements, the element height of the block-level element is calculated using the following formula: height2 = (height1 + sum of heights of all child elements except the tallest child element) * scale; Here, height2 represents the element height of the block-level element, and scale represents the first scaling ratio.

[0054] Using the method provided in this application, when there are child elements within a block-level element, the original height of the block-level element is usually determined based on the height of the tallest child element. Furthermore, after subsequent vertical arrangement, the vertically arranged page layout will stretch the height of the block-level element. Therefore, by calculating the sum of the original heights of all child elements except the one with the tallest original height, a first sum is obtained. Then, by calculating the sum of the first sum and the original height of the block-level element, the height of the vertically arranged block-level element, i.e., the second sum, can be obtained. Finally, by calculating the product of the second sum and the first scaling ratio, the element height of the block-level element adapted to the mobile screen size can be obtained, thus improving the accuracy of the calculated element height.

[0055] In case 1 above, after calculating the element height, it is done as follows: Figure 4 The steps shown arrange the block-level elements and their child elements to generate the stylesheet: S401. Add each block-level element to the preset vertical page in the order of each block-level element.

[0056] The order of block-level elements is preset based on experience, and the preset vertical page width is equal to the preset base width.

[0057] Specifically, the `position:fixed` command can be used to instruct the data visualization platform to add each block-level element to a preset vertical page for positioning.

[0058] Understandably, after adding each block-level element to the preset vertical page in the order described in S401, the position of each block-level element is marked, thereby fixing the position of each block-level element on the preset vertical page. In this embodiment, the position of each block-level element on the preset vertical page is determined by marking the distance from the top boundary of each block-level element to the top boundary of the preset vertical page.

[0059] S402. For each block-level element, calculate the sum of the element height, preset element spacing, and reserved header spacing of the added block-level elements in the preset vertical page to obtain the third sum.

[0060] The preset element spacing and title reserved space spacing are preset based on experience.

[0061] S403. For each block-level element, calculate the product of the third sum and the first scaling factor to obtain the first distance between the block-level element and the preset vertical page top edge.

[0062] The first scaling factor is written using the transform: scale(Scale) command.

[0063] In addition, by setting the scaling origin, you can prevent scaled block-level elements from shifting relative to the vertical page.

[0064] S404. For each block-level element, if the block-level element includes child elements, add each child element to the block-level element area in the order of the child elements.

[0065] S405. For each child element in the block-level element, calculate the sum of the element height of the added child elements in the block-level element region and the preset element spacing to obtain the fourth sum.

[0066] In some embodiments, when a header exists in a block-level element, the spacing occupied by the header is added to the fourth sum to obtain a fifth sum, and then the product of the fifth sum and the first scaling factor is calculated to obtain a second distance.

[0067] In addition, the height of a child element is the difference between its width and the preset margin in the width direction.

[0068] like Figure 5a As shown, Figure 5a A schematic diagram of a block-level element provided in an embodiment of this application; Figure 5b This is a diagram illustrating the vertical arrangement of sub-elements provided in an embodiment of this application. Figure 5a The block-level elements shown include two sub-elements: "xx user count data chart" and "xx ranking data chart," which are arranged according to... Figure 4 The method provided in the embodiment arranges the child elements vertically to obtain... Figure 5b The image shows the effect of vertically arranging child elements.

[0069] S406. Calculate the product of the fourth sum and the first scaling factor to obtain the second distance between the child element and the upper boundary of the block-level element area, and generate the style file.

[0070] Using the method provided in this application embodiment, each block-level element is added to a preset vertical page in the order of each block-level element. Then, for the preset vertical page, the sum of the element height, preset element spacing, and title reserved spacing of the added block-level elements in the preset vertical page is calculated to obtain a third sum. The third sum represents the distance from the top boundary of each block-level element to the top boundary of the preset vertical page. The calculated third sum is then scaled according to a first scaling ratio to obtain a first distance adapted to the mobile screen. This first distance represents the distance from the top boundary of each block-level element to the top boundary of the preset vertical page after scaling. Next, child elements are added to the block-level elements. For each child element, the sum of the element height and preset element spacing of the added child elements in the block-level element area is calculated to obtain a fourth sum. The fourth sum is then scaled according to the first scaling ratio to determine the distance from the child element to the top boundary of the block-level element area after scaling. In this way, position marking is implemented for each block-level element and its child elements, fixing the position of each element in the preset vertical page, thereby generating style files and ensuring the accuracy of the generated style files.

[0071] Case 2: If the block-level element does not include child elements, calculate the product of the original height of the block-level element and the first scaling factor to obtain the element height of the block-level element.

[0072] Using the method provided in this application, when a block-level element does not include child elements, the block-level element can be directly scaled according to a first scaling ratio to determine the element height of the scaled block-level element. This improves the accuracy of calculating the element height of the block-level element.

[0073] In scenario 2 above, the style file should be generated according to the following steps: Add the block-level elements to the preset vertical page in the order they appear. Calculate the sum of the element height, preset element spacing, and header space spacing of the added block-level elements in the preset vertical page to obtain a third sum. Calculate the product of this third sum and the first scaling factor to obtain the first distance of each block-level element from the top edge of the preset vertical page, and generate the style file.

[0074] The following combination Figure 6 Introduces the process of determining the position of block-level elements, such as... Figure 6 As shown: First, add the block-level element to the preset vertical page using the `position: fixed` command. Then, determine the scaling ratio using the `transform: scale` (or `scale`) command, set the scaling origin using `transform-origin: 0 0`, and set the distance between the block-level element and the left edge of the preset vertical page to `l1` using `left: l1`. These four commands determine the block-level element's position along the x-axis within the preset vertical page. Finally, set the distance between the top edge of the block-level element and the top edge of the preset vertical page using `top: b1+b2+h1+b2`, thus determining its position along the y-axis. Here, `b1` represents the header space, used to display the block-level element's title; `b2` represents the preset element spacing, the distance between each block-level element in the preset vertical page; and, assuming one block-level element has already been added to the preset vertical page, `h1` represents the height of that added block-level element.

[0075] It should be noted that after marking each block-level element as described above, developers can adjust the generated style file according to the actual situation. Furthermore, since the title area in PC-based data dashboards is usually much larger than that in mobile data dashboards, developers can adjust or redesign the title space according to the actual business scenario; this application does not impose any restrictions on this. In addition, developers can also adjust the background image in the style file to make the adjusted background image more suitable for mobile devices.

[0076] In some embodiments of this application, the above-described S106, sending a style file to a mobile device for displaying the style file in the visible area of ​​the mobile device, can be specifically implemented as S1061-S1065, such as... Figure 7 As shown: S1061. Receive a loading request sent by the terminal device.

[0077] S1062. In response to the load request, verify the device type of the terminal device.

[0078] The data visualization platform uses JavaScript to obtain the device type of the terminal device.

[0079] S1063. If the terminal device is determined to be a mobile device, obtain the visible area parameters of the mobile device.

[0080] The visible area parameter includes the visible area size data.

[0081] S1064. Generate the page interaction logic file based on the visible area parameters and style file.

[0082] The page interaction logic file is used to instruct mobile devices to display the style file through page scrolling.

[0083] Specifically, the data visualization platform calculates the ratio of the visible area width to the preset baseline page width based on the visible area width parameters, thus obtaining the second scaling ratio. The vertically arranged page in the style file is scaled according to this second scaling ratio, and then the scaled vertically arranged page is added to the visible area. Page scrolling is simulated, and the scroll distance `scrollTop` is obtained. The `top` value of each block-level element in the vertically arranged page (the distance from the top boundary of the block-level element to the top boundary of the vertically arranged page) is also obtained. The difference between the `top` value of each block-level element and the scroll distance `scrollTop` is calculated, and the position of each block-level element relative to the visible area is modified according to this difference, thereby generating the page interaction logic file.

[0084] In addition, after generating the style file, the data visualization platform adds priority keywords to each attribute in the style file to increase its priority. For example, the priority keyword can be !important.

[0085] Understandably, the data visualization platform stores multiple PC-based data dashboards and corresponding mobile style files for each PC-based data dashboard. When the data visualization platform receives a loading request and determines that the terminal device is a mobile device, it retrieves the style file with higher priority, thereby avoiding retrieving data from the PC-based data dashboard so that the mobile device can display the style file.

[0086] S1065. Send style files and page interaction logic files to the mobile device.

[0087] Using the method provided in this application, after receiving a loading request from a terminal device, the data visualization platform can verify the device type of the terminal device through the loading request. If the terminal device is determined to be a mobile device, the platform can obtain the visible area parameters for subsequent page interaction logic binding. Based on the visible area parameters and the generated style file, a page interaction logic file is generated to trigger the mobile device to display the style file through page scrolling. Thus, after receiving the style file and the page interaction logic file, the mobile device can display the vertical layout of the data dashboard through page scrolling.

[0088] In some embodiments of this application, the page interaction logic file may also include a navigation menu file. Specifically: the data visualization platform generates a navigation menu according to business requirements, simulates click operations on block-level elements in the navigation menu, determines the page scroll distance scrollTop based on the block-level element corresponding to the click operation, scrollTop=Math.min(top value of block-level element, page height - visible area height), calculates the difference between the top value of the block-level element and the visible area height, and the difference between the page height and the visible area height, and takes the minimum of the two differences as the page scroll distance.

[0089] like Figure 8 As shown, Figure 8 An example is shown of a navigation menu, wherein, Figure 7 The navigation menu includes modules 1 through 8, each corresponding to a block-level element. When the mobile device detects a user's click on module 5 in the navigation menu, it determines the page scroll distance corresponding to module 5 based on the calculation logic in the navigation menu file. The page scroll distance scrollTop is equal to the original top value of block-level element 5. Then, the page is scrolled to display block-level element 5 at the top of the visible area.

[0090] The following combination Figure 9 This application describes the complete process of a data dashboard adaptation method provided in its embodiments, such as... Figure 8 As shown, the method includes four steps: obtaining block-level element markers, generating vertical layout, binding page interactions, and mobile device applications.

[0091] The step of obtaining the block-level element marker is the same as the step of obtaining the block-level element according to the preset attribute value in the above embodiment. Developers pre-mark the preset attribute value of each block-level element using the Data-block attribute. When the Data-block value is none, the data visualization platform does not extract the corresponding block-level element for vertical layout; when the Data-block value is empty (no value) or vert-name, the corresponding block-level element is extracted for vertical layout. Specifically, when the Data-block value is vert-name, the corresponding block-level element contains child elements, and the Data-block value of the child elements is vert-name-sub.

[0092] Regarding the steps for generating a vertical layout, when the Data-block value is vert-name, the display:block directive instructs the data visualization platform to vertically arrange the child elements of the block-level element. The width of the child element is the difference between the width of the block-level element and the preset margin in the width direction. Then, the width and height of the block-level element and its child elements are calculated, along with their corresponding positioning data and the overall page height. The overall page height refers to the overall height of the block-level element, and the positioning data refers to the distance from the top boundary of the block-level element to the top boundary of the vertical page, and the distance from the top boundary of the child element to the top boundary of the block-level element. Finally, based on the calculated positioning data and the browser interface, the element positions are repositioned, and a scaling factor variable is set to generate the style file. The browser interface is the preset vertical page in the above embodiment, and the scaling factor is the first scaling ratio in the above embodiment.

[0093] When Data-block is empty, the width and height of the block-level element are calculated, along with its positioning data and the overall page height. Finally, the calculated positioning data, the browser's repositioning of the element, and the scaling factor are used to generate the stylesheet.

[0094] Regarding the aforementioned page interaction steps, the data visualization platform obtains the visible area parameters of the mobile device, binds page scroll events, and modifies the top value of block-level elements to simulate the page scrolling effect. In addition, the data visualization platform can also simultaneously generate a navigation menu, encapsulating the navigation menu file within the page interaction logic file.

[0095] For mobile device application steps, the data visualization platform determines the device type based on the loading request sent by the terminal device, loads the mobile-customized style file and page interaction logic file, and calculates the overall scaling ratio so that the mobile device scales the vertically arranged page in the style file according to the overall scaling ratio, and displays the vertically arranged page according to the page interaction logic file.

[0096] Based on the same concept, embodiments of this application provide a data dashboard adaptation device, applied to a data visualization platform, such as... Figure 10 As shown, the device includes: The acquisition module 1001 is used to acquire the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset baseline width. The calculation module 1002 is used to calculate the difference between the preset baseline width and the preset left and right margins to obtain the element width; The calculation module 1002 is used to calculate the ratio of the element width to the original width for each block-level element to obtain a first scaling ratio; The calculation module 1002 is used to calculate the element height corresponding to each block-level element according to the original height of the block-level element and the first scaling ratio. The generation module 1003 is used to arrange each block-level element in the height direction according to the element width and element height corresponding to each block-level element, and generate a style file; The sending module 1004 is used to send the style file to the mobile device so that the mobile device can display the style file in the visible area.

[0097] In one possible implementation, module 1001 is specifically used for: Obtain the preset attribute values ​​of each block-level element in the data dashboard page; The block-level element is determined based on the preset attribute value.

[0098] In one possible implementation, the computing module 1002 is specifically used for: If the block-level element includes child elements, obtain the original height of the child elements; Sum the original heights of all child elements except the one with the highest original height to obtain the first sum value; Calculate the sum of the first sum and the original height of the block-level element to obtain the second sum; Calculate the product of the second sum and the first scaling factor to obtain the element height corresponding to the block-level element.

[0099] In one possible implementation, the generation module 1003 is specifically used for: Add each of the block-level elements to the preset vertical page in the order of each block-level element; For each block-level element, calculate the sum of the element height, preset element spacing, and title reserved spacing of the added block-level elements in the preset vertical page to obtain a third sum. For each block-level element, the product of the third sum and the first scaling ratio is calculated to obtain the first distance of the block-level element from the preset vertical page top edge; For each block-level element, if the block-level element includes child elements, each child element is added to the block-level element region in the order of the child elements. For each child element in the block-level element, calculate the sum of the element height of the added child elements in the block-level element region and the preset element spacing to obtain the fourth sum. Calculate the product of the fourth sum and the first scaling factor to obtain the second distance between the child element and the upper boundary of the block-level element region, and generate the style file.

[0100] In one possible implementation, the computing module 1002 is specifically used for: If the block-level element does not include child elements, the element height of the block-level element is obtained by multiplying its original height by the first scaling factor.

[0101] In one possible implementation, the sending module 1004 is specifically used for: Receive loading requests sent by terminal devices; In response to the loading request, verify the device type of the terminal device; If the terminal device is determined to be the mobile device, the visible area parameters of the mobile device are obtained; Based on the visible area parameters and the style file, a page interaction logic file is generated. The page interaction logic file is used to instruct the mobile device to display the style file by scrolling the page. The style file and the page interaction logic file are sent to the mobile device.

[0102] It should be noted that the device for adapting the data screen is the same as the method for adapting the data screen described above. All implementation methods in the above method embodiments are applicable to the embodiments of this device and can achieve the same technical effect.

[0103] Figure 11 A schematic diagram of the hardware structure of the electronic device provided in an embodiment of this application is shown.

[0104] The electronic device may include a processor 1101 and a memory 1102 storing computer program instructions.

[0105] Specifically, the processor 1101 may include a central processing unit (CPU), an application specific integrated circuit (ASIC), or one or more integrated circuits that can be configured to implement the embodiments of this application.

[0106] Memory 1102 may include mass storage for data or instructions. For example, and not limitingly, memory 1102 may include a hard disk drive (HDD), floppy disk drive, flash memory, optical disk, magneto-optical disk, magnetic tape, or Universal Serial Bus (USB) drive, or a combination of two or more of these. Where appropriate, memory 1102 may include removable or non-removable (or fixed) media. Where appropriate, memory 1102 may be internal or external to the integrated gateway disaster recovery device. In a particular embodiment, memory 1102 is non-volatile solid-state memory.

[0107] In a particular embodiment, memory 1102 may include read-only memory (ROM), random access memory (RAM), disk storage media device, optical storage media device, flash memory device, electrical, optical, or other physical / tangible memory storage device. Thus, generally, memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., memory devices) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the methods according to one aspect of this disclosure.

[0108] The processor 1101 reads and executes computer program instructions stored in the memory 1102 to implement any of the data screen adaptation methods in the above embodiments.

[0109] In one example, the electronic device may also include a communication interface 1103 and a bus 1104. For example, Figure 11 As shown, the processor 1101, memory 1102, and communication interface 1103 are connected through bus 1104 and complete communication with each other.

[0110] The communication interface 1103 is mainly used to realize communication between various modules, devices, units and / or equipment in the embodiments of this application.

[0111] Bus 1104 includes hardware, software, or both, that couples components of an electronic device together. For example, and not limitingly, the bus may include an Accelerated Graphics Port (AGP) or other graphics bus, an Extended Industry Standard Architecture (EISA) bus, a Front Side Bus (FSB), a Super Transmission (HT) interconnect, an Industrial Standard Architecture (ISA) bus, an Infinite Bandwidth Interconnect, a Low Pin Count (LPC) bus, a memory bus, a Micro Channel Architecture (MCA) bus, a Peripheral Component Interconnect (PCI) bus, a PCI-Express (PCI-X) bus, a Serial Advanced Technology Attachment (SATA) bus, a Video Electronics Standards Association Local Bus (VLB) bus, or other suitable buses, or a combination of two or more of these. Where appropriate, bus 1104 may include one or more buses. Although specific buses are described and illustrated in the embodiments of this application, this application considers any suitable bus or interconnection.

[0112] Furthermore, in conjunction with the data screen adaptation methods in the above embodiments, this application embodiment can provide a computer storage medium for implementation. The computer storage medium stores computer program instructions; when these computer program instructions are executed by a processor, they implement any of the data screen adaptation methods in the above embodiments.

[0113] This application also provides a computer program product, including a computer program, which, when executed, implements any of the data screen adaptation methods described in the above embodiments.

[0114] It should be clarified that this application is not limited to the specific configurations and processes described above and shown in the figures. For the sake of brevity, detailed descriptions of known methods are omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of this application is not limited to the specific steps described and shown. Those skilled in the art can make various changes, modifications, and additions, or change the order of steps, after understanding the spirit of this application.

[0115] The functional blocks shown in the above block diagram can be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, they can be, for example, electronic circuits, application-specific integrated circuits (ASICs), appropriate firmware, plug-ins, function cards, etc. When implemented in software, the elements of this application are programs or code segments used to perform the required tasks. Programs or code segments can be stored on machine-readable media or transmitted over a transmission medium or communication link via data signals carried on a carrier wave. "Machine-readable media" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable read-only memory (EROM), floppy disks, compact disc read-only memory (CD-ROM), optical disks, hard disks, fiber optic media, radio frequency (RF) links, etc. Code segments can be downloaded via computer networks such as the Internet, intranets, etc.

[0116] It should also be noted that the exemplary embodiments mentioned in this application describe methods or systems based on a series of steps or apparatus. However, this application is not limited to the order of the above steps; that is, the steps can be performed in the order mentioned in the embodiments, or in a different order, or several steps can be performed simultaneously.

[0117] The aspects of this disclosure have been described above with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this disclosure. It should be understood that each block in the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing apparatus to produce a machine such that these instructions, executable via the processor of the computer or other programmable data processing apparatus, enable the implementation of the functions / actions specified in one or more blocks of the flowchart illustrations and / or block diagrams. Such a processor can be, but is not limited to, a general-purpose processor, a special-purpose processor, a special application processor, or a field-programmable logic circuit. It is also understood that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can also be implemented by special-purpose hardware performing the specified functions or actions, or can be implemented by a combination of special-purpose hardware and computer instructions.

[0118] The above are merely specific embodiments of this application. Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, modules, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. It should be understood that the protection scope of this application is not limited thereto. Any person skilled in the art can easily conceive of various equivalent modifications or substitutions within the technical scope disclosed in this application, and these modifications or substitutions should all be covered within the protection scope of this application.

Claims

1. A method for adapting data to a large screen, characterized in that, The method, applied to a data visualization platform, includes: Obtain the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset base width; Calculate the difference between the preset baseline width and the preset margin to obtain the element width; For each block-level element, the ratio of the element width to the original width is calculated to obtain a first scaling ratio; For each block-level element, the element height corresponding to the block-level element is calculated according to the original height of the block-level element and the first scaling ratio; Arrange each block-level element along its height according to its width and height, and generate a style file. The style file is sent to the mobile device so that the mobile device can display the style file in the visible area.

2. The method according to claim 1, characterized in that, The block-level elements in the data dashboard page include: Obtain the preset attribute values ​​of each block-level element in the data dashboard page; The block-level element is determined based on the preset attribute value.

3. The method according to claim 1, characterized in that, The step of calculating the element height corresponding to the block-level element according to the original height of the block-level element and the first scaling ratio includes: If the block-level element includes child elements, obtain the original height of the child elements; Sum the original heights of all child elements except the one with the highest original height to obtain the first sum value; Calculate the sum of the first sum and the original height of the block-level element to obtain the second sum; Calculate the product of the second sum and the first scaling factor to obtain the element height corresponding to the block-level element.

4. The method according to claim 3, characterized in that, The step of arranging each block-level element along its height according to its width and height, and generating a style file, includes: Add each of the block-level elements to the preset vertical page in the order of each block-level element; For each block-level element, calculate the sum of the element height, preset element spacing, and title reserved spacing of the added block-level elements in the preset vertical page to obtain a third sum. For each block-level element, the product of the third sum and the first scaling ratio is calculated to obtain the first distance of the block-level element from the preset vertical page top edge; For each block-level element, if the block-level element includes child elements, each child element is added to the block-level element region in the order of the child elements. For each child element in the block-level element, calculate the sum of the element height of the added child elements in the block-level element region and the preset element spacing to obtain the fourth sum. Calculate the product of the fourth sum and the first scaling factor to obtain the second distance between the child element and the upper boundary of the block-level element region, and generate the style file.

5. The method according to claim 1, characterized in that, The step of calculating the element height corresponding to the block-level element according to the original height of the block-level element and the first scaling ratio includes: If the block-level element does not include child elements, the element height of the block-level element is obtained by multiplying its original height by the first scaling factor.

6. The method according to claim 1, characterized in that, Sending the style file to the mobile device includes: Receive loading requests sent by terminal devices; In response to the loading request, verify the device type of the terminal device; If the terminal device is determined to be the mobile device, the visible area parameters of the mobile device are obtained; Based on the visible area parameters and the style file, a page interaction logic file is generated. The page interaction logic file is used to instruct the mobile device to display the style file by scrolling the page. The style file and the page interaction logic file are sent to the mobile device.

7. A device for adapting to a large data screen, characterized in that, The device, used in a data visualization platform, includes: The acquisition module is used to acquire the block-level elements in the data dashboard page, the original width and original height of each block-level element, the preset margin in the width direction, and the preset base width. The calculation module is used to calculate the difference between the preset baseline width and the preset margin to obtain the element width; The calculation module is used to calculate the ratio of the element width to the original width for each block-level element to obtain a first scaling ratio; The calculation module is used to calculate the element height corresponding to each block-level element according to the original height of the block-level element and the first scaling ratio. The generation module is used to arrange each block-level element in the height direction according to the element width and element height corresponding to each block-level element, and generate a style file; The sending module is used to send the style file to the mobile device so that the mobile device can display the style file in the visible area.

8. An electronic device, characterized in that, The electronic device includes: a processor and a memory storing computer program instructions; The processor executes computer program instructions to implement the method as described in any one of claims 1-6.

9. A computer storage medium, characterized in that, The computer-readable storage medium stores computer program instructions that, when executed by a processor, implement the method as described in any one of claims 1-6.

10. A computer program product, characterized in that, When the instructions in the computer program product are executed by the processor of the electronic device, the electronic device causes the electronic device to perform the method as described in any one of claims 1-6.

Images