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

  • 文档创建者:Kevin-s
  • 编辑次数:6次
  • 最近更新:Kevin-s 于 2019-11-04
  • 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



    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!