gantt-canvas-chart 1.6.0 → 1.6.2

package/README.md

@@ -46,11 +46,14 @@ npm install gantt-canvas-chart
 Or include directly via CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/gantt-canvas-chart/dist/gantt-chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gantt-canvas-chart/dist/index.umd.js"></script>
 ```
 
 ## Usage Example
 
+![Project plan](/assets/project-plan.jpg)
+![Project member tasks](/assets/project-member-task.jpg)
+
 ```typescript
 import { GanttChart } from 'gantt-canvas-chart';
 
@@ -115,3 +118,68 @@ ganttChart.setData(newData);
 // Update configuration
 ganttChart.updateConfig({ viewMode: 'Week' });
 ```
+
+## Full options list
+
+```typescript
+interface Task {
+  id: string;
+  name: string;
+  type?: 'task' | 'leave' | 'overtime' | string;
+  planStart?: string; // Plan start date, date separated by '/'
+  planEnd?: string;
+  actualStart?: string;
+  actualEnd?: string;
+  dependencies?: string[];
+  leftRemark?: string;
+  rightRemark?: string;
+  centerRemark?: string;
+  styleClass?: string;
+  planBorderColor?: string;
+  actualBgColor?: string;
+  hide?: boolean; // Whether to hide this data, default false
+  _data?: any; // Store custom data
+  planOffsetPercent?: [number, number]; // Draw daily task progress (plan) based on [start coordinate offset percentage, progress percentage]
+  actualOffsetPercent?: [number, number]; // Draw daily task progress (actual) based on [start coordinate offset percentage, progress percentage]
+}
+
+interface Row {
+  id: string;
+  name: string;
+  hide?: boolean; // Whether to hide this row
+  tasks: Task[];
+}
+
+type GanttData = Row[];
+
+type LoadMoreDirection = 'left' | 'right' | 'bottom';
+
+interface GanttConfig {
+  viewMode?: 'Day' | 'Week' | 'Month' | 'Year';
+  planBorderColor?: string;
+  actualBgColor?: string;
+  headerBgColor?: string;
+  rowHeight?: number;
+  headerHeight?: number;
+  showPlan?: boolean;
+  showActual?: boolean;
+  showRowLines?: boolean;
+  showColLines?: boolean;
+  showLeftRemark?: boolean;
+  showRightRemark?: boolean;
+  showCenterRemark?: boolean;
+  showTooltip?: boolean;
+  tooltipColor?: 'black' | 'white';
+  todayColor?: string;
+  weekendBgColor?: string; // Weekend/holiday header background color
+  holidays?: string[]; // Collection of holiday dates, recommended format yyyy/MM/dd
+  dateSeparator?: string; // Date format separator in GanttData, default '/'
+  offsetTop?: number; // Tooltip position top offset (when embedded in micro frontend framework, child app page elements have offset relative to main app)
+  offsetLeft?: number; // Tooltip position left offset (when embedded in micro frontend framework, child app page elements have offset relative to main app)
+  scrollEdgeThresholds?: number; // Scroll edge threshold to trigger load more
+  xGap?: number; // Gap between tasks, default 0
+  enabledLoadMore?: [LoadMoreDirection?, LoadMoreDirection?, LoadMoreDirection?];
+  viewFactors?: { Day: number; Week: number; Month: number; Year: number };
+  tooltipFormat?: null | ((task: Row, date: Date, config: GanttConfig) => string);
+}
+```

package/dist/index.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.0
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -9,24 +9,35 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 class DateUtils {
   static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
   static format(date, format = "yyyy-MM-dd") {
-    const o = {
-      "M+": date.getMonth() + 1,
-      "d+": date.getDate(),
-      "h+": date.getHours(),
-      "m+": date.getMinutes(),
-      "s+": date.getSeconds(),
+    let fmt = format;
+    let ret;
+    const opt = {
+      "Y+": `${date.getFullYear()}`,
+      // 年
+      "y+": `${date.getFullYear()}`,
+      // 年
+      "M+": `${date.getMonth() + 1}`,
+      // 月
+      "D+": `${date.getDate()}`,
+      // 日
+      "d+": `${date.getDate()}`,
+      // 日
+      "h+": `${date.getHours()}`,
+      // 时
+      "m+": `${date.getMinutes()}`,
+      // 分
+      "s+": `${date.getSeconds()}`,
+      // 秒
       "q+": Math.floor((date.getMonth() + 3) / 3),
       W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
     };
-    if (/(y+)/.test(format))
-      format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-    for (let k in o)
-      if (new RegExp("(" + k + ")").test(format))
-        format = format.replace(
-          RegExp.$1,
-          RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
-        );
-    return format;
+    for (const k in opt) {
+      ret = new RegExp("(" + k + ")").exec(fmt);
+      if (ret) {
+        fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
+      }
+    }
+    return fmt;
   }
   static addDays(date, days) {
     const r = new Date(date);
@@ -192,6 +203,8 @@ class GanttChart {
       showRightRemark: false,
       showCenterRemark: false,
       showTooltip: true,
+      queryStartDate: null,
+      queryEndDate: null,
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
@@ -331,6 +344,7 @@ class GanttChart {
   destroy() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
+      this.resizeObserver = null;
     }
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -338,15 +352,18 @@ class GanttChart {
     this.data = [];
     this.taskMap.clear();
     this.taskPositions.clear();
+    this.holidaysMap.clear();
+    this.config.holidays = [];
     this.container.remove();
   }
   calculateFullTimeline() {
     const currentYear = this.today.getFullYear();
     let minDate = new Date(9999, 0, 1);
     let maxDate = new Date(1e3, 0, 1);
+    const { queryStartDate, queryEndDate } = this.config;
     if (this.data.length === 0) {
-      minDate = /* @__PURE__ */ new Date();
-      maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
+      minDate = queryStartDate ? queryStartDate : /* @__PURE__ */ new Date();
+      maxDate = DateUtils.addDays(queryEndDate ? queryEndDate : /* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
         if (task.hide) {
@@ -366,6 +383,12 @@ class GanttChart {
     }
     this.minDate = minDate;
     this.maxDate = maxDate;
+    if (queryStartDate && queryStartDate < minDate) {
+      minDate = queryStartDate;
+    }
+    if (queryEndDate && queryEndDate > maxDate) {
+      maxDate = queryEndDate;
+    }
     const minYear = minDate.getFullYear();
     const maxYear = maxDate.getFullYear();
     minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
@@ -583,9 +606,9 @@ class GanttChart {
     return ctx;
   }
   /**
-   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
-   */
+    * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+    * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
+    */
   snap(val) {
     return Math.floor(val) + 0.5;
   }
@@ -754,7 +777,7 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+    ctx.font = "bold 12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
@@ -763,7 +786,7 @@ class GanttChart {
         ctx.fillStyle = this.config.headerBgColor;
         ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
@@ -802,7 +825,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+      ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -1190,9 +1213,9 @@ class GanttChart {
     this.showTooltip = false;
   }
   /**
-   * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-   * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-   * @param pixelsPerDay 每日的像素数
+   * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+   * @param diffMilliseconds The difference in milliseconds from the target date
+   * @param pixelsPerDay Number of pixels per day
    * @returns
    */
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.0
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */

package/dist/index.d.ts

@@ -121,8 +121,8 @@ export declare class GanttChart {
     private updateDimensions;
     private setupCanvas;
     /**
-     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
+     * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+     * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
      */
     snap(val: number): number;
     private calculateAllTaskPositions;
@@ -142,9 +142,9 @@ export declare class GanttChart {
     private getTaskTooltipHtml;
     private handleMouseLeave;
     /**
-     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-     * @param pixelsPerDay 每日的像素数
+     * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+     * @param diffMilliseconds The difference in milliseconds from the target date
+     * @param pixelsPerDay Number of pixels per day
      * @returns
      */
     static getTaskWidthPercent(diffMilliseconds: number, pixelsPerDay: number): number;
@@ -180,6 +180,8 @@ export declare interface GanttConfig {
     showRightRemark?: boolean;
     showCenterRemark?: boolean;
     showTooltip?: boolean;
+    queryStartDate?: Date | null;
+    queryEndDate?: Date | null;
     tooltipColor?: 'black' | 'white';
     todayColor?: string;
     weekendBgColor?: string;

package/dist/index.es.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.0
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -7,24 +7,35 @@
 class DateUtils {
   static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
   static format(date, format = "yyyy-MM-dd") {
-    const o = {
-      "M+": date.getMonth() + 1,
-      "d+": date.getDate(),
-      "h+": date.getHours(),
-      "m+": date.getMinutes(),
-      "s+": date.getSeconds(),
+    let fmt = format;
+    let ret;
+    const opt = {
+      "Y+": `${date.getFullYear()}`,
+      // 年
+      "y+": `${date.getFullYear()}`,
+      // 年
+      "M+": `${date.getMonth() + 1}`,
+      // 月
+      "D+": `${date.getDate()}`,
+      // 日
+      "d+": `${date.getDate()}`,
+      // 日
+      "h+": `${date.getHours()}`,
+      // 时
+      "m+": `${date.getMinutes()}`,
+      // 分
+      "s+": `${date.getSeconds()}`,
+      // 秒
       "q+": Math.floor((date.getMonth() + 3) / 3),
       W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
     };
-    if (/(y+)/.test(format))
-      format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-    for (let k in o)
-      if (new RegExp("(" + k + ")").test(format))
-        format = format.replace(
-          RegExp.$1,
-          RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
-        );
-    return format;
+    for (const k in opt) {
+      ret = new RegExp("(" + k + ")").exec(fmt);
+      if (ret) {
+        fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
+      }
+    }
+    return fmt;
   }
   static addDays(date, days) {
     const r = new Date(date);
@@ -190,6 +201,8 @@ class GanttChart {
       showRightRemark: false,
       showCenterRemark: false,
       showTooltip: true,
+      queryStartDate: null,
+      queryEndDate: null,
       tooltipFormat: null,
       tooltipColor: "black",
       todayColor: "#ff4d4f",
@@ -329,6 +342,7 @@ class GanttChart {
   destroy() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
+      this.resizeObserver = null;
     }
     this.container.removeEventListener("scroll", this.handleScroll);
     this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -336,15 +350,18 @@ class GanttChart {
     this.data = [];
     this.taskMap.clear();
     this.taskPositions.clear();
+    this.holidaysMap.clear();
+    this.config.holidays = [];
     this.container.remove();
   }
   calculateFullTimeline() {
     const currentYear = this.today.getFullYear();
     let minDate = new Date(9999, 0, 1);
     let maxDate = new Date(1e3, 0, 1);
+    const { queryStartDate, queryEndDate } = this.config;
     if (this.data.length === 0) {
-      minDate = /* @__PURE__ */ new Date();
-      maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
+      minDate = queryStartDate ? queryStartDate : /* @__PURE__ */ new Date();
+      maxDate = DateUtils.addDays(queryEndDate ? queryEndDate : /* @__PURE__ */ new Date(), 60);
     } else {
       this.taskMap.forEach(({ task }) => {
         if (task.hide) {
@@ -364,6 +381,12 @@ class GanttChart {
     }
     this.minDate = minDate;
     this.maxDate = maxDate;
+    if (queryStartDate && queryStartDate < minDate) {
+      minDate = queryStartDate;
+    }
+    if (queryEndDate && queryEndDate > maxDate) {
+      maxDate = queryEndDate;
+    }
     const minYear = minDate.getFullYear();
     const maxYear = maxDate.getFullYear();
     minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
@@ -581,9 +604,9 @@ class GanttChart {
     return ctx;
   }
   /**
-   * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-   * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
-   */
+    * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+    * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
+    */
   snap(val) {
     return Math.floor(val) + 0.5;
   }
@@ -752,7 +775,7 @@ class GanttChart {
     }
     const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
     ctx.fillStyle = "#333";
-    ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+    ctx.font = "bold 12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
     ctx.textAlign = "left";
     groupedBlocks.forEach((group) => {
       const visibleStart = Math.max(group.startX, this.scrollLeft);
@@ -761,7 +784,7 @@ class GanttChart {
         ctx.fillStyle = this.config.headerBgColor;
         ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
         ctx.fillStyle = "#333";
-        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
+        ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
       }
     });
     while (currentDateForLower <= this.visibleDateRange.end) {
@@ -800,7 +823,7 @@ class GanttChart {
       }
       const unitWidth = this.dateToX(nextDate) - x;
       ctx.fillStyle = "#000412";
-      ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+      ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "center";
       ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
       ctx.beginPath();
@@ -1188,9 +1211,9 @@ class GanttChart {
     this.showTooltip = false;
   }
   /**
-   * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-   * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-   * @param pixelsPerDay 每日的像素数
+   * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+   * @param diffMilliseconds The difference in milliseconds from the target date
+   * @param pixelsPerDay Number of pixels per day
    * @returns
    */
   static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * gantt-canvas-chart v1.6.0
+ * gantt-canvas-chart v1.6.2
  * (c) 2025-present chandq
  * Released under the MIT License.
  */
@@ -11,24 +11,35 @@
   class DateUtils {
     static ONE_DAY_MS = 24 * 60 * 60 * 1e3;
     static format(date, format = "yyyy-MM-dd") {
-      const o = {
-        "M+": date.getMonth() + 1,
-        "d+": date.getDate(),
-        "h+": date.getHours(),
-        "m+": date.getMinutes(),
-        "s+": date.getSeconds(),
+      let fmt = format;
+      let ret;
+      const opt = {
+        "Y+": `${date.getFullYear()}`,
+        // 年
+        "y+": `${date.getFullYear()}`,
+        // 年
+        "M+": `${date.getMonth() + 1}`,
+        // 月
+        "D+": `${date.getDate()}`,
+        // 日
+        "d+": `${date.getDate()}`,
+        // 日
+        "h+": `${date.getHours()}`,
+        // 时
+        "m+": `${date.getMinutes()}`,
+        // 分
+        "s+": `${date.getSeconds()}`,
+        // 秒
         "q+": Math.floor((date.getMonth() + 3) / 3),
         W: ["日", "一", "二", "三", "四", "五", "六"][date.getDay()]
       };
-      if (/(y+)/.test(format))
-        format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-      for (let k in o)
-        if (new RegExp("(" + k + ")").test(format))
-          format = format.replace(
-            RegExp.$1,
-            RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
-          );
-      return format;
+      for (const k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt);
+        if (ret) {
+          fmt = fmt.replace(ret[1], ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"));
+        }
+      }
+      return fmt;
     }
     static addDays(date, days) {
       const r = new Date(date);
@@ -194,6 +205,8 @@
         showRightRemark: false,
         showCenterRemark: false,
         showTooltip: true,
+        queryStartDate: null,
+        queryEndDate: null,
         tooltipFormat: null,
         tooltipColor: "black",
         todayColor: "#ff4d4f",
@@ -333,6 +346,7 @@
     destroy() {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
+        this.resizeObserver = null;
       }
       this.container.removeEventListener("scroll", this.handleScroll);
       this.mainCanvas.removeEventListener("mousemove", this.handleMouseMove);
@@ -340,15 +354,18 @@
       this.data = [];
       this.taskMap.clear();
       this.taskPositions.clear();
+      this.holidaysMap.clear();
+      this.config.holidays = [];
       this.container.remove();
     }
     calculateFullTimeline() {
       const currentYear = this.today.getFullYear();
       let minDate = new Date(9999, 0, 1);
       let maxDate = new Date(1e3, 0, 1);
+      const { queryStartDate, queryEndDate } = this.config;
       if (this.data.length === 0) {
-        minDate = /* @__PURE__ */ new Date();
-        maxDate = DateUtils.addDays(/* @__PURE__ */ new Date(), 60);
+        minDate = queryStartDate ? queryStartDate : /* @__PURE__ */ new Date();
+        maxDate = DateUtils.addDays(queryEndDate ? queryEndDate : /* @__PURE__ */ new Date(), 60);
       } else {
         this.taskMap.forEach(({ task }) => {
           if (task.hide) {
@@ -368,6 +385,12 @@
       }
       this.minDate = minDate;
       this.maxDate = maxDate;
+      if (queryStartDate && queryStartDate < minDate) {
+        minDate = queryStartDate;
+      }
+      if (queryEndDate && queryEndDate > maxDate) {
+        maxDate = queryEndDate;
+      }
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
       minDate = DateUtils.addDays(minYear === 9999 ? new Date(currentYear, 0, 1) : minDate, -7);
@@ -585,9 +608,9 @@
       return ctx;
     }
     /**
-     * 辅助函数：像素对齐(确保MAC/Windows等不同设备上1px线条清晰)
-     * 用于 1px 线条，使其落在 x.5 位置，填满一个物理像素，避免模糊
-     */
+      * Helper function: Pixel alignment (ensures 1px lines are crisp on different devices like MAC/Windows)
+      * Used for 1px lines to position them at x.5 coordinates, filling a physical pixel to avoid blurriness
+      */
     snap(val) {
       return Math.floor(val) + 0.5;
     }
@@ -756,7 +779,7 @@
       }
       const groupedBlocks = this.groupConsecutiveBlocks(visibleBlocks);
       ctx.fillStyle = "#333";
-      ctx.font = "bold 14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+      ctx.font = "bold 12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
       ctx.textAlign = "left";
       groupedBlocks.forEach((group) => {
         const visibleStart = Math.max(group.startX, this.scrollLeft);
@@ -765,7 +788,7 @@
           ctx.fillStyle = this.config.headerBgColor;
           ctx.fillRect(Math.round(visibleStart), 0, Math.round(visibleEnd - visibleStart), Math.round(h * 0.5));
           ctx.fillStyle = "#333";
-          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos));
+          ctx.fillText(group.text, Math.round(visibleStart + 5), Math.round(group.yPos - 3));
         }
       });
       while (currentDateForLower <= this.visibleDateRange.end) {
@@ -804,7 +827,7 @@
         }
         const unitWidth = this.dateToX(nextDate) - x;
         ctx.fillStyle = "#000412";
-        ctx.font = "14px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
+        ctx.font = "12px Roboto,PingFang SC,Noto Sans SC,Microsoft YaHei UI,Microsoft YaHei,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif";
         ctx.textAlign = "center";
         ctx.fillText(lowerText, Math.round(x + unitWidth / 2), Math.round(h * 0.7));
         ctx.beginPath();
@@ -1192,9 +1215,9 @@
       this.showTooltip = false;
     }
     /**
-     * 计算任务宽度占的百分比（方便绘制精确到具体时间的每日任务）
-     * @param diffMilliseconds 距离目标日期时间的差异毫秒数
-     * @param pixelsPerDay 每日的像素数
+     * Calculate the percentage width of a task (convenient for drawing daily tasks accurate to specific times)
+     * @param diffMilliseconds The difference in milliseconds from the target date
+     * @param pixelsPerDay Number of pixels per day
      * @returns
      */
     static getTaskWidthPercent(diffMilliseconds, pixelsPerDay) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-canvas-chart",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "High performance Gantt chart component based on Canvas, can be applied to any framework",
   "type": "module",
   "main": "dist/index.es.js",