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

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

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

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

2. 示例
2.1 普通报表

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

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

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

JS代码如下：

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

复制代码

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

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

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

JS 代码如下：

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

复制代码

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