All Products
Search
Document Center

DataV:Best practices

Last Updated:Apr 27, 2023

This article uses the five chart components of vertical stacking column chart, area chart chart, basic scatter chart, ring chart, and general title, and uses the one-click beautification and smart theme functions in the beautification toolbox, combined with the filter configuration function in the toolbar, to quickly adjust the style effect of a visual application.

Procedure

  1. Log on to the DataV console.
  2. On the My Visualizations page, find a visualization and click Edit in the Actions column.

  3. Click the Asset List icon to add the components that you want to configure and arrange them as shown in the figure. image..png

  4. Click the Beautify Toolbox icon to open the Smart Theme feature. image..png

  5. Click My Themes. In the System Themes section, select a system-specific theme. In the canvas editor on the right, preview the effect of the selected theme in real time. image..png

    You can move the mouse over the color blocks of different system themes to directly view the color values of the color blocks. image..png

  6. Click Custom Theme to upload a custom image. The system automatically generates multiple themes from the uploaded image. image..png

  7. You can also change the automatically generated theme color value below by selecting a different color within the uploaded style image by taking the color circle. Click Save Theme. In the My Themes> Saved Themes dialog box, view the saved theme. image..pngimage..png

  8. Select One-click Beautification and click Show /Show or Enable to enable the beautification feature. image..png

  9. Click the overall style configuration items. More than 20 overall style effects are displayed. Style 1 is selected by default. image..png

  10. Configure Headline, Level -2 Headline, Level -2 Background, and Layout in the Beautify Style section. image..png

    • Headline: You can set the display or concealment of the subtitle and the alignment of the text, including the default alignment, left alignment, center alignment, and right alignment.

    • Level -2 Title: You can set the display mode of the subtitle and the alignment mode of the text, including Default Alignment, Left Alignment, Center Alignment, and Right Alignment. You can also select the Exclude type to display the level -2 title. You can select the Map and Diagrams widgets.

    • Secondary Background: You can set the exclusion type. If you select this option, the secondary background is displayed. Currently, you can select the Map and ticker board widgets.

    • Layout Settings: You can customize the overall layout of the visual group.

      Parameter

      Description

      Margin

      • Pin: adjusts the margin between the visual group and the canvas.

      • Group Margins: The margins between visual groups.

      • Inline Margins: the margin between the widget and the border.

      Alignment Threshold

      • Area Range-X: adjusts the horizontal reference line of the visual group.

      • Area Range-Y: adjusts the vertical reference line of the visual group.

      • Adsorption Range-X: Adjust the horizontal alignment of each component.

      • Adsorption Range-X: Adjust the vertical alignment of each component.

      Maintain original group

      When you use one-click beautification, the layout of the components in the original visual group is disrupted. If you turn on Maintain Original Group, the layout of the components in the original visual group is maintained.

  11. The adjustment results are shown in Fig.

    image..png
  12. After the configuration is complete, click Confirm Application. In the dialog box that appears, click Confirm again to apply the widget layout style. This way, the widget color and layout style on the canvas are beautified. image..png

  13. Turn on filter Configuration at the top of Canvas Editor to enable filter configuration.

  14. Drag the sliders to adjust the hue, saturation, brightness, and opacity of the canvas editor based on your business requirements.

  15. After the configuration items is adjusted, click Update filter Configuration in the lower-right corner.

    image..png
    Note

    filter effects can be customized at any time with the option to turn off or on.

  16. Preview and publish the edited visual application to show the beautification effect of the visual application online.