Question

我正在尝试解决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。

Answer 1

您需要在致电时间轴之前确保项目包含内容。您可以这样做：

 if (!items) return <SpinLoader />; return <Timeline items={items.action} options={options} container={container} />;

Vis.js / React / JavaScript：渲染Vis.timeline

1 个答案: