Overview
This document is applicable to users who have installed the FineVis Data Visualization plugin to learn plugin functions.
Version
Report Server Version | Plugin Version | Functional Change |
11.0 | V1.X | For details, see FVS Title Component (Earlier Version). |
11.0.16 | V2.1.0 | Supported the font fuzzy search function, making it easier and more convenient to set fonts. |
Function Description
The title component is commonly used for creating the title content of a component or a single line of text description.
You can set the gradient color, text shadow, layout, letter spacing, and other effects for the title content through the component.
You can achieve the text reflection effect by ticking Enable Reflection in Component Style.
You can also use the component as a button to set click events, like FVS Click to Switch Pages. The following figure shows the effect.
For details about component interactions, see FVS Component Interaction Attribute.
Adding a Component
Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, click Create a Blank Dashboard, and click Create Dashboard.
Choose Text > Title to add the title component to the page.
Content Style
This section introduces the attributes of Title Content and Content Style, as shown in the following figure.
The following table describes each setting item.
Settings | Description |
Title Content | 1. You can directly enter title texts. The set text content is displayed in a single line (not supporting line breaks). Texts that exceed the display range are truncated and not displayed. 2. You can use formulas to enter the title content. FVS only supports some FineReport functions. For details, see Functions Supported by FVS. |
Font | You can set the font of title texts. Note: The FineVis Data Visualization plugin 2.1.0 and later versions support the fuzzy search function, allowing you to quickly search for the needed font. |
Style | You can set the bold, italic, underline, and font size for title texts. Note: The underline color follows the font color. If texts have a gradient color, the underline obtains the color of the left gradient area. |
Color | You can set Color to Monochrome or Gradient for title texts. 1. Monochrome
2. Gradient You can click one of the color markers on either side to open the color setting page, select a color, and adjust the gradient angle to achieve different gradient effects.
The following figure shows the effect.
|
Text Shadow | After ticking Enable Shadow Effect, you can add multiple shadow effects. Click the Add Shadow button to open the shadow setting box where you can set the name, offset direction, blur radius, and color for the shadow.
If multiple shadows exist, the shadow at the bottom of the list is displayed on the outermost layer. You can adjust the shadow order by dragging and dropping the shadow.
The following figure shows the effect. |
Layout | Arrangement: You can set Arrangement to Horizontal or Vertical for the title. The following figure shows the effect. |
Alignment: You can set Alignment to Left, Center, or Right for the title content. | |
Letter Spacing | You can set the letter spacing for the title. The display effect is shown in the following figure. |
Word Spacing | You can set the word spacing for the title. Manually add spaces to separate words when entering the title content and set the word spacing. Then the set spacing is displayed between words which are separated by spaces. The following figure shows the effect. |
Marquee Effect
You can tick Enable Marquee Effect to scroll texts as a whole, as shown in the following figure.
The following figure shows the Marquee function preview effect.
Notes
Obscured Italic Text on the Right
Problem
Suppose that the italic effect is selected for the font style. If you set Alignment to Right for the title content or Color to Gradient, the rightmost title text content is partially obscured.
Solution
Manually add a space at the end of the title content.
Template Download
Download the template: FVS Title Component Example.fvs.