甘特图样式——VisActor/VTable 教程文档

任务条样式

VTable甘特图提供了丰富的任务条样式配置选项，可以自定义任务条的外观。

基础样式

可以通过taskBar.barStyle配置来设置普通任务的样式，通过taskBar.projectStyle配置项目任务的样式，通过taskBar.milestoneStyle配置里程碑的样式：

const ganttOptions = {
  taskBar: {
    barStyle: {
      barColor: '#1890ff',           // 任务条的颜色
      completedBarColor: '#52c41a',  // 已完成部分的颜色
      borderColor: '#096dd9',        // 边框颜色
      borderLineWidth: 1,            // 边框宽度
      cornerRadius: 3                // 圆角半径
    },
    projectStyle: {
      barColor: '#722ed1',           // 项目任务条的颜色
      completedBarColor: '#eb2f96',  // 已完成部分的颜色
      borderColor: '#531dab',        // 边框颜色
      borderLineWidth: 1,            // 边框宽度
      cornerRadius: 0                // 圆角半径
    },
    milestoneStyle: {
      fillColor: '#fa8c16',          // 里程碑填充颜色
      borderColor: '#d46b08',        // 里程碑边框颜色
      borderLineWidth: 1,            // 边框宽度
      width: 12,                     // 里程碑大小
      cornerRadius: 0,               // 圆角半径
      textOrient: 'right'            // 文本位置
    }
  }
};

也可以通过函数根据任务属性动态设置样式：

const ganttOptions = {
  taskBar: {
    barStyle: (args) => {
      const { taskRecord, progress } = args;
      
      // 根据进度设置不同颜色
      if (progress > 0.8) {
        return {
          barColor: '#52c41a',
          completedBarColor: '#389e0d'
        };
      } else if (progress > 0.3) {
        return {
          barColor: '#1890ff',
          completedBarColor: '#096dd9'
        };
      } else {
        return {
          barColor: '#fa8c16',
          completedBarColor: '#d46b08'
        };
      }
    }
  }
};

选中状态

可以通过taskBar.selectedBarStyle配置任务条选中时的样式：

const ganttOptions = {
  taskBar: {
    selectable: true,            // 允许选择任务条
    selectedBarStyle: {
      shadowBlur: 6,             // 阴影模糊半径
      shadowColor: 'rgba(0,0,0,0.3)',  // 阴影颜色
      shadowOffsetX: 2,          // 阴影X偏移
      shadowOffsetY: 2,          // 阴影Y偏移
      borderColor: '#ff4d4f',    // 选中时的边框颜色
      borderLineWidth: 2         // 选中时的边框宽度
    }
  }
};

悬停状态

可以通过taskBar.hoverBarStyle配置任务条悬停时的样式：

const ganttOptions = {
  taskBar: {
    hoverBarStyle: {
      cornerRadius: 4,           // 悬停时的圆角半径
      barOverlayColor: 'rgba(24, 144, 255, 0.1)'  // 悬停时的覆盖色
    }
  }
};

自定义布局

对于更复杂的自定义需求，可以通过taskBar.customLayout完全控制任务条的渲染：

const ganttOptions = {
  taskBar: {
    customLayout: (args) => {
      const { width, height, taskRecord, progress, ganttInstance } = args;
      
      // 创建自定义任务条
      const rootContainer = new Group();
      
      // 添加自定义图形
      const background = createRect({
        x: 0,
        y: 0,
        width,
        height,
        fill: taskRecord.color || '#1890ff',
        radius: 4
      });
      rootContainer.appendChild(background);
      
      // 添加进度条
      if (progress > 0) {
        const progressBar = createRect({
          x: 0,
          y: 0,
          width: width * progress,
          height,
          fill: '#52c41a',
          radius: [4, 0, 0, 4]
        });
        rootContainer.appendChild(progressBar);
      }
      
      // 添加自定义文本
      const text = createText({
        x: width / 2,
        y: height / 2,
        text: taskRecord.text,
        fontSize: 12,
        fill: '#fff',
        textAlign: 'center',
        textBaseline: 'middle'
      });
      rootContainer.appendChild(text);
      
      return {
        rootContainer,
        renderDefaultBar: false,
        renderDefaultText: false,
        renderDefaultResizeIcon: false
      };
    }
  }
};