反馈已提交
网络繁忙
图表数据展示的顺序是由图表绑定的数据顺序决定的,一般建议在 SQL 中排好序再用图表实现。
但总有些场景不支持提前在 SQL 中排好序,或需要图表实现动态排序,此时可参考本文方法使用排序接口实现。
FineReport 提供排序接口 chart.sortChart(sortType) 。
sortType 参数表示排序规则,1 表示升序,-1 表示降序,不写参数则升序降序互相切换。
预览效果如下图所示:
注1:该方法不支持移动端、不支持扩展图表。
注2:支持排序的图表仅包括 柱形图、条形图、折线图、面积图、饼图、多层饼图、仪表盘、雷达图。
点击设计器左上角「文件>新建决策报表」,进入模板后在左下方新建数据库查询 ds1,输入 SQL 语句:SELECT * FROM 销量。
点击顶部菜单栏「模板>PC端自适应属性」,将报表布局方式修改为「绝对布局>双向自适应」。如下图所示:
将条形图和按钮控件拖入 body 中。如下图所示:
双击条形图,在右侧属性面板中绑定数据如下图所示:
1)选中按钮控件,设置按钮名字为「排序」。如下图所示:
2)给按钮控件添加「点击事件」,输入 JavaScript 代码如下:
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); // 获取图表对象chart.sortChart(); //排序可切换升降序
注:若图表在报表块中,只需改变 获取图表对象 的写法。例如 FR.Chart.WebUtils.getChart("A1","report0"),即获取 report0 报表块中 A1 单元格的图表。
步骤如下图所示:
保存模板,点击「PC 端预览」,效果如 1.2 节所示。
注:不支持移动端。
图表排序接口需要在图表图形加载完成后执行才有效,那么某些情况下需要将上述代码写在延时函数 setTimeout( ); 中才能生效。
1)给图表本身添加「初始化后」事件实现模板预览时图表直接排序,需要将代码写在延时函数 setTimeout( ); 中。
2)使用参数控件联动图表,需要给参数控件添加「编辑后」或「编辑结束」事件,将代码写在延时函数 setTimeout( ); 中。
示例如下:
setTimeout(function(){var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0); chart.sortChart(); }, 1000);
用第 2 章相同的图表数据,简单演示在普通报表中如何设置排序,设计报表部分不再赘述。
在普通报表中,设置排序的方法有些变化,需要在单元格中添加「按钮控件」,同样给按钮控件设置一个「点击」事件,这里获取的是「单元格」的图表, JavaScript 代码如下:
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0); // 获取图表对象chart.sortChart(); //排序可切换升降序
如下图所示:
因为添加了控件,这里需要使用 填报预览 或 数据分析 预览模式,效果如下图所示:
已完成模板可参见:
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\图表排序.frm
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\图表排序.cpt
点击下载模板:
图表排序接口示例.frm
图表排序接口示例.cpt
售前咨询电话
400-811-8890转1
在线技术支持
请前往「服务平台」,选择「在线支持」
热线电话:400-811-8890转2
总裁办24H投诉
热线电话:173-1278-1526
文 档反 馈
鼠标选中内容,快速反馈问题
鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。
不再提示
10s后关闭