项目作者: sateesh2020

项目描述 :
Gantt Chart built with React and D3
高级语言: JavaScript
项目地址: git://github.com/sateesh2020/react-gantt.git
创建时间: 2018-05-15T06:06:56Z
项目社区:https://github.com/sateesh2020/react-gantt

开源协议:

下载


React Gantt

A React and D3 Plugin to render Gantt Chart.

How to use

  1. import { GanttChart } from "react-d3gantt";
  2. const chartDate = [
  3. .....
  4. ]
  5. <GanttChart chartData={chartDate} ></GanttChart>

Sample Data

  1. [
  2. {
  3. id: "999e8ab",
  4. versionNumber: 1.0,
  5. startDate: new Date("2018-02-28"),
  6. endDate: new Date("2018-04-26"),
  7. taskName: "IOS Development",
  8. description: "Sprint 5",
  9. color: "#BA68C8",
  10. percentageCompleted: 80.0,
  11. },
  12. {
  13. id: "16c0013",
  14. versionNumber: 0.95,
  15. startDate: new Date("2018-01-31"),
  16. endDate: new Date("2018-02-27"),
  17. taskName: "IOS Development",
  18. description: "Sprint 6",
  19. color: "#BA68C8",
  20. percentageCompleted: 100.0,
  21. },
  22. {
  23. id: "4a16c13",
  24. versionNumber: 0.95,
  25. startDate: new Date("2018-01-31"),
  26. endDate: new Date("2018-02-27"),
  27. taskName: "Android Development",
  28. description: "Sprint 6",
  29. color: "#BA68C8",
  30. percentageCompleted: 100.0,
  31. }
  32. ]

Mandatory Keys in every JSON object

  • versionNumber
  • startDate
  • endDate
  • taskName
  • description
  • color
  • percentageCompleted

Features

  • Multicolor supportby providing through color key.
  • Milestone representation based on the versioning.
  • Bar fill based on the percentage completed.

Dependencies

  • D3
  • React
  • React DOM

Install

  1. npm install react-d3gantt