FVS Component Style and Attribute

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

Version

Function Description

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

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.

Note:

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.

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.

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.

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.

Corner Radius

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

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%.

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.

Note:

If you set Border Background to Color, My 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.

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

Reflection

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

Note:

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

The following figure shows the effect.

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.

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.

The following figure shows the effect.

Note:

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.

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.

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.

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.

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.

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.

Opacity

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