历史版本4 :图表显示部分系列接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

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

以决策报表为例，实现效果如下图：

222

2. 实现方法编辑

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

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

3. 示例一 表单里显示部分系列编辑

3.1 制作模板

新建决策报表，添加sql数据集。如下图：

222

将柱形图拖入到报表中，如下图：

222

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

222
222

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

222
222

3.2 设置显示系列

添加三个按钮控件，并设置点击事件，如下：

222

代码如下：

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开始。

同理，设置按钮button1和button2的点击事件：

222

代码如下：

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

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

222

代码如下：

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

4. 保存预览编辑

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

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

3. 示例二 CPT里显示部分系列编辑

3.1 模板准备

打开模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Primary\Chart\Chart.cpt

3.2 修改模板数据

修改图表系列名为产品：

222

3.3 添加加载结束事件

打开模板-模板web属性-分页预览设置，选择为该模板单独设置，添加加载结束事件：
222

输入下面的js代码：

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

保存模板，使用分页预览。

4. 示例三 CPT里默认不显示所有系列编辑

设置所有系列默认不显示，可在事件设置窗口右上角添加参数series，值用公式：RANGE(0,COUNT(UNIQUEARRAY(SQL("FRDemo","select 产品 from 销量",1)))-1) ，从数据库中查出系列值，去重后求个数，然后用RANGE()函数扩展出所有系列的序号值。