反馈已提交
网络繁忙
当图表系列较多时,用户希望可以自己设置哪些系列显示,哪些系列不显示。以决策报表为例,实现效果如下图:
通过FR.Chart.WebUtils.getChart("chartID").getChartWithIndex(chartIndex).setSeriesVisible()获取需要显示的系列图表对象,在表单中显示这些系列。
注1:该接口不支持扩展图表。
注2:该接口支持移动端,但决策报表的报表块中图表不支持调用该接口。
注3:获取图表对象的方法参见文档:如何获取图表对象
1)新建决策报表,新建数据集 ds2,SQL 语句为:SELECT * FROM 销量,如下图所示:
将柱形图拖到决策报表中,类型选择堆积柱形图,点击图表属性面板的,新增 2 个图表,图表2选择百分比堆积条形图,图表3选择折线图,如下图所示:
这 3 个图表绑定数据的方法是一致的,如下图所示:
图表下方添加 3 个按钮,如下图所示:
选中button0,给按钮添加一个点击事件,如下图所示:
JavaScript 代码如下:
var vanchart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(0);//获取chart0控件的第一个图表,即柱形图vanchart.setSeriesVisible([0,1]);//显示柱形图的系列1和系列2
注:初始化事件中使用此方法需使用延时函数 setTimeout()
选中button1,给按钮添加一个点击事件,如下图所示:
var vanchart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(1);//获取chart0控件的第二个图表,即条形图vanchart.setSeriesVisible();//显示条形图的系列,此处没有参数,即不显示系列
选中button2,给按钮添加一个点击事件,如下图所示:
var vanchart=FR.Chart.WebUtils.getChart("chart0").getChartWithIndex(2);//获取chart0控件的第三个图表,即折线图vanchart.setSeriesVisible([2,3]);//显示折线图的系列3和系列4
1)PC 端
保存模板,点击PC端预览,效果如下图所示:
2)移动端
打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\柱形图.cpt
将柱形图的系列名修改为产品,如下图所示:
菜单栏点击模板>模板 Web 属性>分页预览>为该模板单独设置,添加加载结束事件,如下图所示:
setTimeout(function() {var vanchart = FR.Chart.WebUtils.getChart("A1").getChartWithIndex(0);//获取图表元素,即柱形图 vanchart.setSeriesVisible([0, 1]); //显示柱形图的系列1和系列2 }, 200);
保存模板,点击分页预览,效果如下图所示:
注:由于加载结束事件不支持调用获取图表块对象的方法,故该示例不支持移动端预览。
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
售前咨询电话
400-811-8890转1
在线技术支持
请前往「服务平台」,选择「在线支持」
热线电话:400-811-8890转2
总裁办24H投诉
热线电话:173-1278-1526
文 档反 馈
鼠标选中内容,快速反馈问题
鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。
不再提示
10s后关闭