VisJS Timeline:在时间轴中排序项目

问题描述

我正在使用 vis-js 时间线 库来构建时间线.我需要对每个组中的元素进行排序.
组就像 here 中的示例.我看到我可以使用order 项目中的选项"来做到这一点，例如 这里
但我无法理解它是如何工作的.

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.

我试过这样:

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);

变量 temp 包含一个已排序的数组，但在创建时间线时 - 在第三组中排序的项目如下:item3、item2、item4.
但它们必须像 item2、item3、item4 一样排序.

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.

推荐答案

您可以通过在时间轴配置中为 order 选项提供函数来对时间轴中的项目进行排序.您可以在启动时间线时定义它

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
};

或初始化后

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

order 函数将被调用两个参数，它们是要比较的项目对象.你可以在这里实现任何逻辑.您只需要返回一个整数值.如果返回值小于 0，则第二项(传递给 b 的项)将首先排序，如果返回值大于或等于 0，则第一项(传递给 b 的项)code>a) 将首先订购，第二件商品将在第二次订购.这是一个有效的演示.

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.

这篇关于VisJS Timeline:在时间轴中排序项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！