历史版本1 :图表排序接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

目前图表内容的排序通常是通过sql语句来实现的。

而当一些用户的数据取数是通过存储过程来实现的时候,就很难再实现排序逻辑。因此希望在图表内直接完成排序。展现时默认按值大小进行排序。

以决策报表为例,实现效果如下图:

222

2. 实现方法编辑

提供接口,可用js控制图表的排序。可设置为是从大到小排序或从小到大排序。

通过 vanchart.sortChart(sortType),获取到要排序的图表对象后,设置图表排序方式。

注:

可选参数sortType为排序规则, 可选值为1或-1,其中1表示升序排列图表,-1表示降序排列图表

如果不传sortType参数,图表会在当前的排序基础上进行相反的排序切换,即和点击排序按钮效果一致

3. 示例编辑

3.1 制作模板

新建决策报表,添加sql数据集。如下图:

222

将条形图拖入到报表中,如下图:

222

选中图表,类型为条形图,并依次设置图表的类型、数据、样式和特效,这里不再一一介绍

222
222

3.2 设置排序

添加按钮控件,并设置点击事件,如下:

222

代码如下:

var chart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0]; //获取到chart0控件的第一个图表块,即默认图表 chart.sortChart(); //设置排序规则

注:.sortChart() 未设置参数,表示图表会在当前的排序基础上进行相反的排序切换。

4. 保存预览编辑

保存模板,点击预览,即可看到如上图所示效果。

已完成模板可参考:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\图表排序.frm