0
我在我的項目中使用visjs圖庫，我想訂購時間軸的商品，底部的紅色商品和其他頂部商品，如此圖像。 
如何使用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")+
' <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);
}
任何想法定購一個像圖片中我的時間線的項目。