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