「表单JS实例」JS实现自定义水球图

1. 概述
1.1 应用场景

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

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

1.2 功能介绍

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

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

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

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

  
  

2. 示例
2.1 报表设计

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

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

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

4）报表块的名称要改为report，然后不勾选可见。

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

2.2 引入JS文件

1）下载文件：canvas.js，下载见附件。

并将该 JS 文件放置到%FR_HOME%\webapps\webroot\help\css\目录下。

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

2.3 添加JS事件

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

1. var head = document.getElementsByTagName('head')[0];
   
2. if(!isInclude("canvas.js")){
   
3. var script = document.createElement('script');
   
4. script.type = 'text/javascript';
   
5. script.src = 'css/canvas.js';
   
6. head.appendChild(script);
   
7. }
   
8. function isInclude(name){
   
9. var js= /js$/i.test(name);
   
10. var es=document.getElementsByTagName(js?'script':'link');
    
11. for(var i=0;i<es.length;i++)
    
12. if(es[js?'src':'href'].indexOf(name)!=-1)return true;
    
13. return false;
    
14. }
    
15. window._form = this.options.form;

复制代码

2）选中绝对画布块absolute0，添加一个初始化事件，JS 代码如下：

1. var minVal = FR.remoteEvaluate('=report~A2');
   
2. var maxVal = FR.remoteEvaluate('=report~B2');
   
3. var timer = setInterval(function(){
   
4. if(typeof runcanvas !== "function"){
   
5. return false;
   
6. }
   
7. clearInterval(timer);
   
8. runcanvas({"minVal":minVal[0],"maxVal":maxVal[0],
   
9. "absolute":"ABSOLUTE0","wordStyle":"20px bold 微软雅黑",
   
10. "wordColor":"#ffffff",
    
11. "aColor":["#329FFF","rgba(50,159,255,.6)"],
    
12. "bColor":['rgba(50,159,255,.3)','rgba(50,159,255,.3)'],
    
13. "lineColor":"#329FFF",
    
14. "name":"自定义水球图","nameStyle":"15px normal 微软雅黑",
    
15. "nameColor":"#ffffff"
    
16. });
    
17. },100);
    
18. var t;
    
19. $(window).resize(function(){
    
20. clearInterval(t);
    
21. t = setInterval(function(){
    
22. runcanvas({"minVal":minVal[0],"maxVal":maxVal[0],
    
23. "absolute":"ABSOLUTE0","wordStyle":"20px bold 微软雅黑",
    
24. "wordColor":"#ffffff",
    
25. "aColor":["#329FFF","rgba(50,159,255,.6)"],
    
26. "bColor":['rgba(50,159,255,.3)','rgba(50,159,255,.3)'],
    
27. "lineColor":"#329FFF",
    
28. "name":"自定义水球图","nameStyle":"15px normal 微软雅黑",
    
29. "nameColor":"#ffffff"
    
30. });
    
31. clearInterval(t);
    
32. },300);
    
33. })

复制代码

2.4 效果预览

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

注：不支持移动端预览。

3. 模板下载

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

下载模板见附件

貌似FR8下无法实现

扩展图标这个插件也可以实现水球图

我想看看附件内容

附件呢老哥