FVS Component Style and Attribute

  • Last update:April 16, 2024
  • Overview

    This document applies to users who have installed the FineVis Data Visualization plugin to learn plugin functions.

    Version

    Report Server Version
    Plugin VersionFunctional Change

    11.0

    V1.x

    /

    V11.0.16

    V2.0.1

    Allowed you to set Border Line in Component Style. For details, see section "Border Line."

    Function Description

    This document briefly introduces the settings of Component Style and Component Attribute, as shown in the following figure.

     1.png

    Component Style

    Border Background

    Select a component and click Component on the right configuration bar. You can set Border Background to None (default setting), Color, My Resource, and Custom Upload, as shown in the following figure.

    iconNote:
    The border background setting only affects the currently selected component.

    Color

    Select Color from the drop-down list of Border Background. You can click the color block or manually enter the color value to add a color. You can adjust the opacity, as shown in the following figure.

     2.png

    My Resource

    1. Material Selection

    You can select My Resource from the drop-down list of Border Background and click the box to select the material. All borders of image resources are filtered out by default. You can also modify the filtering condition to view other images, as shown in the following figure.

     Animation.gif

    2. Filling Method

    If you have set NinePatch for the selected image, the default filling method will be NinePatch with three available display multiples (0.5x, 1.0x, and 2.0x). You can also set Filling Method to Common.

    If you do not set NinePatch for the selected image, the filling method will only be Common, including Adapt, Fill, and Stretch.

    3. You can set Hue and Opacity of the selected material to change its effect.

     

    Custom Upload

    1. Select Custom Upload from the drop-down list of Border Background, click Choose, and click Upload Image to upload an image file (in formats including JPG, JPEG, PNG, APNG, GIF, and WebP) from the local computer.

    2. After the upload, hover the cursor over the image to set NinePatch.

    3. After completion, set Filling Method, Hue, and Opacity, as shown in the following figure.

     3.gif

    Border Line

    You can set Border Line to None, solid lines, dotted lines, and dashed lines. After selecting the line type, you can set the line thickness and color, as shown in the following figure.

     4.png

    Corner Radius

    You can set Corner Radius to Overall or Single based on the units px or %, as shown in the following figure.

     5.png

    The following table shows the effect.

    Example
    Effect

    Effect 1: Set Corner Radius to Overall and 20px.

    Effect 2: Set Corner Radius to Single and set the top left and bottom right corner radii to 40px, and the rest of the corner radii to 0px.

    Effect 3: Set Corner Radius to Overall and 50%.

    6.png

    Ground Glass

    You can select Ground Glass Effect for the upper layer component to highlight the content.

    After selecting Ground Glass Effect, the component background presents a ground glass effect. You can customize the ambiguity (default value: 10).

    The following figure shows the effect.

    iconNote:
    If you set Border Background to ColorMy Resource, or Custom Upload, you need to set Opacity to view the ground glass effect.

    • The following figure shows the effect of deselecting Ground Glass Effect.

     7.png

    • The following figure shows the effect of selecting Ground Glass Effect with the ambiguity as 10.

     8.png

    Reflection

    You can select Enable Reflection to enrich the scene effects of components (such as texts, borders, icons, and 3D components).

    iconNote:
    Currently, you cannot modify the distance and opacity of the reflection effect. Therefore, some reflections may be dislocated when you overlay materials.

     9.png

    The following figure shows the effect.

     10.png

    Shadow

    You can select Enable Shadow to add a three-dimensional effect to the component.

    You can click Add Shadow to go to the shadow setting page and add multiple shadows. The settings are as follows.

    • Shadow Name: can be customized and cannot be duplicated with names of other shadows. Default value: Unnamed Shadow1.

    • Shadow Style: can be set to Outer Shadow or Inner Shadow.

    • Offset: allows you to set the offset in the X and Y directions. If the offset is a positive number, the shadow will be displayed on the right in the X direction and on the bottom in the Y direction. If the offset is a negative number, the shadow will be displayed on the left in the X direction and on the top in the Y direction. If the offset is 0, the shadow effect will exist on all sides.

    • Blur: allows you to set the blur (default value: 6px) of the shadow.

    • Range: allows you to set the range of the shadow.

    • Color: allows you to set the color of the shadow.

     11.png

    If multiple shadows exist, the shadow at the bottom of the list will be displayed on the outermost layer. You can drag the shadow to change its order, as shown in the following figure.

     12.gif

    The following figure shows the effect.

     13.png

    iconNote:
    If you set Inner Shadow for 3D components or image components, the shadow effect may be covered by the content of the component itself, which looks like no shadow effect.

    Component Attribute

    Name

    You can customize the component name, as shown in the following figure.

    • An initial name is set by default after component creation. The rule for the initial name is Page name plus Component type plus n, for example, page1_pie chart1.

    • Name cannot be empty.

    • On the same page, names of components cannot be the same. On different pages of the same canvas, names of components can be the same.

    • If the name of the to-be-pasted component is the same as that of a component on the current page, the to-be-pasted component will automatically be renamed with the suffix _c. If not, the name of the to-be-pasted component will not be changed.

     14.png

    Size

    You can set Size to change the width and height (unit: px) of the component.

    • You can modify the component size by entering the specific values on the configuration bar or by manually dragging the component on the canvas.

    • You can lock the aspect ratio of the component on the configuration bar to prevent distortion when setting the component size. The lock function is disabled by default.

    • Changes in the canvas size do not affect the component size.

     15.png

    Position

    The component position refers to the horizontal and vertical distance between the top left corner of the component and the top left corner of the page, as shown in the following figure.

     16.png

    Padding

    The component padding refers to the whitespace between the component border and the component content.

    You can set the top, bottom, left, and right padding of the component, as shown in the following figure.

     17.png

    3D Rotation

    You can separately set the rotation angles (from 0 to 360 degrees; default value: 0) of the X, Y, and Z axes.

    You can set Visibility (positive values with the default value as 500) of the component.

    If you set 3D Rotation for a single component, the rotation center will be the same with that of the component.

    If you set 3D Rotation for a combined component, the rotation center will be the same with that of the combined component.

    If you set 3D Rotation for multiple group-nested components, the rotation center will be that of the component in the previous layer, rather than that of the component in the outermost layer.

     18.gif

    Opacity

    You can set the overall opacity of the component. The opacity value ranges from 0 to 100 (default value: 100).

    19.gif

    Attachment List


    Theme: FineVis Data Visualization
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy