Enabling and Disabling the Mouse Hover Effect Through JS

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

When the view angle rotation of a 3D component, the carousel effect of a carousel component, or the marquee effect of a table component is enabled, the playback will be paused when you hover the mouse over the corresponding component, and will be resumed when you move the mouse away. In certain scenarios, you may want the rotation, carousel, and scroll effects to be unaffected by mouse hover as shown in the following figure. 

Implementation Method

You can use the two interfaces openHoverPauseRollPlay and closeHoverPauseRollPlay to control whether the component playback is paused when you hover the mouse over the component.

Note: 1. The two interfaces are only supported in FineReport with the FineVis Data Visualization plugin of V3.0.0 and later versions.

2. The mouse hover function is enabled by default. If the function is disabled through closeHoverPauseRollPlay, you can re-enable the function using openHoverPauseRollPlay.

duchamp.getWidgetByName("Component Name").closeHoverPauseRollPlay();
//Disable the mouse hover effect.
duchamp.getWidgetByName("Component Name").openHoverPauseRollPlay();
//Enable the mouse hover effect.

Template Creation

Choose File > New FineVis Visualization Dashboard in the upper left corner of the designer, and create a blank dashboard. You can customize the dashboard name and canvas size. 

Component Design

Add two title components for setting click events, and set the title content of the components to Disable the Mouse Hover Effects for All Components and Enable the Mouse Hover Effects for All Components respectively.

You can freely add components that support carousel, rotation, and scroll. In this example, a carousel pie chart, a custom 3D component, and a table component are added.

Set the content of these components to a carousel pie chart, a custom 3D component, and a table respectively. The component names can be modified on the Component panel. 

JavaScript Event Setting

1. Select the title component Disable the Mouse Hover Effects for All Components, choose Interaction > Interaction Event > Add Event > Click, and select JavaScript in the Add Execution pop-up box.

Enter the following JavaScript scripts:

duchamp.getWidgetByName("Carousel Pie Chart").closeHoverPauseRollPlay();
duchamp.getWidgetByName("Custom 3D Component").closeHoverPauseRollPlay();
duchamp.getWidgetByName("Table").closeHoverPauseRollPlay();

The following figure shows the steps.

2. Similarly, set the JavaScript event for the other title component:

duchamp.getWidgetByName("Carousel Pie Chart").openHoverPauseRollPlay();
duchamp.getWidgetByName("Custom 3D Component").openHoverPauseRollPlay();
duchamp.getWidgetByName("Table").openHoverPauseRollPlay();

Effect Display

Click Preview in the upper right corner. The effect after you click Disable the Mouse Hover Effect for All Components is the same as that shown in section "Application Scenario."

Re-enable the mouse hover effects for all components.

For details, you can download the template:Enabling and Disabling the Mouse Hover Effect Through JS.fvs.