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 Component Interaction Attribute. |
11.0.16 | V2.0.0 | Set the entry for the 3D component Interaction Event to the Data Layer in 3D Scene Components. |
11.0.22 | V2.10.0 | For details about optimizing the interaction click event page, see section “Function Description.” |
Function Description
This document briefly introduces the relevant knowledge of component interaction in FVS.
Function Description
Function Entry
Select Component on the page, and click Interaction in the configuration bar to set the relevant interaction properties of the component: Interaction Event, Carousel Setting, and Monitoring Refresh. Different types of components support different events.
Supported Range
The supported interaction properties that can be configured vary with the types of components.
1. Chart Component and Widge Component
| Component | Click | After Initialization | Edit End |
|---|---|---|---|
| Text Box, Date Time, Dropdown Box, Button Group, Dropdown Tree, View Tree | No | Yes | Yes |
| FVS Table Component | No | Yes | No |
2. Other Components
Component | Click | Carousel Setting | Monitoring Refresh |
Scene Map | Yes | Yes | Yes |
Fancy Tree (Electronic), and Fancy Tree (Model) | Yes | Yes The carousel cannot be stopped. | Yes |
3D City Scene, Custom 3D Scene, and Title Components Column Chart, Stacked Column Chart, Stacked Percentage Column Chart, Custom Column Chart, and Special Column Chart Bar Chart, Stacked Bar Chart, Stacked Percentage Bar Chart, and Custom Bar Chart Pie chart, Rose Chart (Equal Arcs), Rose Chart (Unequal Arcs), and Nested Pie Chart Line Chart, Stacked Line Chart, and Custom Line Chart Area Chart, Stacked Area Chart, Stacked Percentage Area Chart, and Custom Area Chart Radar Chart and Stacked Radar Chart Speedometer Gauge (360) and Speedometer Gauge (180) Circular Gauge, Angular Gauge, and Linear Gauge Area Map, Point Map, Flow Map, Combination Map, and Heat Map Area Drill-down Map, Point Drill-down Map, and Custom Drill-down Map 3D Column on Globe and 3D Point on Globe Scatter Chart and Bubble Chart. Rectangular Tree, Word Cloud, Mechanical Bubble Chart, and Funnel Chart Column - Line Chart, Column - Area Chart, Stacked Column - Line Chart, and Custom Combination Chart Gantt Chart, Vertical Tree, Horizontal Tree, Radio Tree, and Boxplot | Yes | No | Yes |
Image Component and Query Widget | Yes | No | No |
Carousel Pie Chart, Carousel Luminous Gauge, Liquid-Fill Chart, and Pixel Chart Carousel KPI Card (Flashing), Carousel KPI Card (Electronic), and Carousel Catalog Gear Carousel 3D Combination Map and Carousel GIS Point Map | No | Yes The carousel cannot be stopped. | Yes |
Carousel Bar Chart | No | Supported partially | Yes |
Carousel | No | Yes | No |
Arc Column Chart, Particle Counter, and 3D Flow on Globe Rich Text Component and Iframe Component | No | No | Yes |
Time Gear, Local Video, and Surveillance Video Components | No | No | No |
Function Detail
Interaction Event
Different types of components support different interaction events. Interaction events are divided into three types: After Initialization, Edit End, and Click.
Note: The configuration method for interaction events has been changed to event configuration and action configuration in the event in V2.10.0 and later versions.
After Initialization
The After Initialization event is a new event type added to the plugin of version 1.5.0, and can only be added to Chart and Widget.
Select the component, choose Interaction > Interaction Event > Add Event > After Initialization, and you can add JavaScript execution on the pop-up page.
Note: Only one After Initialization event is supported, and multiple JavaScript executions can be added under the same initialization event.
Edit End
The Edit End event is a new event type added to the plugin of V1.5.0, and can only be added to widgets.
Select the component, choose Interaction > Interaction Event > Add Event > Edit End, and you can add JavaScript executions on the pop-up page.
Note: Only one Edit End event can be added, and multiple JavaScript executions can be added in the same Edit End event.
Click
Select the component, choose Interaction > Interaction Event > Add Event > Click, and add an execution on the pop-up page.
Component Linkage, URL/Pop-up Box, JavaScript, Page Jump, Show/Hide, 3D Roaming Animation, 3D Model Animation, or Custom 3D Viewing Angle can be added in the event.
The following table shows the notes for Click.
Notes | Illustration |
If mltiple layers of data exist in a component such as Scene Map, Combination Map, Area Drill-down Map, Point Drill-down Map, and Custom Drill-down Map, you can add different types of events to different objects respectively. | For example, you can add events in Graphic or Drill-down Directory for a drill-down map, as shown in the following fugure.
|
Note: Multiple executions of the same type can be added in V1.16.0 and later versions. | |
| |
Note: Duplicate names are not supported between diferent events or between different executions in the same event. | |
When adding multiple events to a component, you need to select a triggering event. Note: In versions earlier than V2.10.0, you need to select the three event types of URL, Pop-up Box, and Page Jump for triggering. Other events can be triggered directly without being selected. | |
When multiple executions are added in the same event, multiple executions are triggered simultaneously. | / |
Carousel Setting
Select the component, choose Interaction > Carousel Setting. Custom Interval is supported, with a default value of 6000 ms.
Monitoring Refresh
Select the component, choose Interaction > Monitoring Refresh to refresh the component according to the time you set.
Enable Monitoring Refresh is not selected by default. When you select it, you can customize Refresh Interval, whose default value is 6 s, as shown in the following figure.
Summary of Interaction Examples
The following table shows all interaction properties supported by FVS.
Interaction Property | Description | Example | |
Click | Component Linkage | After Component Linkage is added, parameters can be passed to the template component to achieve more data display effects. | |
URL/Pop-up Box | By adding URL/Pop-up Box, you can trigger the opening of the URL or pop-up box of the corresponding element, achieving rich personalized content. | ||
JavaScript | Laboratory Function After adding the JavaScript script, you can executed the script to achieve rich personalized effects. | ||
Page Jump | After adding Page Jump, you can jump to the target page. | ||
Show/Hide | After adding a Show/Hide event, you can show or hide target objects. | ||
3D Roaming Animation | After setting the roaming path for the 3D city components and custom model components, you can set the roaming animation effect. | ||
3D Model Animation | Adding a 3D component animation can trigger the corresponding animation effect of the 3D City component. | Model Animation in 3D Scenes | |
Carousel Setting | Component Linkage | After enabling Automatic Carousel, you can add Component Linkage to pass parameters to template components according to the carousel effect, achieving more data display effects. | / |
3D Model Animation | After enabling Automatic Crousel, you can add 3D City Animation to trigger the corresponding animation effects of the 3D city component. | / | |
JavaScript | Laboratory Function After enabling Automatic Carousel, you can add JavaScript scripts to execute the set scripts and achieve rich personalized effects. | ||
Monitoring Refresh | / | Regularly refresh according to the set time. | / |
After Initialization Event (added in V1.5.0) | You can set After Initialization JavaScript event of Chart/Widget | ||
Load End Event (added in V1.5.0) | Can set the JavaScript event when the widget is loaded. | ||
Previous：FVS Cross-page Component Animation
