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