反馈已提交

网络繁忙

图表排序接口

  • 文档创建者:jiangsr
  • 编辑次数:14次
  • 最近更新:Alicehyy 于 2021-06-24
  • 1. 概述

    1.1 应用场景

    用户有以下需求时:

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

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

    • 柱形图按照数据从大到小显示。

    • 制作条形图的时候将数据从大到小排序 但是图表呈现的时候又乱了,想解决这个问题。

    可参考本文方法实现。

    1.2 功能简介

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

    本文提供方法可在图表内直接完成排序,按值大小进行排序。

    注1:该方法不支持移动端。

    注2:该接口不支持扩展图表。

    222

    2. 示例-决策报表

    2.1 设计报表

    1)新建决策报表,新建数据库查询 ds1,输入 SQL 语句:SELECT * FROM 销量。如下图所示:

    222

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

    222

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

    222

    222

    2.2 设置排序

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

    Snag_48647d6.png

    JavaScript 代码如下:

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

    2.3 预览效果

    保存模板,点击「PC 端预览」,效果如下图所示:

    1624516724889978.gif

    3. 示例-普通报表

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

    3.1 设置排序

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

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

    如下图所示:

    Snag_4acc5c7.png

    3.2 效果预览

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

    1624518858981174.gif

    4. 模板下载

    已完成模板参见:

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

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

    点击下载模板:

    图表排序.frm

    图表排序.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