1.1 应用场景

用户有以下需求时：

• 不考虑 sql 排序，想使用 FR 功能实现图表整体排序。

• 想实现图表中数据从大到小排序显示。

• 想实现升序与降序的切换，但不想使用图表自带的工具栏排序。

可参考本文方法实现。

1.2 功能简介

目前图表内容的排序通常是通过 sql 语句来实现的，而当一些用户的数据取数是通过存储过程来实现的时候，就很难再实现排序逻辑。

FineReport 提供排序接口 chart.sortChart(sortType) ，可在预览时对图表进行排序。

注1：该方法不支持移动端、不支持扩展图表。

注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 端预览」，效果如下图所示：

用第 2 节相同的图表数据，示例在普通报表中排序的设置，不再重复描述设计报表。

3.1 设置排序

在普通报表中，设置排序的方法有些变化，需要在单元格中添加「按钮控件」，同样给按钮控件设置一个「点击」事件，这里获取的是「单元格」的图表， JavaScript 代码如下：

var vanchart = FR.Chart.WebUtils.getChart("A2").getChartWithIndex(0); 
//获取到 A2 单元格的第一个图表
vanchart.sortChart();//设置排序规则

如下图所示：

3.2 效果预览

因为添加了控件，这里需要使用「填报预览」或「数据分析」模式，效果如下图所示：

已完成模板参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\图表排序.frm

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\图表排序.cpt

点击下载模板：

图表排序.frm

图表排序.cpt