JS实现自定义水球图

  • 文档创建者:dashixionglihai
  • 编辑次数:3次
  • 最近更新:Leo.Tsai 于 2019-12-03
  • 1. 概述

    1.1 应用场景

    FineReport 扩展图表插件支持展现百分比数据的水球图,详细介绍可参见文档:水球图。但是如果用户想要自定义一个简单的水球图,也是可以通过 JS 代码实现的。

    示例中的自定义水球图效果如下图所示:

    12821CBE-255E-4D51-A3EA-2AB098AE6DEC.GIF

    1.2 功能介绍

    • 根据指标值和目标值计算并展示百分比,水平面随百分比数据变化。

    • 支持在百分比数据上方自定义标题信息。

    • 只能显示单条百分比数据,不支持轮播效果,但扩展图表插件那个水球图是支持轮播的。

    • 字体、水纹和边框的颜色支持自定义,修改相应的 JS 代码即可。

    2. 示例

    2.1 报表设计

    1)新建一个空白的决策报表,body 的样式改为黑色背景色,布局方式改为绝对布局,缩放逻辑为固定大小,将绝对画布块拖拽到报表设计主体 body 中。

    Snag_244b7ce9.png

    2)绝对画布块缩放逻辑改为固定大小,调整好它的位置和大小,点击编辑按钮,在绝对画布块中添加一个报表块。

    Snag_2435e64c.png

    3)如下图设计插入的报表块

    Snag_2438f85f.png

    4)报表块的名称要改为report,然后不勾选可见

    注:百分比数据=指标值/目标值。

    Snag_243d7a3d.png

    2.2 引入JS文件

    1)下载文件:canvas.js,并将该 JS 文件放置到%FR_HOME%\webapps\webroot\help\css\目录下。

    2)菜单栏点击服务器>服务器配置>引用JavaScript,引用刚刚的 JS 文件。

    Snag_2446b3df.png

    2.3 添加JS事件

    1)选中决策报表主体form,添加一个初始化事件,JS 代码如下:

    var head = document.getElementsByTagName('head')[0];
    if(!isInclude("canvas.js")){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'css/canvas.js';
    head.appendChild(script);
    }
    function isInclude(name){
    var js= /js$/i.test(name);
    var es=document.getElementsByTagName(js?'script':'link');
    for(var i=0;i<es.length;i++)
    if(es[i][js?'src':'href'].indexOf(name)!=-1)return true;
    return false;
    }
    window._form = this.options.form;

    Snag_2449c1db.png

    2)选中绝对画布块absolute0,添加一个初始化事件,JS 代码如下:

    var minVal = FR.remoteEvaluate('=report~A2');
    var maxVal = FR.remoteEvaluate('=report~B2');
    var timer = setInterval(function(){
    if(typeof runcanvas !== "function"){
    return false;
    }
    clearInterval(timer);
    runcanvas({"minVal":minVal[0],"maxVal":maxVal[0],
    "absolute":"ABSOLUTE0","wordStyle":"20px bold 微软雅黑",
    "wordColor":"#ffffff",
    "aColor":["#329FFF","rgba(50,159,255,.6)"],
    "bColor":['rgba(50,159,255,.3)','rgba(50,159,255,.3)'],
    "lineColor":"#329FFF",
    "name":"自定义水球图","nameStyle":"15px normal 微软雅黑",
    "nameColor":"#ffffff"
    });
    },100);
    var t;
    $(window).resize(function(){
    clearInterval(t);
    t = setInterval(function(){
    runcanvas({"minVal":minVal[0],"maxVal":maxVal[0],
    "absolute":"ABSOLUTE0","wordStyle":"20px bold 微软雅黑",
    "wordColor":"#ffffff",
    "aColor":["#329FFF","rgba(50,159,255,.6)"],
    "bColor":['rgba(50,159,255,.3)','rgba(50,159,255,.3)'],
    "lineColor":"#329FFF",
    "name":"自定义水球图","nameStyle":"15px normal 微软雅黑",
    "nameColor":"#ffffff"
    });
    clearInterval(t);
    },300);
    })

    Snag_24500e87.png

    2.4 效果预览

    保存报表,点击表单预览,自定义水球图效果如下图所示:

    12821CBE-255E-4D51-A3EA-2AB098AE6DEC.GIF

    注:不支持移动端预览。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现自定义水球图.frm

    点击下载模板:JS实现自定义水球图.frm

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!