Weibw's FR

Appearance

精品课程 🔗

simpleprosimplepro

微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162

本教程视频讲解可以关注本人B站进行观看：次世代数据技术 同时，您也可以在抖音及微信视频号平台搜索次世代数据技术进行观看。

一、需求描述 ​

很多场景下，我们在使用图表开发时，原生自带的提示不能完全满足我们的需要，这时候就需要我们自己来实现一些提示效果。本文将带领大家一起实现一些效果。

注1：不支持移动端使用。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用过程中出现问题可以联系本作者。

二、实现步骤 ​

我们需要确定的一点是，我们的需求，无论是帆软原生通用和富文本都无法实现时，才会采用该方案。

这也就意味着，我们需要写一些JS代码，所以默认大家有一定的JS基础。

首先，我们其中一个图的提示改用自定义，并填入如下JS代码：

javascript
function() {
  console.log(this);
}
function() {
  console.log(this);
}

然后，我们预览一下报表，F12查看工作台。 这里我们需要重点关注几个属性

  • category：分类名
  • points：系列节点 visible：系列是否显示 color：系列颜色 seriesName：系列名 value：系列值

接下来，我们就利用以上属性来实现一些功能。

示例1：

javascript
function() {
  var points = this.points; //表示同一个分类的不同系列点     
  var result = this.category + "<br>";
  for (var i = 0, len = points.length; i < len; i++) {
    if (points[i].series.visible) {
      var val = points[i].value;
      if (points[i].seriesName == "增幅") {
        if (points[i].value > 0) {
          result += '' + "<font color='" + points[i].color + "'>↑</font>升:" + val + "<br>";
        }
        else if (points[i].value < 0) {
          result += '' + "<font color='" + points[i].color + "'>↓</font>降:" + val + "<br>";
        }
        else {
          result += '' + "<font color='" + points[i].color + "'></font>不变:" + val + "<br>";
        }
      }
      else {
        result += '' + "<font color='" + points[i].color + "'>●</font>" + points[i].seriesName + ':' + val + "<br>";
      }


    }
  }
  return result;
}
function() {
  var points = this.points; //表示同一个分类的不同系列点     
  var result = this.category + "<br>";
  for (var i = 0, len = points.length; i < len; i++) {
    if (points[i].series.visible) {
      var val = points[i].value;
      if (points[i].seriesName == "增幅") {
        if (points[i].value > 0) {
          result += '' + "<font color='" + points[i].color + "'>↑</font>升:" + val + "<br>";
        }
        else if (points[i].value < 0) {
          result += '' + "<font color='" + points[i].color + "'>↓</font>降:" + val + "<br>";
        }
        else {
          result += '' + "<font color='" + points[i].color + "'></font>不变:" + val + "<br>";
        }
      }
      else {
        result += '' + "<font color='" + points[i].color + "'>●</font>" + points[i].seriesName + ':' + val + "<br>";
      }


    }
  }
  return result;
}

此处的效果为： 1、当增幅属性的值大于0时，显示一个向上的箭头，且颜色为系列的颜色。再将系列名改为升字。 2、当增幅属性的值小于0时，显示一个向下的箭头，且颜色为系列的颜色。再将系列名改为降字。 3、当增幅属性的值等于0时，将系列名改为不变。 4、数量系列样式不变。

示例2：

