阿葛廷

人一定要靠自己!

1 minute read

Tags: ,

你今天 甘蔗了嗎?

Google Gantt Chart

  • See the below table for a list of how Gantt handles the presence of start, end, and duration in different circumstances.
Start End Duration Result
Present Present Present Check that duration is consistent with start/end times. Throws error if inconsistent.
Present Present Null Computes duration from start and end times.
Present Null Present Computes end time.
Present Null Null Throws error as unable to compute duration or end time.
Null Present Present Computes start time.
Null Null Present Computes start time based on dependencies. In conjunction with defaultStartDate, enables chart to be drawn using only durations.
Null Present Null Throws error as unable to calculate start time or duration.
Null Null Null Throws error as unable to calculate start time, end time, or duration.

React Google charts

  
import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}
const columns = [
  { type: "string", label: "Task ID" },
  { type: "string", label: "Task Name" },
  { type: "date", label: "Start Date" },
  { type: "date", label: "End Date" },
  { type: "number", label: "Duration" },
  { type: "number", label: "Percent Complete" },
  { type: "string", label: "Dependencies" }
];

const rows = [
  [
    "Research",
    "Find sources",
    new Date(2015, 0, 1),
    new Date(2015, 0, 5),
    null,
    100,
    null
  ],
  [
    "Write",
    "Write paper",
    null,
    new Date(2015, 0, 9),
    daysToMilliseconds(3),
    25,
    "Research,Outline"
  ],
  [
    "Cite",
    "Create bibliography",
    null,
    new Date(2015, 0, 7),
    daysToMilliseconds(1),
    20,
    "Research"
  ],
  [
    "Complete",
    "Hand in paper",
    null,
    new Date(2015, 0, 10),
    daysToMilliseconds(1),
    0,
    "Cite,Write"
  ],
  [
    "Outline",
    "Outline paper",
    null,
    new Date(2015, 0, 6),
    daysToMilliseconds(1),
    100,
    "Research"
  ]
];
class App extends React.Component {
  state = {
    chartImageURI: ""
  };
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Gantt"
          data={[columns, ...rows]}
          width="100%"
          height="50%"
          legendToggle
        />
        <div>
          I'm a picture of the chart
          <img src={this.state.chartImageURI} />
        </div>
      </div>
    );
  }
}

recharts

Echarts

  • https://echarts.apache.org/en/index.html

    • Echarts for react

       npm install --save echarts-for-react
      
 # `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
 npm install --save echarts

JSCharting

DHTMLX Gantt

react-gantt-timeline

You May Also Enjoy