Html5 canvas 使用konva在画布中绘制类似电子表格的网格

我正在使用HTML5画布和Konvajs画布库进行类似甘特图的任务显示

将甘特图分解为其组件将使我当前看到如下视图。这里1是任务列表，2是任务栏区域，3是任务栏，4是文本单元格

对于这个问题，我正在寻找构造1和4的代码。要显示的数据将以普通JS对象的形式传递，其中包含嵌套的任务列表，其中每个任务都有一个编号、名称、分配给人名、开始日期、结束日期、持续天数和完成百分比

因此，要求能够构建一个类似电子表格的面板，如甘特图左侧所示

我有一个部分开发了，我将发布作为一个答案。然而，这似乎是一种常见的需求，我希望有人能将代码剪切粘贴到其中，从而引领潮流

---

注意：示例图像中的甘特图来自。

所以这里是我自己摸索的方法。有人能改进吗？还是我走错了路

编辑：我现在有一个初出茅庐的组件，用于将文本绘制到类似电子表格的单元格中，包括完成百分比着色。为了保持这个答案的完整性，这个额外的组件在

//这是定义网格的对象
// 
var gridData={name:'grid1'，width:350，height:400，rowHeight:24，padding:4，fill:'azure'，gridLineColor:'ccc'，header:{size:16，fill:'black'，color:'white'}，data:{size:16，fill:'azure'，color:'black'}，
行：[
{单元格：//第1行
[
{宽度：50，文本：'Item'，样式：'header'}，
{宽度：240，文本：'Name'，样式：'header'}，
{宽度：60，文本：'Status'，样式：'header'}，
]
},
{单元格：//第2行
[
{text:'1'}，
{文本：“查找茶壶”}，
{文本：“100%”，
]
},
{单元格：//第3行
[
{文本：'2'}，
{文本：'开水'}，
{文本：“60%”，
]
}
]
}
//从现在起，可以将其包装成一个能够大量生产网格的组件。也许你会通过舞台容器的id
//以及您想要生成的数据模型等。
//设置画布/舞台
var stage=new Konva.stage（{container:'container1'，宽度：600，高度：300}）；
//添加一层
var layer=new Konva.layer（{draggable:false}）；
阶段。添加（层）；
//为网格创建一个主组，称之为面板。指定一个名字以后可能会很方便
var panel=new Konva.Group（{name:gridData.name}）；
图层。添加（面板）；//将面板添加到图层
//组没有可视属性。添加背景矩形以保持颜色填充
var panelRect=new Konva.Rect（{width:gridData.width，height:gridData.height，fill:gridData.fill}）
panel.add（panelRect）；
var topLeft={x:0，y:0}；//因为我们正在绘制网格，所以需要计算每个单元的位置
对于（变量i=0；i