反馈已提交

网络繁忙

图表切换接口

  • 文档创建者:jiangsr
  • 编辑次数:19次
  • 最近更新:Leo.Tsai 于 2021-03-10
  • 1. 概述

    1.1 问题描述

    图表往往是按照从左往右或从右往左的顺序来切换。那么如何实现点击图表直接切换到其他不相邻的图表呢?效果如下图所示:

    1591349093452915.gif

    1.2 实现思路

    给图表添加 JavaScript 类型的超级链接,调用图表接口FR.Chart.WebUtils.getChart(chartId).showIndexChart(index);跳转到指定图表。

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

    注2:index 表示第几个图表,例如 index=3,则跳转到第 4 个图表。

    注3:该接口支持移动端,但移动端决策报表的报表块内图表不支持调用该接口。

    注4:获取图表对象的方法参见文档:如何获取图表对象

    2. 示例

    2.1 准备数据

    新建决策报表,新建数据集 ds1,SQL 语句为:SELECT * FROM 销量

    Snag_f739c2b.png

    2.2 插入图表

    将雷达图拖到决策报表中,点击加号.png,新增 2 个图表:图表2图表3,图表2类型选择条形图,图表3类型选择饼图

    1591350395293960.png

    2.3 绑定数据

    3 个图表绑定数据的方法是一致的,如下图所示:

    Snag_f7c4d63.png

    2.4 添加超级链接

    1)雷达图属性面板选择特效>交互属性,添加一个 JavaScript 类型的超级链接,如下图所示:

    1591350829550872.png

    JavaScript 代码如下:

    FR.Chart.WebUtils.getChart("chart2").showIndexChart(2);

    2)饼图属性面板选择特效>交互属性,添加一个 JavaScript 类型的超级链接,如下图所示:

    1591350987831151.png

    JavaScript 代码如下:

    FR.Chart.WebUtils.getChart("chart2").showIndexChart(1);

    2.5 设置切换属性

    图表切换方式为轮播显示轮播箭头,时间间隔设置为5秒,如下图所示:

    1591351121214787.png

    2.6 效果预览

    2.6.1 PC 端

    保存模板,点击PC端预览,效果如1.1问题描述中所示:

    2.6.2 移动端

    1591349484252643.gif

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\图表跳跃切换.frm

    点击下载模板:图表跳跃切换.frm

    附件列表


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

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

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

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