vis.js 时间线显示/隐藏项目（以及点和线）

Question

我编写了一些代码来按类名显示/隐藏项目。我通过将可见框的不透明度更改为 0 来实现此目的。但是，当我隐藏可见框时，可见点和从时间轴延伸的垂直线仍然显示。我也想隐藏这些。

带有线条的隐藏框图像

到目前为止，我已经能够通过将

border-color

css 属性更改为白色来隐藏整个时间线的所有线条和点（使用 chrome 检查器）。但是，我只想隐藏属于特定类别的项目的点和线。

Answer 1

一种解决方案是更改时间线使用的数据集，根据需要删除和添加项目。

来自文档（http://visjs.org/docs/data/dataset.html）：

dataset.add(data [, senderId]) - 将一项或多项添加到 DataSet 中。数据可以是单个项目或包含项目的数组。当已经存在具有相同 id 的项目时，添加项目将会失败。该函数返回一个数组，其中包含所添加项目的 id。请参阅数据操作部分。

remove(ids [, senderId]) - 通过 id 或项目本身删除一个或多个项目。返回一个数组，其中包含已删除项目的 id。请参阅数据操作部分。

您只需要保留要隐藏/显示的项目列表在变量中。

Answer 2

在我的例子中，为了隐藏某个项目，我将该项目推迟了一年来隐藏，然后设置原始日期和时间以再次显示该项目。

当时间线设置了可见范围的最小日期并且不可能超出此最小值时，这非常有用，就像我的情况一样，时间线不能在一个月前移动。

那么代码可能是这样的：

function item_hide(id)
{
    var item;

    item= dataSet_items.get(id);
    if(item === null)
        return;

    item.start= moment(item.start_original).subtract(1, 'y').format("YYYY-MM-DD HH:mm:ss");
    item.end= moment(item.end_original).subtract(1, 'y').format("YYYY-MM-DD HH:mm:ss");
    item.hidden= true;
    dataSet_items.update(item);

    return item;
}


function item_show(id)
{
    var item;

    item= dataSet_items.get(id);
    if(item === null)
        return;

    item.start= item.start_original;
    item.end= item.end_original;
    item.hidden= false;
    dataSet_items.update(item);

    return item;
}

Answer 3

只需对所有项目执行 foreach 并根据您的过滤条件设置“显示”样式：

var currentStatusFilter = "scheduled";
//Get Timeline
var timeline = $(".timeline").data("timeline");
//Iterate for each item
timeline.itemsData.forEach(function(item) {
    //Filter condition 
    if(currentStatusFilter && currentStatusFilter != item.myPropertyStatus) {
        item.style = 'display: none;';
    } else {
        item.style = '';
    }
    timeline.itemsData.update(item);
});
timeline.redraw();