FR--JS基础

1图表————二次开发
1.1图表样式自定义————标题/标签/提示/坐标轴
1.1.1标题
图表->样式->标题->文本：<font color='#00AEFF'>图表1</font>表名
方式：HTML(注：使用html解析文本内容，不可使用报表公式)
导出限制:
仅支持标签：<b>、<strong>、<i>、<em>、<br/>、<span>
仅对<span>支持内联样式
仅支持内联样式：font-size、font-family、font-style、font-weight、color（font-weight设置加粗时，仅支持bold，不支持bolder）
导出的 HTML 文本仅支持水平显示，不支持旋转
不支持标签的嵌套格式，例如：<span>父节点<span>子节点</span></span>
1.1.2标签
1、自定义条形图标签为图片：
注1：this.value==_g().getCellValue("J1") 即获取单元格 J1 的内容；标签值等于 J1 时，标签显示为固定图片 top1-18.png，以此类推。
注2：可通过 HTML 设置标签内容在大小范围内上下左右居中显示，当标签内容在定义的大小范围内无法完全显示时，截断显示。
注3：代码中使用的图片保存在 %FR_HOME%\webapps\webroot\help\picture 文件夹下，由于前三名使用的图片比其他图片的尺寸大很多，所以在代码中对前三名的图片使用 width="62" height="50" 定义了宽高。
注4：
普通报表：this.value==_g().getCellValue("J1")
决策报表：this.value==_g().getWidgetByName("report0").getCellValue("J1")
图表->样式->标签->内容->自定义：
方法1：
function(){
if(this.value==_g().getCellValue("J1")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getCellValue("J2")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getCellValue("J3")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" width="62" height="50"></td> </tr></table>';
else if(this.value==_g().getCellValue("J4")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J5")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J6")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J7")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J8")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
else if(this.value==_g().getCellValue("J9")) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
else return this.value;
}
方法1：
function(){return'<p><img src ="../../help/picture/emoji/'+this.category+'.gif" width="30" height="30" align="middle"></p>';}
2、自定义提示为图片：
注：代码中使用的图片保存在 %FR_HOME%\webapps\webroot\help\picture\Fruits 文件夹下
图表->样式->提示->内容->自定义：
function(){return'<p><img src ="../../help/picture/Fruits/'+this.seriesName+'.png" width="60" height="60" align="middle"></p>';}
3、自定义标签求占比
已有功能：同分类多个系列求占比
需求功能：不同分类单个系列求占比
注：FR.contentFormat 可以对数值格式进行自定义，#0% 即自定义的格式，可根据实际情况替换。
图表->样式->标签->内容->自定义：
function() {
var points = this.series.points; //获取当前系列所有的数据点
var total = 0;
for (var i = 0, len = points.length; i < len; i++) {
total += points[i].value; //求分类下的系列和
}
return FR.contentFormat(this.value/total, '#0%'); //求占比
}
4、自定义标签为系列和
注：适用于堆积柱形图/堆积条形图。
已有功能：一个分类下多个系列标签分别显示
需求功能：同一分类下多个系列标签汇总显示
图表->样式->标签->内容->自定义：
function sumLabel(){
const point = this;
const points = point.points;
const validPoints = points.filter( (point) => point.isVisible() );
if(point == validPoints[validPoints.length - 1]){
// validPoints.length 表示一个分类下共有多少个系列， validPoints.length - 1 表示汇总值显示在顶部（最后一个系列）
// 若想要汇总值显示在底部，则是0
let value = 0;
//同一分类下所有系列均求和
for(let i = 0; i < validPoints.length; i++){
value += validPoints[i].value;
}
return value;
} else {
return "";
}
}
5、自定义提示显示系列和
function sumOfPoints() {
const point = this;
const points = this.points;
const len = points.length;
if (point == points[len - 1]) {
let sum = 0;
for (let i = 0; i < len; i++) {
if (point.isVisible()){
sum += points[i].value;
}
}
return sum;
}
return point.value;
}
6、自定义标签显示系列色
function(){return '<span style="color:'+this.color+';">'+this.value+'</span>';}
7、自定义提示点样式
注：显示表格状
function() {
return '<h3 align="center">'
+ this.category +
'</h3><table border="1" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF"><tr><td style="color:white;"> 产品 </td><td style="color:white;">'
+ this.seriesName +
'</td></tr><tr><td style="color:white;"> 销量 </td><td style="color:white;">'
+ this.value +
'</td></tr></table>';
}
8、提示点获取数据集数据
注:代码中使用的 FR.remoteEvaluate 脚本调用存在限制，需要点击设计器菜单栏的「服务器>报表平台管理」进入数据决策系统，在「管理系统>安全管理>安全防护」中关闭 脚本调用公式限制 。
function(){
var per=(FR.remoteEvaluate("value('ds1',3,1,'"+this.category+"')")*100).toFixed(0);
//获取数据集 ds1 内的第三列，且与该列对应的第一列的值是 this.category
return "区间： "+this.category+"<br>客户数： "+this.value+"家 &nbsp&nbsp 较昨日 "+
(per<0?"<font color='#ea4431'>▼</font>&nbsp":"<font color='#16c153'>▲</font>&nbsp")+Math.abs(per)+"%";
//per小于0时显示红色倒三角图标，per大于0时显示绿色正三角图标，并对per取绝对值
}
9、提示点获取单元格数据
普通报表：var value1 = _g().getCellValue(id1);
决策报表：var value1 = _g().getWidgetByName("report0").getCellValue(id1);
function() {
//获取A2扩展所有值
var a = [];
//i<14 需要提前知道单元格扩展出来有多少值，这里有12个值，又是从A2单元格开始，故最大的单元格行号为13，需设置i小于14
for (i = 1; i < 14; i++) {
var str = "A";
var id1 = str + i;
var value1 = _g().getCellValue(id1);
a.push(value1);
}
//获取B2扩展所有值
var b = [];
for (i = 1; i <14; i++) {
var str = "B";
var id2 = str + i;
var value2 = _g().getCellValue(id2);
b.push(value2);
}
//获取C2扩展所有值
var c = [];
for (i = 1; i < 12; i++) {
var str = "C";
var id3 = str + i;
var value3 = _g().getCellValue(id3);
c.push(value3);
}
var len = a.length;
for (i = 0; i < len; i++) {
if (this.name == a[i]) {
return '月份：'+a[i]+' 占比：'+b[i]+' 同比：'+c[i]; }
}
}
}
10、提示点显示所有系列
function(){
var points = this.points; //表示同一个分类的不同系列点
var a =this.category;
var b;
for(var i = 0, len = points.length; i < len; i++){
if(points[i].series.visible){
if(this.points[i].seriesName=="Rainfall")
b = FR.contentFormat(this.points[i].value, '#0mm');
else if(this.points[i].seriesName=="Sea-LevelPressure")
b = FR.contentFormat(this.points[i].value, '#0mb');
else
b = FR.contentFormat(this.points[i].value, '#0℃');
a += '<br/>'+"<font color='"+points[i].color+"'>●</font>"+points[i].seriesName+':'+b;
}
}
return a;
}
11、分类坐标周显示数值指标
function(){
//value函数返回百分比数据，返回经过计算的公式的结果
var a=(FR.remoteEvaluate("value('ds2',2,1,'" + this+ "')")*100).toFixed(1);
//轴标签同时显示分类名和百分比，且韩文和张武的轴标签为红色
if(this=='韩文'||this=='张武'){
return "<font color='red'>"+this+"："+a+"%"+"</font>"
}else{
return this+"："+a+"%";
}
}
1.1.3常见HTML用法
1、单个标签的单行显示效果：
<span style="color:blue;">新建图表标题</span>
<b>新建图表标题</b>
<i>新建图表标题</i>
<span style="font-size:16px; font-family:Verdana; font-style:italic; font-weight:bold; color: #00f;">新建图表标题</span>
2、单个标签的换行显示效果：
<span style="color:blue;">新建<br>图表标题</span>
<span style="color:blue;">新建<br>图表<br>标题</span>
<em>新建图<br>表标题</em>
3、多个标签单行显示：
<b>新建</b><i>图表</i>
<b>新建</b><i>图表</i><em>标题</em>
<span style="color:blue;">新建</span><i>图表</i><em>标题</em>
4、多个标签换行显示：
<b>新建<br>图表</b><br>
<b>新建<br>图表</b><br><em>标题</em>
<b>新建</b><i>图表</i><br><em>标题</em>

1.2图表接口/对象属性
1.2.1获取图表对象
新增接口：
chart.getLayerIndex(); //获取钻取地图当前层级
chart.getLayerNames(); //获取钻取地图目录名称
chart.saveAsImage(); //图表导出为图片
chart.drillUp(index); // 向上钻取
方法：
FR.Chart.WebUtils.getChart("chartID"); //获取图表块
FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex); //获取图表对象
参数说明：
chartID 字符串类型，表示当前图表所在图表块的唯一标识 ID
chartIndex 数字型，表示一个图表块中不同的图表对象，从 0 开始计数
决策报表中获取图表块对象：
var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
获取图表对象：
单元格：FR.Chart.WebUtils.getChart("A1") chartID 为图表所在单元格，如：A1
悬浮元素：FR.Chart.WebUtils.getChart("Float1") chartID 为悬浮元素的名称，选中悬浮元素，单击鼠标右键「设置悬浮名称」可查看或修改悬浮元素名称
决策报表图表块：FR.Chart.WebUtils.getChart("chart0") 决策报表内添加的图表块组件，chartID 为组件名称
决策报表报表块中单元格图表：FR.Chart.WebUtils.getChart("A1","report0") 决策报表内有多个报表块时，获取报表块中的图表

注：当设置了图表切换，即一个图表块内有多个图表时，需要传入具体的 chartIndex 来获取具体的图表对象。
chartIndex 从 0 开始计数，这就意味着如果想获取第 n 个图表，那么传入的 chartIndex 应该为 n-1。
FR.Chart.WebUtils.getChart(chartID).getChartWithIndex(chartIndex)
获取系列对象：
注：chart.series[seriesIndex]
var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
console.log(PieChart.series[0]);
获取数据点对象
注：series.points[pointIndex]
//获取第一个系列下的所有数据点集合
var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
var points = [];
PieChart.series.forEach(function (ser){
points = points.concat(ser.points);
})
console.log(points);
数据点对象的属性：
point.name:数据点的名称
point.seriesName:数据点对应的系列名称
point.category:数据点对应的分类名
point.value:数据点的值
point.isVisible:判断数据点是否可见
chart.showTooltip(point):触发数据点提示
案例：筛选值大于 0.1 的数据点的集合
var PieChart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(2);
var points = [];
PieChart.series.forEach(function (ser){
points = points.concat(ser.points);
})
points = points.filter(function (p){ return p.value > 0.1; })
1.2.2图表接口
1、图表显示部分系列：
chart.setSeriesVisible();
2、数据点提示轮播接口：
chart.openAutoTooltip([delay, initPoints]);
delay 数据点提示的切换时间间隔，默认为 3s
initPoints 轮播数据点提示对应的数据点集合，默认为图表内所有数据点
注1：在调用该方法时，可绑定一个用于关闭自动轮播数据点提示的控制器 controller，通过controller.stop()方法，即可停止当前的轮播数据点提示自动播放，如下表所示：
var controller = chart.openAutoTooltip()//开启自动数据点提示轮播
controller.stop()//停止自动轮循播放数据点提示
controller.moveOn()//继续从停止位置播放数据点提示轮播
注2：该接口不支持扩展图表，不支持移动端。
方法1：
var chart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 获取单元格图表对象
chart.controller = vanchart.openAutoTooltip();
// 开启数据提示轮播，并将轮播控制器绑定到图表对象上
方法2：
var vanchart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);//获取图表对象
var points = [];
vanchart.series.forEach(function (ser){
points = points.concat(ser.points);//获取所有的数据提示点
})
points = points.filter(function (p){
return p.value > 400;//筛选大于 400 的数据提示点
})
var delay=2000; //切换时间间隔为2秒
vanchart.controller = vanchart.openAutoTooltip(delay,points);//开启数据点提示轮播, 并将轮播控制器绑定到图表对象上
方法3:初始化后直接轮播
setTimeout(function(){
var vanchart =FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);//获取图表对象
vanchart.openAutoTooltip();// 开启数据提示轮播
},3000)
3、图表刷新接口：
chart.dataRefresh([chartIndex]);
注1：该接口不支持扩展图表。
注2：该接口支持移动端，但移动端决策报表的报表块内图表不支持调用该接口。
方法：
var chart = FR.Chart.WebUtils.getChart("A3");//获取单元格图表
chart.dataRefresh([1,2]);//刷新图表块的第 2 个和第 3 个图表对象
4、图表切换接口
chart.showIndexChart(chartIndex); //切换到指定图表对象
chart.switchCarouselChart(direction); //切换到上一个（或下一个）图表对象
chartIndex 数字型，表示一个图表块中不同的图表对象，从 0 开始计数
direction 表示图表切换的方向：1 表示切换到下一张图表，-1 表示切换到上一张图表，默认为 1
5、钻取到指定区域
chart.drillDown(area); // 向下钻取
chart.drillUp(index); // 向上钻取
方法1：
const name = '江苏省'; // 指定下钻的区域名
let areas = [];
chart.series.forEach(ser => areas.push(...ser.points)); // 获取所有区域信息
const area = areas.filter(area => area.name == name)[0]; // 根据区域名获取区域信息
chart.drillDown(area); // 下钻到区域
6、获取钻取地图当前层级&钻取目录名称
chart.getLayerIndex(); // 获取当前钻取层级，获取的层级从0开始：0、1、2……
chart.getLayerNames(); // 获取钻取目录名称，结果为数组，例如：["中国", "湖南省", "长沙市"]
方法：
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
var names = chart.getLayerNames(); //获取钻取目录层级名
alert(names);
7、改变图表参数重新赋值
FR.Chart.WebUtils.changeParameter({ chartID:'chartID', para: {参数名: 参数值}})
方法：
FR.Chart.WebUtils.changeParameter({chartID: 'chart1',para: {area: '华东'}})
1.2.3图比属性
1、this->当前是啥指代啥
2、this.category:数据点当前分类
3、this.categoryNames:数据点当前所有分类
4、this.series：数据点当前系列
5、this.points：当前系列所有数据点
6、this.name:当前属性名
7、this.type:当前系列图表类型
8、this.value:当前属性值

