历史版本18 :图表排序接口 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 应用场景
用户有以下需求时:
不考虑 sql 排序,想使用 FR 功能实现图表整体排序。
想实现图表中数据从大到小排序显示。
想实现升序与降序的切换,但不想使用图表自带的工具栏排序。
可参考本文方法实现。
1.2 功能简介
目前图表内容的排序通常是通过 sql 语句来实现的,而当一些用户的数据取数是通过存储过程来实现的时候,就很难再实现排序逻辑。
FineReport 提供排序接口 chart.sortChart(sortType) ,sortType 表示排序规则,1 表示升序,-1 表示降序,可在预览时对图表进行排序。
注1:该方法不支持移动端、不支持扩展图表。
注2:支持排序的图表仅包括 柱形图、条形图、折线图、面积图、饼图、多层饼图、仪表盘、雷达图。
2. 示例-决策报表编辑
2.1 设计报表
1)新建决策报表,新建数据库查询 ds1,输入 SQL 语句:SELECT * FROM 销量。如下图所示:
2)将条形图拖入到报表中,如下图所示:
3)选中图表,类型为条形图,并依次设置图表的类型、数据、样式和特效,这里不再一一介绍
2.2 设置排序
添加按钮控件,设置按钮名称为排序,并添加点击事件,如下图所示:
JavaScript 代码如下:
var vanchart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
//获取到chart0控件的第一个图表块,即默认图表
vanchart.sortChart(); //设置排序规则
注:若设置初始化后事件,需将上述代码写在延时函数 setTimeout(function(){ }, 500); 中。示例如下:
setTimeout(function(){
var vanchart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
vanchart.sortChart();
}, 500);
2.3 预览效果
保存模板,点击「PC 端预览」,效果如下图所示:
3. 示例-普通报表编辑
用第 2 节相同的图表数据,示例在普通报表中排序的设置,不再重复描述设计报表。
3.1 设置排序
在普通报表中,设置排序的方法有些变化,需要在单元格中添加「按钮控件」,同样给按钮控件设置一个「点击」事件,这里获取的是「单元格」的图表, JavaScript 代码如下:
var vanchart = FR.Chart.WebUtils.getChart("A2").getChartWithIndex(0);
//获取到 A2 单元格的第一个图表
vanchart.sortChart();//设置排序规则
如下图所示:
3.2 效果预览
因为添加了控件,这里需要使用「填报预览」或「数据分析」模式,效果如下图所示: