限制可視時間軸圖表的X軸範圍

Question

我使用下面的代碼在我的項目中顯示時間表視圖的時間軸視圖。在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>

是否有任何選項來清除圖表，並用不同的值再次提請呢？

Answer 1

我已經修改了我的圖表選項，如下所示..其工作正常圖表範圍限制和放大功能。

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 
 

 
       };