使用Airtable，Gatsby＆React构建交互式甘特图

>本文演示了如何轻松地将各种数据源（特别是可通行的）集成到盖茨比应用程序中，以构建以进行任务管理的交互式gantt图表。 我们将使用React作为前端和混合渲染策略，以实现最佳性能。

>该项目为各种调度应用程序提供了模板。 我的盖茨比云网站上有实时演示，并且源代码在github上。

>。

密钥功能：

• 简化的数据集成： gatsby流线连接到诸如airtable之类的数据源。。 >
交互式gantt图表：
• >基于反应的甘特图允许拖放任务操纵。 使用服务器端Webhooks（用于自动重建）和客户端轮询（使用React's），可以实现与Airtable的实时同步（使用React's）。
>
• 有效的静态站点生成： gatsby的静态站点生成可确保快速加载时间。 useEffectgraphql＆airtable插件：
pragrages graphql查询和
• 插件用于数据获取。
>拖放功能：
• REECT组件管理拖放，将更新推回了通过其REST API。 gatsby-source-airtable项目设置：
• Gatsby是静态站点发生器。 React代码被编译到服务器提供的静态HTML文件中。这与传统的Web应用程序形成鲜明对比，其中HTML组装了客户端。 这种预渲染显着提高了加载速度。
>

> install node.js和npm：

>用>。验证安装

安装gatsby cli：

使用

1. 。 创建一个新的盖茨比项目：node -v
>
2. >导航到项目目录：npm install -g gatsby-cli
3. > 启动开发服务器：gatsby new gantt-chart-gatsby
（
4. 访问）>> cd gantt-chart-gatsby
用react构建前端：
5. > 甘特图被作为可重复使用的反应组件实现。 最初，在集成可通行之前，我们将使用硬编码的JSON数据。。 gatsby develophttp://localhost:8000

>

> css样式： a文件为gantt图表的布局和外观提供了样式。

> ganttchart组件：此组件处理图表的渲染，包括行的初始化和单元格的初始化。 ChartCell组件呈现单个单元格，管理工作位置。

>集成可用的：

1. 创建一个可动用的基础：创建一个带有“作业”和“资源”表的基础（使用适当的字段：id，start，end，resource，id，用于作业; name，
用于资源）。 在“作业”和“资源”表之间建立一个链接。
2. > >>安装可动用插件：npm install --save gatsby-source-airtable
3. > 在 用GraphQl：gatsby-config.js> gatsby-source-airtable在您的React组件中使用GraphQl查询来从Airtable获取数据
4. 双向同步：

>使用服务器端网络钩和客户端轮询的混合方法确保数据一致性：

>服务器端（webhooks）：

客户端（轮询）：
• 使用其REST API从Airtable定期获取更新的数据。 这确保了甘特图反映了最新的更改。>
• >拖放和数据更新：使用标准的JavaScript拖放事件实现了拖放功能。 使用其REST API将更改推回了空调。 > useEffect常见问题解答：
本文以全面的常见问题解答部分结束，以解决自定义，数据源替代方案，添加依赖关系，导出，身份验证，移动兼容性，实时更新和替代图表库。

>>>>>>>>>>>

以上是使用Airtable，Gatsby＆React构建交互式甘特图的详细内容。更多信息请关注PHP中文网其他相关文章！