![](/img/trans.png)
[英]How to render gantt chart using react-google-charts with react native?
[英]Beginner: Setting up React Gantt chart using google charts
目標 :顯示反應中的甘特圖。 目前使用谷歌圖表與github的反應包裝。 我還是React和JS的新手,我正在努力學習!
問題 :可能誤解了一些關鍵的東西,我還沒有意識到! 我找不到文檔/示例來幫助我克服這個困境。 我90%肯定我的語法錯了但幾個小時后我仍然認為我沒有走上正軌。
我正在使用的資源 :
反應谷歌圖表Gant示例嘗試使用道具窗口作為指導
目前停留在渲染上的代碼 :
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;
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'],
],
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.