1. 概述编辑
1.1 应用场景
当图表系列较多时,用户希望可以自己设置哪些系列显示,哪些系列不显示。以决策报表为例,实现效果如下图:
1.2 实现思路
通过 FR.Chart.WebUtils.getChart("chartID").vanCharts.charts[chartIndex].setSeriesVisible()获取需要显示的系列图表对象,在表单中显示这些系列。
注1:该方法涉及获取图表块对象接口FR.Chart.WebUtils.getChart("chartID"),该接口不支持移动端。
注2:该方法涉及图表显示部分系列接口chart.setSeriesVisible(),该接口支持移动端。
注3:由于涉及获取图表块对象接口,故下面所有示例均不支持移动端预览。
注4:获取图表对象的方法参见文档:如何获取图表对象
2. 示例一:决策报表显示部分系列编辑
2.1 制作模板
1)新建决策报表,添加数据集 ds1,SQL 语句为:SELECT * FROM 销量,如下图所示:
2)将柱形图拖到决策报表中,如下图所示:
3)柱形图类型选择堆积柱形图,并依次设置图表的类型、数据、样式和特效,这里不再一一介绍。
4)点击右侧+号,添加图表 2、3,类型分别为百分比堆积条形图、折线图,并设置图表的类型、数据、样式和特效(数据设置同柱形图)。
2.2 设置显示系列
添加三个按钮控件,分别设置按钮的名称和背景,并设置点击事件。
选择 button0,添加点击事件,如下:
JS 代码如下:
var vanchart=FR.Chart.WebUtils.getChart("chart0").vanCharts.charts[0];//获取chart0控件的第一个图表,即柱形图
vanchart.setSeriesVisible([0,1]);//显示柱形图的系列 1 和系列 2
注:FR.Chart.WebUtils.getChart("chartID").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
2.3 保存预览
保存模板,点击分页预览,即可看到如上图所示效果。
已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\图表显示部分系列.frm
注:不支持移动端。
3. 示例二:普通报表显示部分系列编辑
3.1 模板准备
打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\柱形图.cpt
3.2 修改模板数据
为了方便看效果,修改图表系列名为产品,如下图:
3.3 添加加载结束事件
打开模板>模板 Web 属性>分页预览设置,选择为该模板单独设置,添加加载结束事件:
输入下面的 JS 代码:
setTimeout(function() {
var vanchart = FR.Chart.WebUtils.getChart("A1").vanCharts.charts[0];//获取图表元素,即柱形图
vanchart.setSeriesVisible([0, 1]); //显示柱形图的系列1和系列2
}, 200);
3.4 保存预览
保存模板,使用分页预览,实现效果如下图:
注:不支持移动端。
4. 示例三:普通报表默认不显示所有系列编辑
4.1 模板设置
设置所有系列默认不显示,直接将.setSeriesVisible()的参数去掉,即第三行代码改为:vanchart.setSeriesVisible() 即可,如下图所示:以哦对那个的
4.2 保存预览
保存模板,使用分页预览,实现效果如下图:
注:不支持移动端。