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

可以通过监听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>";
});