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