介绍
kendo-ui-react-jquery-gantt 是一个基于 React 和 jQuery 的 npm 包，可以用于创建 Gantt 图表。支持多语言、导航、时间线和简化布局等功能，适用于各种项目管理和时间规划。
安装
在项目文件夹下执行以下命令安装 kendo-ui-react-jquery-gantt：
npm install --save kendo-ui-react-jquery-gantt
使用
在项目文件中引入 kendo-ui-react-jquery-gantt：
import KendoReactGantt from 'kendo-ui-react-jquery-gantt';
在 render 方法中使用 KendoReactGantt 组件：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
----------------
-------------
---------- -
----- ---------------------------------------------
--------- -------
--
------- -
------ -
--- -----
------- -
--- - ----- ----- ----- -------- --
--------- - ----- ----------- ----- --------- --------- ---- --
------ - ----- -------- ----- ------ --
---- - ----- ------ ----- ------ --
------ - ----- -------- ------------- --- ------- ----------- - --------- ---- - --
---------------- - ----- ------------------ ----- -------- --
-------- - ----- ---------- ----- --------- --
--------- - ----- ----------- ----- ---------- ------------- ---- -
-
-
-
--
----------- ------ -------- ------ ----- ------- ------ --- ---
-------------- ------- ---------
----------- ------- ----- ------- ----- -------- ---- --
------------
--
--
-
-API
dataSource
数据源，包括读取地址和数据格式等。
transport
数据传输参数，包括读取地址和数据类型等。
read
读取地址，支持数组、字符串和函数。
dataType
数据类型，包括 "jsonp"、"json" 等。
schema
数据模式，包括 id 标识、字段类型等。
model
数据模型，包括 id、parentId、start、end、title、percentComplete 等字段。
columns
列模式，包括字段名、列宽度等。
views
视图模式，包括 "day"、"week"、"month" 等。
editable
编辑模式，包括创建、更新、删除等。
height
高度，以像素为单位。
示例
以下代码展示如何使用 kendo-ui-react-jquery-gantt 创建一个简单的 Gantt 图表：
-- -------------------- ---- -------
------ --------------- ---- ------------------------------
----- ----------- ------- --------------- -
-------- -
------ -
----------------
-------------
---------- -
----- ---------------------------------------------
--------- -------
--
------- -
------ -
--- -----
------- -
--- - ----- ----- ----- -------- --
--------- - ----- ----------- ----- --------- --------- ---- --
------ - ----- -------- ----- ------ --
---- - ----- ------ ----- ------ --
------ - ----- -------- ------------- --- ------- ----------- - --------- ---- - --
---------------- - ----- ------------------ ----- -------- --
-------- - ----- ---------- ----- --------- --
--------- - ----- ----------- ----- ---------- ------------- ---- -
-
-
-
--
----------- ------ -------- ------ ----- ------- ------ --- ---
-------------- ------- ---------
----------- ------- ----- ------- ----- -------- ---- --
------------
--
--
-
-
总结
通过本文的介绍和示例，读者可以初步了解如何使用 kendo-ui-react-jquery-gantt 创建 Gantt 图表，并实现各种功能。同时，读者可以通过自行探究 kendo-ui-react-jquery-gantt 的更多功能，来满足更加复杂的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d88fc