图表显示部分系列

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

 

 

 

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 保存预览

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