FVS Click to Show/Hide Components

Application scenario: If you have installed the FineVis Data Visualization plugin, you can learn functions related to the FVS template in this document.

Version

Application Scenario

If the plugin is of V2.3.0 or earlier versions, you need to add a JavaScript event to realize components showing and hiding in FVS templates. The configurations and subsequent maintenance are relatively complicated.

In V2.3.0, the Show/Hide click event was added. You can show/hide components, or toggle the status through simple setting.

All 2D components that support click events also support the Show/Hide event. After adding an event, you can Show/Hide target objects.

• Event names cannot be empty, and duplicate event names cannot exist within the same component.

• Multiple objects can be added in an event.

• You can search and filter components in the drop-down list of Target Object. The selection of multiple components is supported.

• Three types of interactive actions are available: Show, Hide, and Toggle Show/Hide.

Creating a Template

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer to create a blank FVS dashboard, as shown in the following figure. 

Adding Components

Add title components for the setting of click interaction events. The components to be shown or hidden can be added as needed.

In this example, a bar chart, a pie chart, a line chart, and three image components (used as backgrounds for the title components) are added. The component names can be customized and modified.

The following figure shows the final effect.

In the initial state, you need to manually set the components that you want to hide to be invisible, as shown in the following figure. 

Setting Show/Hide Events

Select the title of Column Chart, and choose Interaction > Add Event > Click > Show/Hide.

Customize the action name. The setting items for Target Object and Interactive Action are as follows:

Similarly, set the events for the other two title components by selecting the corresponding target objects to show or hide. No further elaboration is given here.

Effect Display

PC

Click Preview in the upper right corner of the template to view the effect, as shown in the following figure.

Mobile Terminal

Adjust components for the mobile terminal and enable Mobile Layout. For details about the preview method, see Preview on Moblie Terminal. The following figure shows the effect.

Click to download the template: FVS Event for Showing and Hiding Components.fvs.