Timeline
一个基于d3js
进行开发的时间线组件
作者:yanxww
API
props | 默认值 | |
---|---|---|
width | 不包括时间线左侧标题的宽度 | 600 |
height | 不包括时间线下方时间轴的高度 | 200 |
margin | 整个事件轴组件的margin设置 | 0 |
colors | 每一个group的颜色设置,可以每行一个颜色[color, color, color] ,也可以设置多个用数组形式[[color,color], [color, color], [color,color]] ,混合也是支持的[color, [color, color], color]
|
|
data | 事件轴数据,数据格式如下 | |
barHeight | group-item高度 | 30 |
barTitleWidth | group标题宽度 | 80 |
onClick | group-item点击事件,有三个参数,el点击元素,e点击事件,d点击的group-item的数据 | (el, e, d) => {} |
const data = [
{
group: '中国',
items: [
{
start_time: '2000',
end_time: '2017',
title: 'china-01',
content: '2000-2017 china-01'
},
{
start_time: '2021',
end_time: '2022',
title: 'china-02',
content: '2021-2022 china-02'
},
]
},
{
group: '日本',
items: [
{
start_time: '2006',
end_time: '2008',
title: 'nihonggo-01',
content: '2006-2008 nihong-01'
},
{
start_time: '2012',
end_time: '2018',
title: 'nihonggo-02',
content: '2012-2018 nihong-02'
},
]
},
{
group: '欧洲',
items: [
{
start_time: '2002',
end_time: '2008',
title: 'EU-01',
content: '2002-2008 EU-01'
},
{
start_time: '2008',
end_time: '2016',
title: 'EU-02',
content: '2008-2016 EU-02'
},
]
}
]
Timeline v.1.0.2