项目管理工具----普加项目管理中间件（PlusProject ）入门教程（4）：如何自定义甘特图外观

普加项目管理中间件是用于跨浏览器和跨平台应用程序的功能齐全的 Gantt 图表，可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。

每个用户对甘特图的外观都有不同的需求，普加甘特图内提供了丰富的扩展接口来实现各种外观样式的调整，在官方提供的试用包内有demo-theme的示例。

实现了不同于标准外观的甘特图。

主要实现代码在renderProject.js这个文件。

主要的控制代码如下：

 

project.setRowHeight(30);             //设置左侧表格区域行高
    project.ganttView.bottomTimeScale.width = 32;  //设置右侧甘特图区域底层时间标尺单元格宽度

    var setViewModel = project.setViewModel;     //扩展默认方法，在跟踪甘特图的模式下多增加一个自定义的样式trackmode，用于实现样式扩展
    project.setViewModel = function (value) {
        setViewModel.call(this, value);
        $(this.el).toggleClass("trackmode", value == "track");
    }
    project.ganttView.setHeaderHeight(90);     //设置右侧甘特图区域头部高度

    project.ganttView.middleTimeScale.visible = true;   //设置右侧甘特图区域显示中层刻度
    project.ganttView.topTimeScale.type = "month"       //设置右侧甘特图区域上层刻度为月

    project.ganttView.topTimeScale.height = 30;      //设置右侧甘特图区域上中下3层时间标尺的高度
    project.ganttView.bottomTimeScale.height = 30;
    project.ganttView.middleTimeScale.height = 30;

    var headerEl = $(project.tableView.el).find(".mini-supergrid-header");
    var topbar = $('<div class="topbar">top-bar</div>').insertBefore(headerEl); //给左侧表格头部放入一个占位div，可以在这div内放入控制按钮等等自定义功能

    var getViewportHeight = project.tableView.getViewportHeight;     //扩展默认计算高度方法，来适应放入了topbar之后的自动调整
    project.tableView.getViewportHeight = function () {
        return getViewportHeight.call(this) - topbar.outerHeight();
    }
    project.tableView.setHeaderHeight(25);                //设置左侧表格区域表头高度