[英]Dynamically adding row to a timeline of Google Charts
I'm trying to add rows based on a specific data received.我正在尝试根据收到的特定数据添加行。 For now, I've stored that sample data in a constant.
现在,我已经将样本数据存储在一个常量中。 My Timeline component is below.
我的时间轴组件如下。 YSD is year start date, msD is month start date, dsD is day start date.
YSD 是年份开始日期,msD 是月份开始日期,dsD 是日期开始日期。 The same thing for yEd where e is just so for yed, it is year end date.
yEd 也一样,其中 e 对 yed 也是如此,它是年终日期。 I tried mapping but I'm not getting the data in the correct format.
我尝试了映射,但我没有以正确的格式获取数据。
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>
)
Here is a screenshot of how it is looking like.这是它的外观截图。
And here is how I want it to look like:这就是我希望它的样子:
Is there a different approach wherein I can dynamically add rows from the data I receive in the correct way?有没有一种不同的方法可以让我以正确的方式从我收到的数据中动态添加行?
Found a way to display as I wanted it by writing the Chart component in a different way, where I made a clear distinction between rows and columns.通过以不同的方式编写 Chart 组件,找到了一种按我想要的方式显示的方式,我在其中明确区分了行和列。 Here is the code:
这是代码:
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>
)
}
}
As you can see, I'm passing rows and columns separately.如您所见,我分别传递行和列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.