js统计图表FineReport中图表排序的具体实现

Wlitttle 2015-03-30

FineReport中图表排序主要分为单系列(分类)图表排序多系列分类图表排序两种,图表排序的实现和数据类排序的原理类似,以图表所代表的的数据大小为根本依据,在此基础上延展开来一系列的排序标准。以下主要是实现这两类图表特效的制作方法:

单系列(分类)图表排序

单系列(分类)图表排序适用于使用图表时,图表能够根据数据的大小进行显示。单系列(分类)图表排序则制作以柱形图为例,希望所有柱子能够根据数据的大小从高到低或者从低到高进行排序,如下图所示,此时要如何实现呢?
js统计图表FineReport中图表排序的具体实现
单系列图表排序效果实现思路
图表的默认是根据系列进行排序显示的。

若图表数据源是来自单个数据集,那么可以直接使用数据集中的排序进行排序,然后设置图表数据源为数据集数据;若图表数据源是通过单元格计算出来的,则可以使用扩展后排序进行排序,然后设置图表数据源为单元格数据即可。
单系列图表排序详细步骤

下面我们以一个简单的示例分别介绍下如何实现上图效果。

1、图表数据源为数据集数据

打开模板:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Logchart.cpt

修改数据集

将原来的数据集修改为按照成本价进行降序排序,则SQL语句为:SELECT * FROM [产品] where 类别ID= 1 order by 成本价 desc

效果查看

点击分页预览,可以看到柱子从高到低进行降序排序了,如上效果图。

2、 图表数据源为单元格数据

打开模板

打开模板:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Logchart.cpt。

修改模板

按照下图将对应的数据列拖入到单元格中
js统计图表FineReport中图表排序的具体实现

排序设置

右击A2单元格,选择扩展属性,在单元格属性面板中设置扩展后排序为降序,并在公式中输入B2。

数据集设置

按照下图设置数据集:
js统计图表FineReport中图表排序的具体实现

隐藏单元格

将单元格中的数据隐藏起来,选中第一行和第二行,右击,选择隐藏行即可。

效果查看

点击分页预览,可以看到柱子从高到低进行降序排序了。其他的图表类型,如条形图和饼图,做类似设置可达到同样的图表排序。

多系列分类图表排序

如下图,数据库中有一张表,每个分类下面的系列均已经按照特定的顺序(系列汇总,即各个系列的流量总和降序排列)排列好,并且有些分类下的数据缺省。
js统计图表FineReport中图表排序的具体实现

用上述表中数据制作一个数据集数据源柱形图,如下图,会看到图例的排序与数据库中数据不一致,数据库中每个分类下的系列排序是一样的(缺省系列不参与排序),而图表中图例顺序却是按照从数据库中读取系列(port)字段的顺序排序的,如果第一个分类下的系列名称不缺省,那么图表图例顺序会显示正常(直接从第一个读到最后一个,显示完全),如果第一个分类下面的系列数据有缺省,所以图例排序会先显示该分类下有的系列,缺省的系列会显示在后面,就会打乱原来的顺序:
js统计图表FineReport中图表排序的具体实现

那么该如何实现,在系列缺省的状况下还保持图表图例顺序与数据库中顺序一致呢?
多系列分类图表排序实现思路

使用单元格作为图表的数据源,在单元格中将数据重新排序,即形成一个交叉报表,横向和纵向表头分别是分类和系列,缺省的地方会自动显示为空,然后将系列重新排序即可。
实现示例

1 、单元格数据
如下图,将数据列拖曳至单元格中,形成交叉报表,并计算每个系列下的汇总流量值。要手动设置C15,也就是sum函数所在单元格的左父格,设为A15。
js统计图表FineReport中图表排序的具体实现

2、 单元格重新排序

选中图表系列所在单元格,也就是A15,在单元格属性表-扩展属性>扩展后中,选择降序排序,公式为=C15,如下图:
js统计图表FineReport中图表排序的具体实现

点击分页预览,会发现交叉表中系列名称又重新弄排好序了,如下图:
js统计图表FineReport中图表排序的具体实现

3、图表数据源

单元格数据制作好了,下面将单元格数据与图表进行绑定,也就是重新添加图表数据源,选中图表,在图表属性表-数据一栏中,数据来源选择单元格数据源。

点击分页预览,即可看到多系列分类图表排序效果。

相关推荐

ganyouxianjava / 0评论 2012-05-31