FVS Table Marquee

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

Version

Application Scenario

In versions earlier than V1.14.0, the table marquee effect can only be realized through JavaScript. However, the setting method was complicated, with high learning and understanding costs, and limited implementation effects.

Therefore, the marquee effect is designed as function configuration items in FVS. In addition to the table component, the effect is also applicable to rich text components and title components, making the effect more convenient and user-friendly.

Note:

The function is supported on mobile terminals.

Function Description

On the right configuration panel of the corresponding component, select Enable Marquee Effect under Content > Marquee to display the configuration items for the marquee effect.

Five configuration items are supported, namely Scroll Content, Scroll Mode, Scroll Direction, Scroll Speed, and Scroll Interval, as shown in the following figure.

Note:

For the rich text and title components, the Scroll Content and Scroll Method configuration items are not available and the default scroll logic takes effect.

Note:

During the preview of a marquee effect, the scroll pauses when you hover your mouse over a component, and resumes when you move your mouse out of the component.

Scroll Content

1. The rich text and title components do not support the Scroll Content configuration item. By default, the content of the components is scrolled according to the whole content.

2. For table components, you can set Scroll Content to One by One (default value) or Full Screen.

• One by One: The table content is scrolled row by row/column by column. The content of a table even with merged cells or grouped rows/columns (excluding frozen rows/columns) is still scrolled based on the original row/column distance.

• Full Screen: The table content is scrolled based on the distance of the currently-displayed content (excluding frozen rows/columns) on the first screen.

One by One	Full Screen

Scroll Method

1. For rich text and title components, the Scroll Method configuration item is not available. By default, after the end part of the whole component content disappears from one side, the start part appears on the other side.

2. For table components, you can set Scroll Method to End to End (default value) or From Start.

• End to End: The table content is scrolled end to end. That is to say, the last row to which the table is scrolled is automatically followed by the first row.

• From Start: After the table content is scrolled to the last row, the scroll starts from the first row again by jumping.

End to End	From Start

Scroll Direction

Scroll Direction can be set to Up, Down, Left, or Right.

1. Table component: The scroll direction is Up by default. The horizontally-expanded table can be scrolled left or right.

2. Text/Title component: The scroll direction is Left by default.

For example, the following figure displays the effects of scrolling a title component left and up.

Left	Up

Scroll Speed

The default scroll speed is 50px/s, indicating that one second is taken to scroll 50px. This can be modified as needed.

For example, the following figure compares the scroll speeds of 30px/s and 150px/s.

30px/s	150px/s

Scroll Interval

The scroll interval specifies the pause period after each scroll is completed. (If the consecutive two scroll positions of one row are overlapped, the scroll is considered as completed.) If the interval is set to 0, the scroll will continue without pausing.

1. Table component: The default scroll interval is 0.1s for One by One and 1s for Full Screen. These intervals can be modified as needed.

2. Rich text/Title components: The default scroll interval is 1s, which can be modified as needed.

For example, the following figure compares the scroll interval of 1s and 0s for the table component.

1s	0s

For example, the following figure compares the scroll interval of 1s and 0s for the title component.

1s	0s

For details, you can download the template FVS Marquee Effect.fvs.