5

我正在使用下面的代码来显示我项目中时间表的时间线视图。x 轴显示周数，y 轴显示服务。我想知道如何限制用户在 x 轴的特定范围之后移动。可能用户只能在 x 轴上查看 1 年的数据。是否有任何选项可以为图表设置默认缩放

 var Id = 1;
var url = "/ScheduleManagement/ServiceManagement/GetMasterConfigurationForChart";
var data = { 'transitPlanId': Id };
$.ajax({
    url: url,
    data: data,
    cache: false,
    dataType: 'json',
    type: "POST",
    success: function (data) {
       // Graph2d.clear();
        var xAxis = [];
        var x = {};
        var yAxis = [];
        var y = {};
        var schedule = data.SeriviceList;
        for (var i = 0; i < schedule.length; i++) {

            var labelContent = schedule[i].MasterScheduleName + ' ' + 'Start Week: ' + schedule[i].FromWeek + ' End Week: ' + schedule[i].ToWeek;

            var sdata = _.find(xAxis, function (s) { return s.content == schedule[i].ServiceGroupeName });
            if (sdata == null) {
                x = { id: i, content: schedule[i].ServiceGroupeName, value: i + 1 };
                xAxis.push(x);

                y = { id: i, group: i, content: labelContent, start: schedule[i].FromDate, end: schedule[i].ToDate };
            }
            else {
                y = { id: i, group: sdata.id, content: labelContent, start: schedule[i].FromDate, end: schedule[i].ToDate };
            }
            yAxis.push(y);
        }
        var groups = new vis.DataSet(xAxis);
        var items = new vis.DataSet(yAxis);
        var container = document.getElementById('visualization');
        var options = {
            // option groupOrder can be a property name or a sort function
            // the sort function must compare two groups and return a value
            //     > 0 when a > b
            //     < 0 when a < b
            //       0 when a == b
            groupOrder: function (a, b) {
                return a.value - b.value;
            },
            editable: false,
            stack: true,
            verticalScroll: true,
            zoomKey: 'ctrlKey',
            maxHeight: '90%',
            timeAxis: { scale: 'week', step: 1 },
            zoomMin:100,
           
        };
        //dataAxis.customRange.left.max
        var timeline = new vis.Timeline(container);
        timeline.setOptions(options);
        timeline.setGroups(groups);
        timeline.setItems(items);
    },
    error: function (response) {
        alert("error : " + response);
    }
});
}

 <div id="visualization"></div>

是否有任何选项可以清除图表并使用不同的值再次绘制？

4

2 回答 2

2

我已经修改了我的图表选项，如下所示。它适用于图表范围限制和放大功能。

 var options = {
                    // option groupOrder can be a property name or a sort function
                    // the sort function must compare two groups and return a value
                    //     > 0 when a > b
                    //     < 0 when a < b
                    //       0 when a == b
                    groupOrder: function (a, b) {
                        return a.value - b.value;
                    },
                    editable: false,
                    stack: true,
                    verticalScroll: true,
                    horizontalScroll: true,
                    zoomKey: 'ctrlKey',
                    maxHeight: '90%',
                    timeAxis: { scale: 'week', step: 1 },
                    min: new Date(2017, 0, 1),                // lower limit of visible range
                    max: new Date(2018, 0, 1),
                    zoomMin: 1000 * 60 * 60 * 24 * 31,             // one day in milliseconds
                    zoomMax: 1000 * 60 * 60 * 24 * 31 * 3

                };

于 2017-06-19T10:40:56.060 回答
0

它不在 Jquery 中，因为我将 Angular npm 模块用于 vis-timeline 但我会监听事件 rangeChanged 并且在用户移动时间线之后，如果日期晚于昨天（在我的情况下，这是我的最小限制，在你的情况下是去年），您将时间线移动到您的分钟（在我的情况下，我再次将它移动到今天，因为它是我希望它居中的位置）。你应该可以在 Angularjs 或 jquery 中做同样的事情。请记住检查事件是否由用户触发，否则您最终会陷入永远循环。

this.visTimelineService.rangechanged.subscribe((eventData: any[]) => {
      if (eventData[0] === this.visTimelineId) {
        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
        const eventRanged: { byUser: boolean; start: Date, end : Date } = eventData[1];
        if (
          eventRanged.byUser &&
          new Date(eventRanged.start) < UtilsTime.yesterday
        ) {
          this.visTimelineService.moveTo(this.visTimelineId, UtilsTime.today);
        }
      }
    });

顺便说一句，在角度库中，如果你想接收它们，你必须订阅和取消订阅事件

this.visTimelineService.on(this.visTimelineId, 'rangechanged');
this.visTimelineService.off(this.visTimelineId, 'rangechanged');

这里有我使用的库的信息。正如我所说，它基于 jquery 库，因此您在实施此解决方案时应该没有任何问题。 https://visjs.github.io/vis-timeline/docs/timeline/#Events

我最终回答了你的问题，因为我想做同样的事情，我想出了这个解决方案，所以即使迟到了，总比没有好（因为以前的解决方案对我不起作用）。

干杯。

于 2021-11-24T09:46:34.363 回答