初学者：使用谷歌图表设置 React 甘特图答案

【问题标题】：Beginner: Setting up React Gantt chart using google charts初学者：使用谷歌图表设置 React 甘特图
【发布时间】：2017-04-03 10:33:16
【问题描述】：

目标：在反应中显示甘特图。目前使用来自 github 的带有 react wrapper 的 Google Charts。我还是 React 和 JS 的新手，我正在努力学习！

问题：可能误解了一些我还不知道的关键问题！我找不到帮助我克服困难的文档/示例。我 90% 确定我的语法错了，但几个小时后我仍然认为我没有走在正确的轨道上。

我正在使用的资源：

React google charts Gant example尝试使用道具窗口作为指导

^ The github readme from the above, specifically using the rows/columns setup

This older SO question.

当前卡在渲染中的代码：

import { Chart } from 'react-google-charts';
import React from 'react';

class ExampleChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      rows: [
        ['Research','Find sources','2015-01-01T08:00:00.000Z','2015-01-05T08:00:00.000Z',null,100,null],
        ['Write','Write paper',null,'2015-01-09T08:00:00.000Z',259200000,25,'Research,Outline'],
        ['Cite','Create bibliography',null,'2015-01-07T08:00:00.000Z',86400000,20,'Research'],
        ['Complete','Hand in paper',null,'2015-01-10T08:00:00.000Z',86400000,0,'Cite,Write'],
        ['Outline','Outline paper',null,'2015-01-06T08:00:00.000Z',86400000,100,'Research'],
      ],

      columns: [
        {
          id:'Task ID',
          type:'string',
        },
        {
          id:'Task Name',
          type:'string',
        },
        {
          id:'Start Date',
          type:'date',
        },
        {
          id:'End Date',
          type:'date',
        },
        {
          id:'Duration',
          type:'number',
        },
        {
          id:'Percent Complete',
          type:'number',
        },
        {
          id:'Dependencies',
          type:'string',
        },
      ],
    };
  }


  render() {
    return (
      <Chart
             graph_id="ganttchart"
             chartType = "Gantt"
             columns={this.state.columns}
             rows={this.state.rows}
             chartPackages={['gantt']}
             width="100%" height="9999px">
         </Chart>
    );
  }
}
export default ExampleChart;

【问题讨论】：

标签： javascript reactjs charts gantt-chart

【解决方案1】：

react-google-charts 似乎期望 Date 对象。我没有在源代码中明确验证这一点，但是当我将rows 更改为：

rows: [
    ['Research','Find sources',new Date(2015,1,1,8,0,0), new Date(2015,1,5,8,0,0),null,100,null],
    ['Write','Write paper',null,new Date(2015,1,9,12,0,0),259200000,25,'Research,Outline'],
    ['Cite','Create bibliography',null,new Date(2015,1,7,8,0,0),86400000,20,'Research'],
    ['Complete','Hand in paper',null,new Date(2015,1,10,8,0,0),86400000,0,'Cite,Write'],
    ['Outline','Outline paper',null,new Date(2015,1,6,8,0,0),86400000,100,'Research'],
],

【讨论】：