vis.js 重绘和更改数据

Question

我正在使用 vis.js 时间轴来显示事件，并通过 ajax 调用显示所有项目。

目前我在页面上有一个可用的过滤器，所以时间线会进入特定范围并且工作正常。

我想做的是缩小显示的信息范围。我最初关于如何做到这一点的想法是更改 ajax 调用，使其 returns 成为我需要的信息的 json。

一个例子：

Select地区：
- 英格兰北部
- 英格兰南部
调用的 Ajax 会过滤数据库，因此它只会显示在特定列属性中具有属性的项目
然后我会使用 ajax 调用

第 1 部分和第 2 部分让我脱颖而出，有谁知道我将如何指定不同的 Ajax url 然后如何重绘 table？

我试过 timeline.redraw(): 没有运气，所以我先摧毁了 table 但仍然没有骰子 (timeline.destroy(); timeline.redraw( );) destroy 命令有效但重绘无效。

这是我的代码（注意日期过滤器工作正常） HTML

<!-- this is just the filter section -->
<div id="filters" style="margin: 10px; background-color: RGB(229,229,229); border-radius: 10px; padding: 5px">
        <div id="filterscontainer" style="display: inline-block">
            <table>
                <tr>
                    <td>
                        <div style="float: left; font-size: 1.25em">Filters</div>
                </td>
                <td></td>
                <td>
                    <div id="expandcollapseFilters" class="chevron bottom" title="Click to expand the filter menu" style="float: left"></div>
                </td>
            </tr>
        </table>
    </div>
    <div id="filtercontent" style="display: none">
        <table>
            <tr><td colspan="2"><button id="reset">Reset all filters</button></td></tr>
            <tr>
                <td>
                    <table>
                        <tr>
                            <td style="text-align: right">Date from:</td>
                            <td>
                                <input id="dateFrom" class="date"/></td>
                            <td style="text-align: right">Date to:</td>
                            <td>
                                <input id="dateTo" class="date"/></td>
                            <td>
                                <button id="dateRangeFilter">Apply Filter</button></td>
                        </tr>
                    </table>
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
<div id="currentlyShowing"><h3>Currently showing: <span class="currentlyShowing">All items</span></h3></div>
<div id="mytimeline"></div>
<div id="loading">loading...</div>

Javascript/jquery:

<script type="text/javascript">
    $("#filterscontainer").on("click", function () {
        $('#currentlyShowing').slideToggle('slow');
        $('#filtercontent').slideToggle('slow');
        if ($("#expandcollapseFilters").prop("class") === "chevron top") {
            $('#expandcollapseFilters').prop('collapseFilters', "Click here to collapse the filter menu");
            $('#expandcollapseFilters').addClass('bottom').removeClass('top');
        } else {
            $('#expandcollapseFilters').prop('collapseFilters', "Click to expand the filter menu");
            $('#expandcollapseFilters').addClass('top').removeClass('bottom');
        }
    });
    $.ajax({
        type: "POST",
        url: 'Ajax.asp?RT=RoadMap', data: {},
        success: function (data) {
            var result = JSON.parse(JSON.parse(JSON.stringify(data)));
            document.getElementById('loading').style.display = 'none';
            var items = new vis.DataSet(result);
            var options = {
                orientation: 'top',
                groupOrder: 'order',
                showCurrentTime: false,
                align: 'left',
                editable: false,
                minHeight: '300px',
                min: new Date(2016, 0, 1),                // lower limit of visible range
                max: new Date(2018, 0, 1),                // upper limit of visible range
                zoomMin: 1000 * 60 * 60 * 24 * 7,         // one week in milliseconds
                zoomMax: 1000 * 60 * 60 * 24 * 365        // about a year
            };
            var container = document.getElementById('mytimeline');
            var timeline = new vis.Timeline(container, items, options);
            document.getElementById('dateRangeFilter').onclick = function () {
                var dateFrom = $("#dateFrom").val();
                var dateTo = $("#dateTo").val();
                if (dateFrom.length < 1 || dateTo.length < 1 || dateFrom > dateTo) { //checking if the date to date is after the from date
                    alert("Please select a valid date range");
                } else { //converting the resturn results to a date format accepted by timeline
                var dateFromDay = dateFrom.substr(0, 2);
                var dateFromMonth = dateFrom.substr(3, 2);
                var dateFromYear = dateFrom.substr(6, 4);
                var dateToDay = dateTo.substr(0, 2);
                var dateToMonth = dateTo.substr(3, 2);
                var dateToYear = dateTo.substr(6, 4);
                timeline.setWindow(dateFromMonth + "-" + dateFromDay + "-" + dateToYear, dateToMonth + "-" + dateToDay + "-" + dateToYear);
                }
            };
        }
    });
    $().ready(function () {
        $("#reset").on("click", function () {
            $.datepicker._clearDate("#dateFrom");
            $.datepicker._clearDate("#dateTo");
        });
        $("#dateFrom").datepicker({
            beforeShowDay: $.datepicker.noWeekends,
            dateFormat: "dd/mm/yy"
        });
        $("#dateTo").datepicker({
            beforeShowDay: $.datepicker.noWeekends,
            dateFormat: "dd/mm/yy"
        });
    });
</script>

Answer 1

我成功了，为了其他面临此问题的人，下面是您如何 it/get 解决这个问题。

在ajax调用之前声明变量"items"，在声明变量之前放置事件处理程序 "timeline" 在其中，清除变量 "items" ( items.clear(); ) 并添加它的新内容 ( items.add(); )。您可以在括号中构建字符串，或者像我使用 ajax 调用并在其中包含 return 数据一样。

下面是现在过滤特定区域的工作代码：

    var items;
    var timeline;
    $.ajax({
        type: "POST",
        url: 'Ajax.asp?RT=RoadMap', data: {},
        success: function (data) {
            var AllData = JSON.parse(JSON.parse(JSON.stringify(data)));
            document.getElementById('loading').style.display = 'none';
            items = new vis.DataSet();
            items.add(AllData);
            var options = {
                orientation: 'top',
                groupOrder: 'order',
                showCurrentTime: false,
                align: 'left',
                editable: false,
                minHeight: '300px',
                min: new Date(2016, 0, 1),                // lower limit of visible range
                max: new Date(2018, 0, 1),                // upper limit of visible range
                zoomMin: 1000 * 60 * 60 * 24 * 7,         // one week in milliseconds
                zoomMax: 1000 * 60 * 60 * 24 * 365        // about a year
            };
            var container = document.getElementById('mytimeline');
            $("#regionFilter").on("click", function () {
                var regionSelected = $("#regionSelector").val();
                if (siteSelected === "") {
                    alert("Please Select the region you would like to see the information of");
                } else {
                    items.clear(); // note this is the clear function which removes the data but doesn't destroy the timeline
                    $.get("Ajax.asp?RT=RoadMapUpdate&Region=" + regionSelected, function (AjaxReturn) {
                        var AjaxReturn = JSON.parse(JSON.parse(JSON.stringify(AjaxReturn)));
                        items.add(AjaxReturn); // this is where the timeline get's re-populated
                    });
                }
            });
            $("#reset").on("click", function () { // this function is tied to a button I added which resets the filters, it puts wverything back to the way it was at load
                items.clear();
                items.add(AllData);
            });
            timeline = new vis.Timeline(container, items, options);

vis.js 重绘和更改数据

vis.js redraw and changing data

javascript

ajax

jquery

redraw

vis.js