[Bug] vue2.6.12使用官网的gantt例子代码，npm启动服务之后，谷歌浏览器访问报错，甘特图不能显示

Version

v1.19.4

Link to Minimal Reproduction

https://visactor.io/vtable/demo/gantt/gantt-customLayout

Steps to Reproduce

npm install @visactor/vtable
npm install @visactor/vtable-gantt

初始化参数设置等使用官方例子代码，整体如下：

<script> import { Gantt } from '@visactor/vtable-gantt'; import * as VRender from '@visactor/vtable/es/vrender'; export default { data() { return { ganttInstance: null } }, mounted() { this.initGantt(); }, methods: { initGantt() { const barColors0 = ['#aecde6', '#c6a49a', '#ffb582', '#eec1de', '#b3d9b3', '#cccccc', '#e59a9c', '#d9d1a5', '#c9bede']; const barColors = ['#1f77b4', '#8c564b', '#ff7f0e', '#e377c2', '#2ca02c', '#7f7f7f', '#d62728', '#bcbd22', '#9467bd']; const records = [ { id: 1, title: 'Project Task 1', developer: 'bear.xiong', avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg', start: '2024-07-24', end: '2024-07-26', progress: 31, priority: 'P0' }, { id: 2, title: 'Project Task 2', developer: 'wolf.lang', avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg', start: '07/25/2024', end: '07/28/2024', progress: 60, priority: 'P0' }, { id: 3, title: 'Project Task 3', developer: 'rabbit.tu', avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg', start: '2024-07-28', end: '2024-08-01', progress: 100, priority: 'P1' }, { id: 1, title: 'Project Task 4', developer: 'cat.mao', avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg', start: '2024-07-31', end: '2024-08-03', progress: 31, priority: 'P0' }, { id: 2, title: 'Project Task 5', developer: 'bird.niao', avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg', start: '2024-08-02', end: '2024-08-04', progress: 60, priority: 'P0' }, { id: 3, title: 'Project Task 6', developer: 'flower.hua', avatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg', start: '2024-08-03', end: '2024-08-10', progress: 100, priority: 'P1' } ]; const columns = [ { field: 'title', title: 'TASK', width: '200', headerStyle: { textAlign: 'center', fontSize: 20, fontWeight: 'bold', color: 'black', bgColor: '#f0f0fb' }, style: { bgColor: '#f0f0fb' }, customLayout: args => { const { table, row, col, rect } = args; const taskRecord = table.getCellOriginRecord(col, row); const { height, width } = rect ?? table.getCellRect(col, row); const container = new VTableGantt.VRender.Group({ y: 10, x: 20, height: height - 20, width: width - 40, fill: 'white', display: 'flex', flexDirection: 'column', cornerRadius: 30 }); const developer = new VTableGantt.VRender.Text({ text: taskRecord.developer, fontSize: 16, fontFamily: 'sans-serif', fill: barColors[args.row], fontWeight: 'bold', maxLineWidth: width - 120, boundsPadding: [10, 0, 0, 0], alignSelf: 'center' }); container.add(developer); const days = new VTableGantt.VRender.Text({ text: `${VTableGantt.tools.formatDate(new Date(taskRecord.start), 'mm/dd')}-${VTableGantt.tools.formatDate( new Date(taskRecord.end), 'mm/dd' )}`, fontSize: 12, fontFamily: 'sans-serif', fontWeight: 'bold', fill: 'black', boundsPadding: [10, 0, 0, 0], alignSelf: 'center' }); container.add(days); return { rootContainer: container, expectedWidth: 160 }; } } ]; const option = { records, taskListTable: { columns, tableWidth: 'auto', theme: { headerStyle: { borderColor: '#e1e4e8', borderLineWidth: 0, fontSize: 18, fontWeight: 'bold', color: 'red' // bgColor: '#EEF1F5' }, bodyStyle: { borderColor: '#e1e4e8', borderLineWidth: 0, fontSize: 16, color: '#4D4D4D', bgColor: '#FFF' } } }, frame: { outerFrameStyle: { borderLineWidth: 0, borderColor: 'red', cornerRadius: 8 } // verticalSplitLineHighlight: { // lineColor: 'green', // lineWidth: 3 // } }, grid: { backgroundColor: '#f0f0fb', // vertical: { // lineWidth: 1, // lineColor: '#e1e4e8' // }, horizontalLine: { lineWidth: 2, lineColor: '#d5d9ee' } }, headerRowHeight: 60, rowHeight: 80, taskBar: { startDateField: 'start', endDateField: 'end', progressField: 'progress', barStyle: { width: 60 }, customLayout: args => { const colorLength = barColors.length; const { width, height, index, startDate, endDate, taskDays, progress, taskRecord, ganttInstance } = args; const container = new VTableGantt.VRender.Group({ width, height, cornerRadius: 30, fill: { gradient: 'linear', x0: 0, y0: 0, x1: 1, y1: 0, stops: [ { offset: 0, color: barColors0[index % colorLength] }, { offset: 0.5, color: barColors[index % colorLength] }, { offset: 1, color: barColors0[index % colorLength] } ] }, display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }); const containerLeft = new VTableGantt.VRender.Group({ height, width: 60, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' // fill: 'red' }); container.add(containerLeft); const avatar = new VTableGantt.VRender.Image({ width: 50, height: 50, image: taskRecord.avatar, cornerRadius: 25 }); containerLeft.add(avatar); const containerCenter = new VTableGantt.VRender.Group({ height, width: width - (width >= 120 ? 120 : 60), display: 'flex', flexDirection: 'column' // alignItems: 'left' }); container.add(containerCenter); const developer = new VTableGantt.VRender.Text({ text: taskRecord.developer, fontSize: 16, fontFamily: 'sans-serif', fill: 'white', fontWeight: 'bold', maxLineWidth: width - (width >= 120 ? 120 : 60), boundsPadding: [10, 0, 0, 0] }); containerCenter.add(developer); const days = new VTableGantt.VRender.Text({ text: `${taskDays}天`, fontSize: 13, fontFamily: 'sans-serif', fill: 'white', boundsPadding: [10, 0, 0, 0] }); containerCenter.add(days); if (width >= 120) { const containerRight = new VTableGantt.VRender.Group({ cornerRadius: 20, fill: 'white', height: 40, width: 40, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', // 垂直方向居中对齐 boundsPadding: [10, 0, 0, 0] }); container.add(containerRight); const progressText = new VTableGantt.VRender.Text({ text: `${progress}%`, fontSize: 12, fontFamily: 'sans-serif', fill: 'black', alignSelf: 'center', fontWeight: 'bold', maxLineWidth: (width - 60) / 2, boundsPadding: [0, 0, 0, 0] }); containerRight.add(progressText); } return { rootContainer: container // renderDefaultBar: true // renderDefaultText: true }; }, hoverBarStyle: { cornerRadius: 30 } }, timelineHeader: { backgroundColor: '#f0f0fb', colWidth: 80, // verticalLine: { // lineColor: 'red', // lineWidth: 1, // lineDash: [4, 2] // }, // horizontalLine: { // lineColor: 'green', // lineWidth: 1, // lineDash: [4, 2] // }, scales: [ { unit: 'day', step: 1, format(date) { return date.dateIndex.toString(); }, customLayout: args => { const colorLength = barColors.length; const { width, height, index, startDate, endDate, days, dateIndex, title, ganttInstance } = args; const container = new VTableGantt.VRender.Group({ width, height, fill: '#f0f0fb', display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }); const containerLeft = new VTableGantt.VRender.Group({ height, width: 30, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' // fill: 'red' }); container.add(containerLeft); const avatar = new VTableGantt.VRender.Image({ width: 20, height: 30, image: '' }); containerLeft.add(avatar); const containerCenter = new VTableGantt.VRender.Group({ height, width: width - 30, display: 'flex', flexDirection: 'column' // alignItems: 'left' }); container.add(containerCenter); const dayNumber = new VTableGantt.VRender.Text({ text: String(dateIndex).padStart(2, '0'), fontSize: 20, fontWeight: 'bold', fontFamily: 'sans-serif', fill: 'black', textAlign: 'right', maxLineWidth: width - 30, boundsPadding: [15, 0, 0, 0] }); containerCenter.add(dayNumber); const weekDay = new VTableGantt.VRender.Text({ text: VTableGantt.tools.getWeekday(startDate, 'short').toLocaleUpperCase(), fontSize: 12, fontFamily: 'sans-serif', fill: 'black', boundsPadding: [0, 0, 0, 0] }); containerCenter.add(weekDay); return { rootContainer: container //renderDefaultText: true }; } } ] }, minDate: '2024-07-20', maxDate: '2024-08-15', markLine: [ { date: '2024-07-29', style: { lineWidth: 1, lineColor: 'blue', lineDash: [8, 4] } }, { date: '2024-08-17', style: { lineWidth: 2, lineColor: 'red', lineDash: [8, 4] } } ], scrollStyle: { scrollRailColor: 'RGBA(246,246,246,0.5)', visible: 'focus', width: 6, scrollSliderCornerRadius: 2, scrollSliderColor: '#5cb85c' } }; this.ganttInstance = new Gantt(document.getElementById("ganttContainer"), option); } }, beforeDestroy() { if (this.ganttInstance) { this.ganttInstance.release(); } } }; </script> <style> .gantt-chart { width: 100%; height: 600px; border: 1px solid #ebeef5; border-radius: 4px; } </style>

Current Behavior

chrome访问此网页，控制台报错

TypeError: application__WEBPACK_IMPORTED_MODULE_1_.application.graphicService.creator[graphicType] is not a function
at ScrollBar.createOrUpdateChild (webpack-internal:///./node_modules/@visactor/vrender-components/node_modules/@visactor/vrender-core/es/graphic/group.js:200:165)
at ScrollBar.render (webpack-internal:///./node_modules/@visactor/vrender-components/es/scrollbar/scrollbar.js:116:233)
at TableComponent.createScrollBar (webpack-internal:///./node_modules/@visactor/vtable/es/scenegraph/component/table-component.js:226:29)
at new TableComponent (webpack-internal:///./node_modules/@visactor/vtable/es/scenegraph/component/table-component.js:28:14)
at Scenegraph.createComponent (webpack-internal:///./node_modules/@visactor/vtable/es/scenegraph/scenegraph.js:262:26)
at new Scenegraph (webpack-internal:///./node_modules/@visactor/vtable/es/scenegraph/scenegraph.js:154:14)
at new BaseTable (webpack-internal:///./node_modules/@visactor/vtable/es/core/BaseTable.js:217:27)
at new ListTable (webpack-internal:///./node_modules/@visactor/vtable/es/ListTable.js:66:9)
at new ListTableAll (webpack-internal:///./node_modules/@visactor/vtable/es/ListTable-all.js:24:1)
at Gantt._generateListTable (webpack-internal:///./node_modules/@visactor/vtable-gantt/es/Gantt.js:128:42)
logError @ vue.runtime.esm.js?2b0e:1888

Expected Behavior

能够像官网那样使用甘特图，正常显示甘特图

Environment

- OS: windows 10
- Browser:  chrome
- Framework: vue@2.6.12

Any additional comments?

No response

Start with the linked gantt-customLayout reproduction using Vue 2.6.12, @visactor/vtable, and @visactor/vtable-gantt, then inspect the Google Chrome console for the reported error. The issue is complete when the official custom-layout gantt example starts without an error and renders the gantt chart.