1. 概述
1.1 应用场景
图表数据展示的顺序是由图表绑定的数据顺序决定的，一般建议在 SQL 中排好序再用图表实现。
但总有些场景不支持提前在 SQL 中排好序，或需要图表实现动态排序，此时可参考本文方法使用排序接口实现。
1.2 功能简介
FineReport 提供排序接口 chart.sortChart(sortType) 。
sortType 参数表示排序规则，1 表示升序，-1 表示降序，不写参数则升序降序互相切换。
预览效果如下图所示：
注1：该方法不支持移动端、不支持扩展图表。
注2：支持排序的图表仅包括 柱形图、条形图、折线图、面积图、饼图、多层饼图、仪表盘、雷达图。
注3：FVS 可视化看板详情可见：FVS图表排序接口 。
2.普通报表示例
2.1 准备数据
点击设计器左上角「文件>新建普通报表」，进入模板后在左下方新建数据库查询 ds1，输入 SQL 语句：SELECT * FROM 销量。
2.2 设计报表
2.2.1 添加组件
将条形图和按钮控件添加至表格中。如下图所示：
2.2.2 绑定条形图数据
双击条形图，在右侧属性面板中绑定数据如下图所示：
2.2.3 设置按钮控件
1）在右侧控件设置中选择按钮控件，设置按钮名字为「排序」。如下图所示：
2.2.4 设置排序
在普通报表中，设置排序的方法有些变化，需要在单元格中添加「按钮控件」，同样给按钮控件设置一个「点击」事件，这里获取的是「单元格」的图表， JavaScript 代码如下：
var chart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);
// 获取图表对象
chart.sortChart(); //排序可切换升降序
如下图所示：
2.3 效果预览
因为添加了控件，这里需要使用 填报预览 或 数据分析 预览模式，效果如下图所示：
注：不支持移动端。
3. 决策报表示例
3.1 设计报表
3.1.1 设置 PC 端自适应属性
点击顶部菜单栏「模板>PC端自适应属性」，将报表布局方式修改为「绝对布局>双向自适应」。如下图所示：
3.1.2 拖入组件
双击条形图，在右侧属性面板中绑定数据如下图所示：
3.1.3 绑定条形图数据
双击条形图，在右侧属性面板中绑定数据如下图所示：
3.1.4 设置按钮控件
1）选中按钮控件，设置按钮名字为「排序」。如下图所示：
2）给按钮控件添加「点击事件」，输入 JavaScript 代码如下：
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
// 获取图表对象
chart.sortChart(); //排序可切换升降序
注：若图表在报表块中，只需改变 获取图表对象 的写法。例如 FR.Chart.WebUtils.getChart("A1","report0")，即获取 report0 报表块中 A1 单元格的图表。
步骤如下图所示：
3.2 预览效果
保存模板，点击「PC 端预览」，效果如 1.2 节所示。
注：不支持移动端。
3.3 注意事项
图表排序接口需要在图表图形加载完成后执行才有效，那么某些情况下需要将上述代码写在延时函数 setTimeout( ); 中才能生效。
1）给图表本身添加「初始化后」事件实现模板预览时图表直接排序，需要将代码写在延时函数 setTimeout( ); 中。
2）使用参数控件联动图表，需要给参数控件添加「编辑后」或「编辑结束」事件，将代码写在延时函数 setTimeout( ); 中。
示例如下：
setTimeout(function(){
var chart = FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);
chart.sortChart();
}, 1000);
