如何解决动态添加行到谷歌图表的时间线
我正在尝试根据收到的特定数据添加行。现在,我已将该示例数据存储在一个常量中。我的时间轴组件如下。 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>
)
}
}
如您所见,我分别传递行和列。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。