VisJS Timeline: sorting items in timeline

跟風遠走 提交于 2019-12-24 00:58:53

问题


I'm using vis-js timeline library for building a timeline. I need to sort the elements in each group.
Groups are like in example here. I saw that I can do this using the "order option in the item" like here
but I cannot understand how it works.

I tried this way:

var groups = new vis.DataSet([
    {id: 0, content: 'First', value: 1},
    {id: 1, content: 'Third', value: 3},
    {id: 2, content: 'Second', value: 2}
]);

// create a dataset with items

var items = new vis.DataSet([
    {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
    {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
    {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
    {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
    {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
    {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
  ]);

  // create visualization
  var container = document.getElementById('visualization');
  var options = {

    editable: true
  };

var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
var temp = items.get({
    order:function(a,b){
        return b.id-a.id;
        if(a.id > b.id)
            return -1;
        if(a.id < b.id)
            return 1;

        return 0;
    },
});

  timeline.setItems(temp);

Variable temp contains an array which was sorted, but when timeline is create - in third group items sorted like: item3, item2, item4.
But they have to sorted like item2, item3, item4.


回答1:


You can order items in the timeline by providing a function for order option in timeline configurations. You can define it when initiating the timeline

var options = {
  order: function(a,b){
    return b.id-a.id;
  },
  editable: true
};

or after initialization

timeline.setOptions({
  order: function(a,b){
    return b.id-a.id;
  },
});

order function will be called with two parameters and they are the item objects which are going to be compared. You can implement any logic here. You only need to return a integer value back. If the return value is less than 0 then the second item (item passed to b) will be ordered first and if the return value is greater than or equal to 0 then the first item (item passed to a) will be ordered first and second item will be ordered second. This is a working demo.



来源:https://stackoverflow.com/questions/24555787/visjs-timeline-sorting-items-in-timeline

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!