[新]图表排序接口

编辑
  • 文档创建者:jiangsr
  • 浏览次数:3692次
  • 编辑次数:10次
  • 最近更新:Carly 于 2019-10-15
  • 1. 版本

      设计器版本图表插件版本
      8.0  v8.6.5及以上
      9.0、10.0  

    2. 概述

    2.1 问题描述

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

    因此希望在图表内直接完成排序。展现时默认按值大小进行排序。

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

    222

    2.2 实现方法

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

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

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

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

    3. 示例

    3.1 模板制作

    1)新建决策报表,添加 SQL 数据集ds1:SELECT * FROM 销量。如下图所示:

    222

    2)将条形图拖入到报表中,如下图所示:

    222

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

    222

    222

    3.2 设置排序

    添加按钮控件,设置按钮名称为排序,并添加点击事件,如下图所示:

    1571122938572857.png

    JS 代码如下:

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

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

    4. 保存预览

    保存模板,点击预览,如下图所示:

    222

    5. 已完成模板

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

    点击下载模板:图表排序.frm

    附件列表


    主题: 图表应用
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]