初学者：使用google图表设置React甘特图

目标：在反应中显示甘特图。目前使用谷歌图表与github反应包装。我对React和JS还是个新手，我正在努力学习！初学者：使用google图表设置React甘特图

问题：可能误解重要的东西我还没有意识到！我无法找到帮助我渡过这个坎坷的文档/例子。我90％确定我的语法错了，但几个小时后我仍然认为我没有走上正轨。

资源我使用：

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

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

代码，因此目前停留在渲染：

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;

来源

2017-04-03 Farstride

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'], 
],

来源

2017-04-24 14:19:05 skymon

初学者：使用google图表设置React甘特图

回答

相关问题