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.
III. Template download
The completed template can be found in:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Customize the Cursor Hovering Over the Chart Example 1.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Primary\Chart\Customize the Cursor Hovering Over the Chart Example 2.frm
Click to download the template:
Customize the Cursor Hovering Over the Chart Example 1.cpt
Customize the Cursor Hovering Over the Chart Example 2.frm
Custom picture download: