历史版本2 :图表特效接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

报表服务器版本功能变动
11.0.2

新增接口：

  • chart.getLayerIndex(); //获取钻取地图当前层级

  • chart.getLayerNames(); //获取钻取地图目录名称

  • chart.saveAsImage(); //图表导出为图片

  • chart.drillUp(index); // 向上钻取

1.2 功能简介

1）本文汇总的接口适用于 FineReport 所有的基础图表，且普通报表、决策报表、聚合报表均可以使用。

2）所有图表接口，均需在获取图表对象之后使用。

3）扩展图表 除 场景地图 有两个接口外，其他扩展图表均无接口可供前端开发使用。

4）移动端不支持「决策报表报表块中的图表」调用任何接口。

2. 获取图表对象编辑

方法

FR.Chart.WebUtils.getChart("chartID");  //获取图表块  

FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex);  //获取图表对象

参数说明

chartID 字符串类型，表示当前图表所在图表块的唯一标识 ID

chartIndex 数字型，表示一个图表块中不同的图表对象，从 0 开始计数

移动端支持部分 JS 调用
示例

决策报表中获取图表块对象：

var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);

点击查看文档：如何获取图表对象

3. 图表接口编辑

3.1 图表显示部分系列

方法
chart.setSeriesVisible();
参数说明

-

移动端支持
示例
var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
chart.setSeriesVisible([0,1]);//显示图表 chart0 的系列1和系列2

点击查看文档：图表显示部分系列接口

3.2 数据点提示轮播接口

方法
chart.openAutoTooltip([delay, initPoints]);
参数说明

delay 数据点提示的切换时间间隔，默认为 3s

initPoints 轮播数据点提示对应的数据点集合，默认为图表内所有数据点

移动端不支持
示例
var chart =FR.Chart.WebUtils.getChart("A3").getChartWithIndex(0);
// 获取单元格图表对象
chart.controller = vanchart.openAutoTooltip();
// 开启数据提示轮播，并将轮播控制器绑定到图表对象上

点击查看文档：图表开启自动数据点提示轮播接口

3.3 图表刷新接口

方法
chart.dataRefresh([chartIndex]);
参数说明chartIndex 数字型，表示一个图表块中不同的图表对象，从 0 开始计数
移动端支持
示例
var chart = FR.Chart.WebUtils.getChart("A3");//获取单元格图表
chart.dataRefresh([1,2]);//刷新图表块的第 2 个和第 3 个图表对象

点击查看文档：图表刷新接口

3.4 图表切换接口

方法

chart.showIndexChart(chartIndex);  //切换到指定图表对象

chart.switchCarouselChart(direction);  //切换到上一个（或下一个）图表对象

参数说明

chartIndex 数字型，表示一个图表块中不同的图表对象，从 0 开始计数

direction 表示图表切换的方向：1 表示切换到下一张图表，-1 表示切换到上一张图表，默认为 1

移动端支持
示例
FR.Chart.WebUtils.getChart("chart2").showIndexChart(2);

点击查看文档：图表切换接口

3.5 统一切换轮播图表接口

方法

VanCharts.unifiedSwitchCarouselChart(direction)

注：该方法中 VanCharts 指的是全局图表对象，无需再获取图表对象

参数说明direction 表示图表切换的方向：1 表示切换到下一张图表，-1 表示切换到上一张图表，默认为 1
移动端不支持
示例
VanCharts.unifiedSwitchCarouselChart(1);

点击查看文档：统一切换轮播图表接口

3.6 图表排序接口

方法
chart.sortChart(sortType);
参数说明sortType 表示排序规则，1 表示升序，-1 表示降序
移动端不支持
示例
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); 
chart.sortChart(); 

点击查看文档：图表排序接口

3.7 图表导出接口

方法
chart.saveAsImage();
参数说明-
移动端不支持
示例
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); 
chart.saveAsImage(); //导出为图片
点击查看文档：图表导出接口

3.8 地图缩放等级&中心点接口

方法

chart.setMapZoom({zoomLevel: 5, viewCenter: [110, 40]});  // 设置地图缩放等级和中心点

chart.getZoom();  // 获取缩放层级

chart.getCenter();  // 获取中心点

参数说明

zoomLevel 缩放等级，值区间一般在0-18。数值越大，层级越高，地图显示越细致，显示的经纬度范围越小

viewCenter 中心点，[经度，纬度]

移动端不支持
示例
var chart=FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
//获取单元格图表对象
chart.setMapZoom({zoomLevel:4, viewCenter: [118,32]});
//设置缩放等级为4和中心点的经纬度

点击查看文档：地图缩放等级接口

3.9 地图转移中心点

方法
chart.panTo(center);
参数说明center 中心点，[纬度，经度] 注：panTo 接口中「纬度」在前，「经度」在后
移动端不支持
示例
var chart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); 
chart.panTo([40,118]); //根据经纬度移动中心点 

点击查看文档：JS实现点击按钮转移地图中心点和钻取 

3.10 钻取到指定区域

方法

chart.drillDown(area); // 向下钻取

chart.drillUp(index); // 向上钻取

参数说明area 不是单纯的区域名，而是区域名下对应的一系列信息，可根据区域名获取到 area
移动端不支持
示例
const name = '江苏省'; // 指定下钻的区域名
let areas = [];
chart.series.forEach(ser => areas.push(...ser.points)); // 获取所有区域信息
const area = areas.filter(area => area.name == name)[0]; // 根据区域名获取区域信息
chart.drillDown(area); // 下钻到区域

点击查看文档：JS实现点击按钮转移地图中心点和钻取

3.11 获取钻取地图当前层级&钻取目录名称

方法

chart.getLayerIndex(); // 获取当前钻取层级，获取的层级从0开始：0、1、2……

chart.getLayerNames(); // 获取钻取目录名称，结果为数组，例如：["中国", "湖南省", "长沙市"]

参数说明-
移动端不支持
示例
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
var names = chart.getLayerNames(); //获取钻取目录层级名
alert(names);

点击查看文档：获取钻取地图当前层级接口