普加项目管理中间件示例之五：自定义条形图外观和提示信息

可以通过监听drawitem事件来控制右侧条形图的html外观，达到任意的条形图效果。

示例地址：demo/DiyDisplayGantt.html

代码如下：

//1)自定义条形图外观显示

project.on("drawitem", function (e) {

    var item = e.item;

    var left = e.itemBox.left,

        top = e.itemBox.top,

        width = e.itemBox.width,

        height = e.itemBox.height;

 

    if (!item.Summary && !item.Milestone) {

        var percentWidth = width * (item.PercentComplete / 100);

 

        e.itemHtml = '<div id="' + item._id + '" class="myitem" style="left:' + left + 'px;top:' + top + 'px;width:' + width + 'px;height:' + (height) + 'px;">';

        e.itemHtml += '<div style="width:' + (percentWidth) + 'px;" class="percentcomplete"></div>';

        e.itemHtml += '</div>';

 

        //e.ItemHtml = '<a href="http://www.baidu.com" style="left:'+left+'px;top:'+top+'px;width:'+width+'px;height:'+(height-2)+'px;" class="myitem">111</a>';

    }

});

//2)自定义条形图提示信息

project.on('itemtooltipneeded', function (e) {

    var task = e.task;

    e.tooltip = "<div>任务：" + task.Name + "</div>"

    //                +   "<div ><div style='float:left;'>进度：<b>"+task.PercentComplete + "%</b></div>"

    //                +   "<div style='float:right;'>工期："+task.Duration + "日</div></div>"

                + "<div style='clear:both;'>开始日期：" + mini.formatDate(task.Start, 'yyyy-MM-dd') + "</div>"

                + "<div>完成日期：" + mini.formatDate(task.Finish, 'yyyy-MM-dd') + "</div>";

});