动态添加行到谷歌图表的时间线

问题描述

我正在尝试根据收到的特定数据添加行。现在，我已将该示例数据存储在一个常量中。我的时间轴组件如下。 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","msD": "1","dsD": "15","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' },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>
        )

这是它的外观截图。

这是我想要的样子：

是否有不同的方法可以让我以正确的方式从收到的数据中动态添加行？

解决方法

通过以不同的方式编写 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","msD": "1","dsD": "15","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' },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>
    )
}
}

如您所见，我分别传递行和列。