Customize the Cursor Hovering Over the Chart-FineReport Help Document

Last update： 2021-03-04

I. Overview

1. Expected effect

When the mouse is moved to the series of the chart, it is hoped that an eye-catching cursor will appear to prompt the user to operate, as shown in the following figure:

2. Implementation ideas

Use JS to set the cursor as a custom picture, rename the custom picture cursor.png to「cursor.cur」, and put it in the %FR_HOME%\webapps\webroot\help\picture directory.

Note: The image format must be .cur or .ani format.

II. Example

1. New General Report

1) Create a New General Report, create a new data set ds1, the database query statement is: SELECT * FROM Sales_Volume

2) Merge a range of cells and insert a pie chart, as shown in the figure below to bind the chart data:

3) In the menu bar, select Template>Web Attributes>Pagination Preview>Individually set for the template, and then add a Loading End event, as shown in the following figure:

The JS code is as follows:

setTimeout(function(){
$("td[id^=A1-]").find("path").bind('mouseover',function(){ 
     this.style.cursor="url('../../help/picture/cursor.cur'),pointer";
})
},1000)

Note: A1 in td[id^=A1-] is the cell where the chart is located.

2. Decision-making Report

1) Drag the pie chart into the main body of the decision-making report design, and bind the chart data according to II.1.

2) Add a After Initialization event to the pie chart, as shown in the following figure:

The JS code is as follows:

setTimeout(function(){
$("div[widgetname=CHART0]").find("path").bind('mouseover',function(){ 
     this.style.cursor="url('../../help/picture/cursor.cur'),pointer";
})
},1000)

Note: CHART0 in div[widgetname=CHART0] is the component name of the chart block, pay attention to all capitals.