1

我正在尝试解决 vis.js 时间线的问题，希望能从你们那里得到一些指导。console.log 正在显示数据，但浏览器显示空白屏幕。不幸的是，我完全不知道还有什么方法可以让它发挥作用。

我有以下代码。我尝试了不同的方法来使其工作，但到目前为止还没有运气。任何帮助将不胜感激。

     // Config for the Timeline as JSON
const options = {
    width: '100%',
    height: '60px',
    stack: false,
    showMajorLabels: true,
    showCurrentTime: true,
    zoomMin: 1000000,
    type: 'background',
    format: {
      minorLabels: {
        minute: 'h:mma',
        hour: 'ha'
      }
    }
  }

class ScaleTime extends Component{
    constructor({data=[]}) {
        super({data})        
        this.state = {data, id:''}
        //console.log('ScaleTime Data:', data)
      }

      render(){
        const { data } = this.state
        const newAction = data.action.map((actionItem, index) => ({
          ...actionItem,
          id: index + 1
        }));
        const items = {
          ...data,
          action: newAction
        };
        const timeLineData = new vis.DataSet([{items}])
        console.log('timeLineData:', timeLineData)

        var container = document.getElementById('timeline');
          return(              

            <div className="timeline">
                <Timeline 
                    items={items.action}
                    options={options}
                    container={container}
                  />;
            </div>
          )
      }

}//component

更新：

现在添加 id 后，我需要更改 'timestamp' 属性才能启动。我现在收到的错误消息是：Property "start" missing in item 1。

4

1 回答 1

0

在调用 Timeline 之前，您需要确保项目有内容。你可以做：

 if (!items) return <SpinLoader />; return <Timeline items={items.action} options={options} container={container} />;
于 2019-09-18T11:49:36.673 回答