FVS Color Panel

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

Version

Application Scenario

During the template design in the FVS visualization dashboard, you may often need to modify the color attributes, such as setting the background color for a component, modifying the font color, and changing the series color of a chart.

In such cases, you can use the color panel where you can select a required color from theme colors, standard colors, or recently used colors displayed by default.

If the default colors cannot satisfy your needs, you can also click More Colors to customize the color as needed. More Colors allows you to adjust color attributes more flexibly to meet diverse design needs, as shown in the following figure.

The designer color panel prevails for charts and tables (in the FVS visualization dashboard) that are consistent with those in the FineReport general report. For other components in the FVS visualization dashboard, the FVS color panel prevails.

The following table introduces the specific color panels used for different components.

The color panel displays Theme Color, Standard Color, History/Recently Used, and More Colors by default.

Note:

In versions earlier than V3.2.0, you can only select custom colors or default standard colors.

Theme Color

Theme colors on the color panel change dynamically with the theme colors set in Template Style.

Theme colors are divided into basic colors and extended colors.

• Basic colors, sequentially including Background Color, Text Color, Color Combination1, Color      Combination2, and so forth from left to right, change with the theme style.

• Extended colors specify the different shades of the basic colors.

For the Component Style setting in chart components and the Content Style and Component Style settings in other components, the color selected in Theme Color changes as the theme style switched after you click Switch Theme Style, as shown in the following figure.

Note:

The above-mentioned change does not take effect for the Content setting in chart components and widgets. The color selected in Theme Color will be changed to the corresponding default color set in Template Style after you switch the theme style.

To modify the color of a component in a template with a configured theme style, you can directly use the colors in Theme Color to ensure consistency with the overall template style.

1. The first column of theme colors, typically the background colors, are suitable for backgrounds such as the overall backgrounds of dashboards and image component backgrounds.

2. The second column of theme colors, typically the text colors, are suitable for the colors such as the colors of titles and time widgets.

For example, to differentiate text information at different levels and enhance the readability of the information, you can set the first row of colors to be the primary heading colors and the second row of colors to be the secondary heading colors.

3. You can set the combination colors in other columns flexibly as needed. You can set combination colors to be the colors of icon/button borders, adding rich visual layers to dashboards.

Example

In a template, the dashboard color selected in Theme Color changes after you switch the theme style, maintaining the overall harmony and aesthetic appeal. You can effortlessly switch the dashboard style without the need to readjust color schemes.

Take the template FVS Component Linkage Example as an example, as shown in the following figure.

You can download the template FVS Components Linkage Example.fvs.

Standard Color

Standard colors are fixed and do not change with the theme style. The background colors selected in Standard Color do not change dynamically after you switch the theme style.

Note:

To ensure the overall consistency of the dashboard color and style, you are advised to select from theme colors preferentially when changing the colors of widgets in Other.

History

Only the custom and eyedropper-picked colors in More Colors are recorded here.

More Colors

• You can click the color palette to pick a color. The corresponding color values will be displayed below the color palette after you pick the color.

• You can enter the color values to pick a color. You can enter a hexadecimal color code or RGBA values to pick a color. The picked color will be displayed on the color palette.

• You can pick a color by clicking the eyedropper, hovering the cursor over a specified place, and clicking the place. After you pick the color, the corresponding color values and the picked color will be displayed, respectively, below and on the color palette.

Note:

1. In versions earlier than V3.2.0, you cannot pick a color by the eyedropper.

2. In the remote design environment, the eyedropper needs to be used under secure access.

3. You are advised not to use the eyedropper in muti-screen scenarios.