1.3ECharts图表
1.3.1echarts图表插件，代码自定义个性化图表。
步骤：
1、安装ECharts插件（设计器、服务器）
2、插入ECharts图表
3、编辑数据集；编辑ECharts配置，添加数据结构->二维数组结构->定义数据集和字段->完成
4、代码编辑器->编写JS代码，制作数据展示代码
1.3.2案例
1、ECharts图表实现系列条件显示
https://help.fanruan.com/finereport/doc-view-4424.html
用柱形图展示产品的成本价和单价数据，且柱子带有背景。
系列为成本价时显示标签，单价不显示标签。
「成本价>40」时，成本价系列显示为红色；「单价>成本价 * 2」时，单价系列显示为黄色。
代码：
var TABLE_DATA = getData("data1");
var seriesNames = TABLE_DATA[0].slice(1); // 获取系列名
var columnValues = TABLE_DATA.slice(1);
var categoryNames = columnValues.map(function(value){
return value[0];
}); // 获取分类名
// 根据系列名和值配置series
var series = seriesNames.map(function(seriesName, index){
var seriesDatas = columnValues.map(function(item) {
// 可以在这里面做一些个性化样式配置（即条件显示）
var seriesValue = item[index + 1];
var serData = {
value: seriesValue,
};
// 系列名为成本价时显示标签并且成本价大于40时柱子颜色显示为红色
if (seriesName === "成本价") {
serData.label = {
show: true,}
if (seriesValue > 40) {
serData.itemStyle = {
color: '#ff0000'}
}
} else {
// 系列名为单价，当单价大于成本价的两倍时，柱子颜色显示为黄色
if (seriesValue > item[1] * 2) {
serData.itemStyle = {
color: '#ffff00'}
}
}
return serData;
});
return {
type: "bar",
name: seriesName,
data: seriesDatas,
showBackground: true, // 显示柱子背景
backgroundStyle: { // 配置柱子背景的颜色
color: 'rgba(180, 180, 180, 0.2)'
}
};
});

option = {
legend: {},
tooltip: {},
xAxis: {
type: "category",
data: categoryNames,
},
yAxis: {},
series: series,
};
2、ECharts图表实现旭日图
3、参数查询联动ECharts图表
4、单元格联动ECharts图表
5、ECharts图表联动其他组件
6、ECharts图表实现动态参数联动效果
7、ECharts图表实现定时刷新