javascript
 function() {
  var points = this.points; //获取到该分类下的所有系列点     
  var result =''; // 定义最终结果，并直接赋值分类名
  for (var i = 0, len = points.length; i < len; i++) {
    if (points[i].series.visible) {
       var val = FR.contentFormat(points[i].value, ' #0.0');
	   if(points[i].seriesName=="增幅"){
		   if(points[i].value>0){
			   result +=  '' + "<font color='red'>↑升</font>" +':' + val+"<br>";
		   }
		   else if(points[i].value<0){
			   result +=  '' + "<font color='green'>↓降</font>" + ':' + val+"<br>";
		   }
		   else{
			   result +=  '' + "<font color='" + points[i].color + "'></font>" + "不变"+ ':' + val+"<br>";
		   }
	   }
	   else{
		  result += '' + "<font color='" + points[i].color + "'>●</font>" + points[i].seriesName + ':' + val+"<br>"; 
	   }
	   
		   
       
    }
  }
  result+=this.category+"<br>";
  return result;
}
 function() {
  var points = this.points; //获取到该分类下的所有系列点     
  var result =''; // 定义最终结果，并直接赋值分类名
  for (var i = 0, len = points.length; i < len; i++) {
    if (points[i].series.visible) {
       var val = FR.contentFormat(points[i].value, ' #0.0');
	   if(points[i].seriesName=="增幅"){
		   if(points[i].value>0){
			   result +=  '' + "<font color='red'>↑升</font>" +':' + val+"<br>";
		   }
		   else if(points[i].value<0){
			   result +=  '' + "<font color='green'>↓降</font>" + ':' + val+"<br>";
		   }
		   else{
			   result +=  '' + "<font color='" + points[i].color + "'></font>" + "不变"+ ':' + val+"<br>";
		   }
	   }
	   else{
		  result += '' + "<font color='" + points[i].color + "'>●</font>" + points[i].seriesName + ':' + val+"<br>"; 
	   }
	   
		   
       
    }
  }
  result+=this.category+"<br>";
  return result;
}

此处的效果为： 1、当增幅属性的值大于0时，显示一个向上的箭头，再将系列名改为升字，且颜色为红色。。 2、当增幅属性的值小于0时，显示一个向下的箭头，再将系列名改为降字，且颜色为绿色。 3、当增幅属性的值等于0时，将系列名改为不变。 4、数量系列样式不变。 5、分类名放在最下方。 6、将所有系列的值保留一位小数。

示例3：

javascript
function() {
  var points = this.points; //表示同一个分类的不同系列点     
  var result = this.category + "<br>";
  for (var i = 0, len = points.length; i < len; i++) {
    if (points[i].series.visible) {
      var val = points[i].value;
      if (points[i].seriesName == "增幅") {
        if (points[i].value > 0) {
          result += '' + "<font color='" + points[i].color + "'>↑</font>升:" + val + "<br>";
        }
        else if (points[i].value < 0) {
          result += '' + "<font color='" + points[i].color + "'>↓</font>降:" + val + "<br>";
        }
        else {
          result += '' + "<font color='" + points[i].color + "'></font>不变:" + val + "<br>";
        }
      }
      else {
        result += '' + "<font color='" + points[i].color + "'>●</font>" + points[i].seriesName + ':' + val + "<br>";
      }
      


    }
  }
  var je = FR.remoteEvaluate("=value('ds1','金额','月度','" + this.category + "')");
  result += '' + "<font color='yellow'>●</font>金额:" + je + "<br>";
  return result;
}
function() {
  var points = this.points; //表示同一个分类的不同系列点     
  var result = this.category + "<br>";
  for (var i = 0, len = points.length; i < len; i++) {
    if (points[i].series.visible) {
      var val = points[i].value;
      if (points[i].seriesName == "增幅") {
        if (points[i].value > 0) {
          result += '' + "<font color='" + points[i].color + "'>↑</font>升:" + val + "<br>";
        }
        else if (points[i].value < 0) {
          result += '' + "<font color='" + points[i].color + "'>↓</font>降:" + val + "<br>";
        }
        else {
          result += '' + "<font color='" + points[i].color + "'></font>不变:" + val + "<br>";
        }
      }
      else {
        result += '' + "<font color='" + points[i].color + "'>●</font>" + points[i].seriesName + ':' + val + "<br>";
      }
      


    }
  }
  var je = FR.remoteEvaluate("=value('ds1','金额','月度','" + this.category + "')");
  result += '' + "<font color='yellow'>●</font>金额:" + je + "<br>";
  return result;
}

此处的效果为： 在示例1的基础上，增加了第三个属性数量的对应的值的显示。

通过以上三个例子，我们基本可以熟练掌握自定义的方法了，大家可以根据更多的属性进行千变万化的提示方案。

四、模板文件下载 ​

如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。

如果您觉得内容还不错，可以点击打赏按钮支持我

如果您在阅读及使用过程中发现问题，或如果您有不理解的地方，都可以点击下方按钮与我沟通交流

首页 精品课程 帆软社区 我的小伙伴们
Copyright © 2019-present weibw 豫ICP备2023024804号