1. 概述编辑
1.1 版本
报表服务器版本 | 功能变动 |
---|---|
11.0.2 | 新增接口:
|
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 调用 |
示例 | 决策报表中获取图表块对象:
点击查看文档:如何获取图表对象 |
3. 图表接口编辑
3.1 图表显示部分系列
方法 | chart.setSeriesVisible(); |
---|---|
参数说明 | - |
移动端 | 支持 |
示例 |
点击查看文档:图表显示部分系列接口 |
3.2 数据点提示轮播接口
方法 | chart.openAutoTooltip([delay, initPoints]); |
---|---|
参数说明 | delay 数据点提示的切换时间间隔,默认为 3s initPoints 轮播数据点提示对应的数据点集合,默认为图表内所有数据点 |
移动端 | 不支持 |
示例 |
点击查看文档:图表开启自动数据点提示轮播接口 |
3.3 图表刷新接口
方法 | chart.dataRefresh([chartIndex]); |
---|---|
参数说明 | chartIndex 数字型,表示一个图表块中不同的图表对象,从 0 开始计数 |
移动端 | 支持 |
示例 |
点击查看文档:图表刷新接口 |
3.4 图表切换接口
方法 | chart.showIndexChart(chartIndex); //切换到指定图表对象 chart.switchCarouselChart(direction); //切换到上一个(或下一个)图表对象 |
---|---|
参数说明 | chartIndex 数字型,表示一个图表块中不同的图表对象,从 0 开始计数 direction 表示图表切换的方向:1 表示切换到下一张图表,-1 表示切换到上一张图表,默认为 1 |
移动端 | 支持 |
示例 |
点击查看文档:图表切换接口 |
3.5 统一切换轮播图表接口
方法 | VanCharts.unifiedSwitchCarouselChart(direction) 注:该方法中 VanCharts 指的是全局图表对象,无需再获取图表对象 |
---|---|
参数说明 | direction 表示图表切换的方向:1 表示切换到下一张图表,-1 表示切换到上一张图表,默认为 1 |
移动端 | 不支持 |
示例 |
点击查看文档:统一切换轮播图表接口 |
3.6 图表排序接口
方法 | chart.sortChart(sortType); |
---|---|
参数说明 | sortType 表示排序规则,1 表示升序,-1 表示降序 |
移动端 | 不支持 |
示例 |
点击查看文档:图表排序接口 |
3.7 图表导出接口
方法 | chart.saveAsImage(); |
---|---|
参数说明 | - |
移动端 | 不支持 |
示例 | 点击查看文档:图表导出接口 |
3.8 地图缩放等级&中心点接口
方法 | chart.setMapZoom({zoomLevel: 5, viewCenter: [110, 40]}); // 设置地图缩放等级和中心点 chart.getZoom(); // 获取缩放层级 chart.getCenter(); // 获取中心点 |
---|---|
参数说明 | zoomLevel 缩放等级,值区间一般在0-18。数值越大,层级越高,地图显示越细致,显示的经纬度范围越小 viewCenter 中心点,[经度,纬度] |
移动端 | 不支持 |
示例 |
点击查看文档:地图缩放等级接口 |
3.9 地图转移中心点
方法 | chart.panTo(center); |
---|---|
参数说明 | center 中心点,[纬度,经度] 注:panTo 接口中「纬度」在前,「经度」在后 |
移动端 | 不支持 |
示例 |
点击查看文档:JS实现点击按钮转移地图中心点和钻取 |
3.10 钻取到指定区域
方法 | chart.drillDown(area); // 向下钻取 chart.drillUp(index); // 向上钻取 |
---|---|
参数说明 | area 不是单纯的区域名,而是区域名下对应的一系列信息,可根据区域名获取到 area |
移动端 | 不支持 |
示例 |
点击查看文档:JS实现点击按钮转移地图中心点和钻取 |
3.11 获取钻取地图当前层级&钻取目录名称
方法 | chart.getLayerIndex(); // 获取当前钻取层级,获取的层级从0开始:0、1、2…… chart.getLayerNames(); // 获取钻取目录名称,结果为数组,例如:["中国", "湖南省", "长沙市"] |
---|---|
参数说明 | - |
移动端 | 不支持 |
示例 |
点击查看文档:获取钻取地图当前层级接口 |
3.12 改变图表参数重新赋值
方法 | FR.Chart.WebUtils.changeParameter({ chartID:'chartID', para: {参数名: 参数值}}) |
---|---|
参数说明 | chartID 字符串类型,表示当前图表所在图表块的唯一标识 ID |
移动端 | 不支持 |
示例 | 例如要将「华东」作为 area 参数的值传递给 chart1 :
点击查看文档:自动轮播数据点提示时联动其他图表 、下拉框和图表联动 |