React-vis-timeline - 无法初始化项目数据

Question

我对 vis 时间轴初始化有疑问。时间线可见但没有任何数据。我试图传递不同格式的项目，但它看起来像附图。这有什么问题？我的反应组件：

import 'vis-timeline/styles/vis-timeline-graph2d.min.css';
import Timeline from 'react-vis-timeline'

const items = [{
    id: 1,
    start: new Date(2025, 7, 15),
    end: new Date(2025, 8, 2),
    content: 'Test 1',
},
{
    id: 2,
    start: new Date(2025, 7, 17),
    end: new Date(2025, 8, 3),
    content: 'Test 2',
}
];

const options = {
    width: '100%',
    height: '450px',
};

class Timeline2D extends React.Component {

    render() {
        return <Timeline options={options} initialItems={items} />;
    }
}

export default Timeline2D;

Result

Answer 1

要解决这个问题，我需要设置群组。请参阅正确示例：

import React from 'react';
import 'vis-timeline/styles/vis-timeline-graph2d.min.css';
import Timeline from 'react-vis-timeline'

const items = [{
    id: 1,
    group: 1,
    start: '2014-04-20',
    end: '2014-04-26',
    content: 'Test 1',
},
{
    id: 2,
    group: 2,
    start: '2014-04-22',
    end: '2014-04-29',
    content: 'Test 2',
}
];

const groups = [{
    id: 1,
    content: 'Group 1',
},
{
    id: 2,
    content: 'Group 2',
}
];

const options = {
    width: '100%',
    height: '450px',
};

class Timeline2D extends React.Component {

    render() {
        return <Timeline options={options} initialItems={items} initialGroups={groups}/>;
    }
}

export default Timeline2D;

React-vis-timeline - 无法初始化项目数据

React-vis-timeline - cannot initialize items data

reactjs

sulu