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

  • 文档创建者:axing
  • 编辑次数:7次
  • 最近更新:Leo.Tsai 于 2020-03-17
  • 1. 概述

    1.1 预期效果

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

    C1AE3FBB-7C77-4A8A-9124-B30DCBEF7B96.GIF

    1.2 实现思路

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

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

    2. 示例

    2.1 普通报表

    1)新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量

    image.png

    2)合并一片区域单元格并插入一个饼图,如下图绑定图表数据:

    image.png

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

    image.png

    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)给饼图添加一个初始化后事件,如下图所示:

    光标1.jpg

    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 是图表块的组件名,注意全部要大写。

    3. 模板下载

    已完成模板可参见:

    %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

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!