Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

有没有选项可以清除图表并使用不同的值再次绘制它？

Answer 1

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

＆＃13;

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

＆＃13;

限制vis时间轴图表的X轴范围

1 个答案: