JS实现隐藏甘特图内容线条

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

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

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

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

输入 JS 代码如下：

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

3.2 决策报表设置方法

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

且因为参数面板的下拉按钮会影响该 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 秒后隐藏多余的线条，可以根据实际应用场景进行调整。

PC 端效果如下图所示：

注：暂不支持移动端

已完成模板可参见：

%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