[新]图表显示部分系列接口

编辑
  • 文档创建者:jiangsr
  • 浏览次数:3112次
  • 编辑次数:13次
  • 最近更新:Kevin-s 于 2019-06-03
  • 1. 版本

      设计器版本 JAR 包版本
      9.0  2018-1-24
      10.0 

    2. 描述

    当图表系列较多时,用户不想展示所有,而是希望可以自己设置哪些系列的图例灰化,哪些系列的图例显示。

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

    3. 实现方法

    提供接口,让用户可以获取图表对象后,自己设置系列的显示和灰化。

    通过 FR.Chart.WebUtils.getChart("chartId").vanCharts.charts[chartIndex].setSeriesVisible(),获取到要显示系列的图表对象,在表单中实现系列显示,其中“ chartId”为图表块控件名。

    注:只支持新图表,获取图表对象的方法可参考:[新]图表接口


    4. 示例一 表单里显示部分系列

    4.1 制作模板

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


    2)将柱形图拖入到报表中,如下图:


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


    4)点击右侧+号,添加图表 2、3,类型分别为百分比堆积条形图、折线图,并设置图表的类型、数据、样式和特效(数据设置同柱形图)。





    4.2 设置显示系列

    添加三个按钮控件,分别设置按钮的名称和背景,并设置点击事件。

    选择 button0,添加点击事件,如下:


    JS 代码如下:

    var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0];//获取chart0控件的第一个图表,即柱形图
    vanchart.setSeriesVisible([0,1]);//显示柱形图的系列 1 和系列 2

    注:FR.Chart.WebUtils.getChart("name").vanCharts.charts[0],表示获取到指定控件的第一个图表,参数从 0 开始。

    注:.setSeriesVisible([0,1]),表示显示该图表的第一和第二个系列,参数从 0 开始。

    注:在初始化事件中使用此方法需使用setTimeout()延时函数。

    同理,设置按钮 button1 的点击事件:


    JS 代码如下:

    var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[1];//获取 chart0 控件的第二个图表,即条形图
    vanchart.setSeriesVisible();//显示条形图的系列,此处没有参数,即不显示

    注:FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[1]; //charts[1] 表示获取 chart0 控件的第二个图表

    注:.setSeriesVisible(),不设置参数时,即不显示系列。

    同理,设置按钮 button2 的点击事件:


    JS 代码如下:

    var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[2];//获取 chart0 控件的第三个图表,即折线图
    vanchart.setSeriesVisible([2,3]);//显示折线图的系列 3 和系列 4

    4.3 保存预览

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

    已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\图表显示部分系列.frm


    5. 示例二 CPT里显示部分系列

    5.1 模板准备

    打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\柱形图.cpt


    5.2 修改模板数据

    为了方便看效果,修改图表系列名为产品,如下图:



    5.3 添加加载结束事件

    打开模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,添加加载结束事件:


    输入下面的 JS 代码:

    setTimeout(function() {
    var vanchart = FR.Chart.WebUtils.getChart("A1").vanCharts.charts[0];//获取图表元素,即柱形图    
    vanchart.setSeriesVisible([0, 1]); //显示柱形图的系列1和系列2   
    }, 200);


    5.4 保存预览

    保存模板,使用分页预览,实现效果如下图:



    6. 示例三 CPT里默认不显示所有系列

    6.1 模板设置

    设置所有系列默认不显示,直接将.setSeriesVisible()的参数去掉,即第三行代码改为:vanchart.setSeriesVisible() 即可,如下图所示:



    6.2 保存预览

    保存模板,使用分页预览,实现效果如下图:

    附件列表


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

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

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