自定义鼠标悬浮在图表上的光标

1.1 预期效果

当鼠标移动到图表的系列上时，希望能够出现醒目的光标，以提示用户进行操作，如下图所示：

1.2 实现思路

使用 JS 将光标设置为自定义图片，将自定义图片 cursor.png 重命名为「cursor.cur」，然后放到%FR_HOME%\webapps\webroot\help\picture目录下。

注：图片格式必须为 .cur 或 .ani 格式。

2.1 普通报表

1）新建数据集 ds1，数据库查询语句为：SELECT * FROM 销量

2）合并一片区域单元格并插入一个饼图，如下图绑定图表数据：

3）菜单栏选择模板>模板Web属性>分页预览设置>为该模板单独设置，然后添加一个加载结束事件，如下图所示：

JS代码如下：

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

注：td[id^=A1-] 中的 A1 为图表所在单元格。

2.2 决策报表

1）将饼图拖入到决策报表设计主体中，按照2.1绑定图表数据。

2）给饼图添加一个初始化后事件，如下图所示：

JS 代码如下：

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

注：div[widgetname=CHART0] 中的 CHART0 是图表块的组件名，注意全部要大写。

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\自定义鼠标悬浮在图表上的光标示例一.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\自定义鼠标悬浮在图表上的光标示例二.frm

点击下载模板：

自定义鼠标悬浮在图表上的光标示例一.cpt

自定义鼠标悬浮在图表上的光标示例二.frm

自定义图片下载：

cursor.png