將行動態添加到 Google 圖表的時間軸

Question

我正在嘗試根據收到的特定數據添加行。 現在，我已經將樣本數據存儲在一個常量中。 我的時間軸組件如下。 YSD 是年份開始日期，msD 是月份開始日期，dsD 是日期開始日期。 yEd 也一樣，其中 e 對 yed 也是如此，它是年終日期。 我嘗試了映射，但我沒有以正確的格式獲取數據。

class Timeline extends Component {
   render() {

     const timelineData = [
        {"type": "FTF", "name": "ABC", "ysD" : "2020", "msD": "0", "dsD": "13", 
        "yeD" : "2020", "meD": "0", "deD": "29"},
        {"type": "Video Detail", "name": "BCD", "ysD" : "2020", "msD": "1", "dsD": "15", 
        "yeD" : "2020", "meD": "1", "deD": "20"}
    ]

    return(
         <div class="row" style={{ marginBottom: 30, zoom: "75%" }}>
            {
                timelineData.map((data, idx) => (
                    <Chart
                        key={idx}
                        width={'100%'}
                        height={'200px'}
                        chartType="Timeline"
                        loader={<div>Loading Chart</div>}
                        data={[
                            [
                                { type: 'string', id: 'Position'},
                                { type: 'string', id: 'Name' },
                                { type: 'date', id: 'Start' },
                                { type: 'date', id: 'End' },
                            ],
                            [
                                data.type,
                                data.name,
                                new Date(data.ysD, data.msD, data.dsD ),
                                new Date(data.yeD, data.meD, data.deD )
                            ]
                        ]}
                        options={{
                            timeline: {
                                colorByRowLabel: true,
                            },
                        }}
                        rootProps={{ 'data-testid': '3' }} />
                ))
            }
       </div>
        )

這是它的外觀截圖。

這就是我希望它的樣子：

有沒有一種不同的方法可以讓我以正確的方式從我收到的數據中動態添加行？

Answer 1

通過以不同的方式編寫 Chart 組件，找到了一種按我想要的方式顯示的方式，我在其中明確區分了行和列。 這是代碼：

class Timeline extends Component {

render() {

    const timelineData = [
        {
            "type": "FTF", "name": "ABC", "ysD": "2020", "msD": "0", "dsD": "13",
            "yeD": "2020", "meD": "0", "deD": "29"
        },
        {
            "type": "Video Detail", "name": "BCD", "ysD": "2020", "msD": "1", "dsD": "15",
            "yeD": "2020", "meD": "1", "deD": "20"
        }
    ]

    return (
        <div class="row" style={{ marginBottom: 30, zoom: "75%" }}>
            <Chart
                width={'100%'}
                height={'200px'}
                chartType="Timeline"
                loader={<div>Loading Chart</div>}
                columns={
                    [
                        { type: 'string', id: 'Position' },
                        { type: 'string', id: 'Name' },
                        { type: 'date', id: 'Start' },
                        { type: 'date', id: 'End' },
                    ]
                }
                rows={
                    timelineData.map((data, idx) => (
                        [
                            data.type,
                            data.name,
                            new Date(data.ysD, data.msD, data.dsD),
                            new Date(data.yeD, data.meD, data.deD)
                        ]
                    ))
                }
                options={{
                    timeline: {
                        colorByRowLabel: true,
                        // singleColor: "white"
                    },
                    // backgroundColor: "F3F0EF"
                }}
                rootProps={{ 'data-testid': '3' }}
            />
        </div>
    )
}
}

如您所見，我分別傳遞行和列。