createGraph({data: {nodes: new Array(25).fill(0).map((_, index) => ({id: `node-${index}`,data: {timestamp: new Date('2023-08-01').getTime() + (index % 5) * 3600 * 24 * 1000,value: index % 10,label: new Date(new Date('2023-08-01').getTime() + (index % 5) * 3600 * 24 * 1000).toLocaleString(),},})),edges: new Array(25).fill(0).map((_, i) => ({id: `edge-${i}`,source: `node-${i % 12}`,target: `node-${(i % 10) + 15}`,data: {edgeType: 'e1',},})),},layout: { type: 'grid', cols: 5 },node: {style: { size: 24, fill: '#7e3feb' },palette: { field: 'cluster' },},edge: { style: { stroke: '#8b9baf' } },behaviors: ['drag-canvas'],plugins: ['grid-line',{type: 'timebar',key: 'timebar',data: [10, 2, 3, 4, 15].map((value, index) => ({time: new Date(new Date('2023-08-01').getTime() + index * 3600 * 24 * 1000),value,label: new Date(new Date('2023-08-01').getTime() + index * 3600 * 24 * 1000).toLocaleString(),})),timebarType: 'time',height: 100,},],autoFit: 'view',padding: [10, 0, 100, 0],},{ width: 600, height: 400 },(gui, graph) => {const options = {type: 'timebar',position: 'bottom',enable: true,timebarType: 'time',className: 'g6-timebar',width: 450,height: 100,zIndex: 3,elementTypes: ['node'],mode: 'modify',loop: false,};const optionFolder = gui.addFolder('Timebar Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'height', 40, 100, 1);optionFolder.add(options, 'width', 200, 800, 1);optionFolder.add(options, 'position', ['bottom', 'top']);optionFolder.add(options, 'timebarType', ['time', 'chart']);optionFolder.add(options, 'loop');optionFolder.onChange(({ property, value }) => {graph.updatePlugin({key: 'timebar',[property]: value,});graph.render();});const apiFolder = gui.addFolder('Timebar API');const instance = graph.getPluginInstance('timebar');apiFolder.add(instance, 'play');apiFolder.add(instance, 'pause');apiFolder.add(instance, 'forward');apiFolder.add(instance, 'backward');apiFolder.add(instance, 'reset');},);
参考示例:
timebar
| string
此插件已内置,你可以通过 type: 'timebar'
来使用它。
string Default:
'g6-timebar'
给工具栏的 DOM 追加的类名,便于自定义样式
number[] | { time: number; value: number; }[]
时间数据
timebarType
为 'chart'
时,需要额外传入 value
字段作为图表数据
('node' | 'edge' | 'combo')[]
筛选类型
(datum: NodeData | EdgeData | ComboData) => number
获取元素时间
number Default:
60
时间条高度
(time: number | Date) => string
图表模式下自定义时间格式化
boolean Default:
false
是否循环播放
'modify' | 'visibility' Default:
'modify'
筛选模式
'modify'
: 通过修改图数据进行筛选
'visibility'
: 通过修改元素可见性进行筛选
() => void
后退时执行的回调
(values: number | [number, number]) => void
时间区间变化时执行的回调
() => void
前进时执行的回调
() => void
暂停时执行的回调
() => void
开始播放时执行的回调
() => void
重置时执行的回调
(speed: number) => void
播放速度变化时执行的回调
number | number[]
边距
'bottom' | 'top' Default:
'bottom'
Timebar 的位置
'time' | 'chart' Default:
'time'
Timebar 展示类型
'time'
: 显示为时间轴'chart'
: 显示为趋势图number | [number, number] | Date | [Date, Date]
当前时间值
number Default:
450
时间条宽度
number
X 位置
设置后 position
会失效
number
Y 位置
设置后 position
会失效
后退
backward(): void;
前进
forward(): void;
暂停
pause(): void;
播放
play(): void;
重置
reset(): void;