如何使用visjs在时间轴中订购商品

Question

我在我的项目中使用了visjs库，我想订购时间轴的项目，底部的红色项目和顶部的其他项目如此图像。

继承我的代码：

 storyboard.getPositionDataByEvent= function (deviceId) {

            var url = servername+'api/position/'+deviceId;
            console.log("Inside getMaxChaufeeurId " + url);
            function onSuccess(response) {
                console.log("+++++youssef SUCCESS++++++");

                if (response.data.success != false) {
                    console.log(JSON.stringify("toto :"+JSON.stringify(response.data.data)));
                    //$scope.MyData=response.data;

                    var isFirst = true;
                    var first, last;
                    var items = [];
                    var k;
                    var arrayList=[];
                    ///
                    var zFirst;
                    var zLast;

                    //vert
                    arrayList[44] = "#009900";
                    arrayList[87] = "#009900";
                    arrayList[69] = "#009900";

                    //rouge
                    arrayList[80] = "#e62e00";
                    arrayList[53] = "#e62e00";

                    //orange
                    arrayList[35] = "#ff8533";
                    //fushia --unknown event
                    arrayList[43] = " #cc0099";

                    //event 15
                    arrayList[15] = "#663300";

                    var colorArray=['red','green','#5561c1','#52b2da'];
                    //var el = document.createElement( 'html' );


                    for(var i=0; i<response.data.length; i++) {

                        if(last != null && last.event != k.event) {
                            // alert('isLast');
                            if((last.event == 44 && k.event == 87) || (last.event == 44 && k.event == 69) || (last.event == 87 && k.event == 44) || (last.event == 87 && k.event == 69) ||
                                (last.event == 69 && k.event == 44) || (last.event == 69 && k.event == 87) || (last.event == 80 && k.event == 53)|| (last.event == 53 && k.event == 80) )  {

                            } else {
                                var itemHeight;
                                isFirst = true;
                                console.log(first.event + " - " + last.event );
                                var item = {};
                                // item.id = i;
                                if( last.event!=80 && last.event!=53 ){
                                    itemHeight=10;
                                } else{
                                    itemHeight=15;
                                   // item.group=2;
                                }

                                item.id=first.fixtime+'@'+ k.fixtime;


                                //item.content = "item " + i;
                                item.start = first.fixtime ;

                                //$scope.gg=item.start;
                                item.end = k.fixtime ;


                                var cal=moment.utc(moment(item.end,"DD/MM/YYYY HH:mm:ss").diff(moment(item.start,"DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss");
                                //console.log(cal);
                                //$filter('date')(item.end, "dd-MM-yyyy HH:mm:ss");
                                item.title='<div ><strong>date Début :</strong>'+$filter('date')(item.start, "HH:mm:ss")+
                                    '&nbsp;&nbsp;&nbsp;&nbsp;<strong>Date fin :</strong>'+$filter('date')(item.end, " HH:mm:ss")+'<br/><strong>Duration :</strong>'+moment.utc(moment($filter('date')(item.end, "dd/MM/yyyy HH:mm:ss"),"DD/MM/YYYY HH:mm:ss").diff(moment($filter('date')(item.start, "dd/MM/yyyy HH:mm:ss"),"DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss")+'<br/>rrr<br/>jjjjj<br/>uuuu<br/>iiii</br>ujuuu<br/>ujuuuu<br/></div>';
                                item.style="height:14px;margin-top:"+$scope.marginTop+"px"+"!important;background-color:"+arrayList[last.event]+";border-color:"+arrayList[last.event];
                                items.push(item);
                            }
                        }

                        if(isFirst) {

                            isFirst = false;
                            first = k;

                        }

                    }

                    $scope.myVisData=new VisDataSet(items);
                    storyboard.initialisation($scope.myVisData);

                }




            };

            function onError(response) {
                console.log("-------getMaxChaufeeurId FAILED-------");

                console.log(response.data);
                console.log("Inside getMaxChaufeeurId error condition...");
            };

            //----MAKE AJAX REQUEST CALL to GET DATA----
            ajaxServicess.getData(url, 'GET', '').then(onSuccess, onError);

        };

继承人的初始化方法：

 storyboard.initialisation=function(items){

            //alert($scope.currentDate+' '+$scope.tomorrowDate);

            // DOM element where the Timeline will be attached
            var container = document.getElementById('visualization');
            //$scope.currentDate
            //$scope.tomorrowDate



            var options = {

                width:'99%',
                min: $scope.currentDate,
                max:$scope.tomorrowDate,
                height:'200px',
                zoomable:false,

                showCurrentTime:true,
                stack:true,
                //to fix stack=false i have to change margin-top above
                //zoomMax:10,
                //zoomMin:10,
                //type:'background',
                //
                showMajorLabels:false,
                margin:{
                    axis:-4,
                    item:1
                },
                format:{
                    minorLabels: {
                        minute:'mm',
                        hour: "HH[h]"
                    }
                }
            };
            // Create a Timeline
            timeline = new vis.Timeline(container,items,options);



        }

任何想法都可以在我的时间线中订购项目，如图中所示。

Answer 1

我认为使用群组是前进的方向。您可以将每行的项目放在同一组中，并且每个组在时间轴中都有自己的行。您还可以将样式应用于组，以免您单独为每个项目设置样式。

在此处阅读有关群组的文档： http://visjs.org/docs/timeline/#groups