历史版本4 :JS实现隐藏甘特图内容线条 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.描述编辑

在我们使用甘特图进行报表开发的过程中,会需要对其样式进行调整,大部分功能可通过 FineReport 设计器自带的样式设置,但部分则需要使用 JS 进行设置,下面以隐藏下面甘特图红框的内容线条为例进行设置.

image.png

2. 思路编辑

使用 JS 对图表内的线条属性 stroke 进行设置,可达到隐藏内容线条的功能,依据自己需求美化报表。

3. 示例编辑

3.1 普通报表与聚合报表设置方法

点击模板->模板 Web 属性->分页预览设置->选择为该模板单独设置-添加加载起始事件

输入 JS 代码如下:

setTimeout(function() {
    $('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);

3.2 决策报表设置方法

由于决策报表,参数没有模板web属性,所以只能通过给 form 添加初始化事件,如下图所示:

image.png

且因为参数面板的下拉按钮image.png会影响该 JS 实现,故在初始化后1,使用 JS 代码如下:

setTimeout(function() {
    $('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);
setTimeout(function() {
    $(".parameter-container-collapseimg-up").bind("click", function() {
        setTimeout(function() {
    $('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000);
    });
    $(".parameter-container-collapseimg-down").bind("click", function() {
       setTimeout(function() {
    $('.timeaxisGroup-inner-body-back line').css('stroke', 'unset');
}, 1000); 
    });
}, 1000);

注:代码中的1000表示延时1秒后隐藏多余的线条,可以根据实际应用场景进行调整。

4. 效果预览编辑

PC 端效果如下图所示:

image.png

注:暂不支持移动端

5.已完成模板编辑

已完成模板可参见:

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\隐藏甘特图多余线条1.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\隐藏甘特图多余线条2.frm

点击下载模板:

普通报表与聚合报表:隐藏甘特图多余线条1.cpt

决策报表:隐藏甘特图多余线条2.frm