图表显示部分系列接口

1.1 应用场景

当图表系列较多时，用户希望可以自己设置哪些系列显示，哪些系列不显示。以决策报表为例，实现效果如下图：

1.2 实现思路

通过FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex).setSeriesVisible()获取需要显示的系列图表对象，在表单中显示这些系列。

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

注2：普通报表调用该接口支持移动端，决策报表报表块内图表，仅支持移动端11.0.63及之后版本。

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

注4：FVS 可视化看板详情可见：FVS图表显示部分系列接口

2.1 准备模板

打开设计器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\柱形图.cpt

2.2 修改模板数据

将柱形图的系列名修改为「产品」，如下图所示：

2.3 添加加载结束事件

菜单栏点击「模板>模板 Web 属性>分页预览>为该模板单独设置」，添加「加载结束事件」，如下图所示：

JavaScript 代码如下：

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

2.4 效果预览

保存模板，点击「分页预览」，效果如下图所示：

3.1 准备数据

1）新建决策报表，新建数据集 ds2，SQL 语句为：SELECT * FROM 销量，如下图所示：

3.2 插入图表

将柱形图拖到决策报表中，类型选择堆积柱形图，点击图表属性面板的，新增 2 个图表，「图表2」选择百分比堆积条形图，「图表3」选择折线图，如下图所示：

3.3 绑定数据

这 3 个图表绑定数据的方法是一致的，如下图所示：

3.4 添加按钮

图表下方添加 3 个按钮，如下图所示：

3.5 设置显示系列

3.5.1 柱形图

选中「button0」，给按钮添加一个「点击」事件，如下图所示：

JavaScript 代码如下：

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

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

3.5.2 条形图

选中「button1」，给按钮添加一个「点击」事件，如下图所示：

JavaScript 代码如下：

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

3.5.3 折线图

选中「button2」，给按钮添加一个「点击」事件，如下图所示：

JavaScript 代码如下：

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

3.6 效果预览

1）PC 端

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

2）移动端

1）示例一

已完成模板参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\决策报表图表显示部分系列.frm

点击下载模板：决策报表图表显示部分系列.frm

2）示例二

已完成模板参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\普通报表图表显示部分系列.cpt

点击下载模板：普通报表图表显示部分系列.cpt