Question

我使用anychart.ganttResource（）目前，我通过设置甘特图之外的范围来限制数据的时间轴，甘特图控制我从中获取数据的时间 - 我有图表.zoomTo（＆＃34;周＆＃34;，2，＆＃34; firstDate＆＃ 34）。这很好，但现在我的客户希望能够＆＃34;缩放＆＃34;在图表中。我可以看到这可以使用地图，但我在甘特中找不到类似的东西。理想情况下，我想要一个可以控制缩放的滑块或类似zoomOnMouseWheel的东西，但我不知道这是否可行。

Answer 1

使用一些代码技巧可以使用mouseWheel事件进行缩放。我为你准备了一个例子，请检查一下。

＆＃13;

anychart.onDocumentReady(function (){

  // data tree settings
  var treeData = anychart.data.tree(data, "as-table");

  // chart type
  var chart = anychart.ganttResource();

  // chart position
  chart.bounds(0, 0, "100%", "100%");

  // chart data
  chart.data(treeData);

  // data tree width
  chart.splitterPosition(170);

  var dataGrid = chart.dataGrid();

  // settings for first column
  dataGrid.column(0).width(30).title().text("#");

  // settings for the second column
  dataGrid.column(1).width(140).format(function(item) {
    return item.get("name");
  }).title().text("Person");

  
  // chart container
  chart.container("container").draw();
  
  //zooming feature
  var zoomingCoef = 1;
  var isPreviousNegative = true;
  
  //mouse wheel listener
   $("#container").on('wheel', function(e){
            e.preventDefault();
            e.stopImmediatePropagation();
     
     //define the zoomingCoef
     if(e.originalEvent.deltaY > 0 ^ isPreviousNegative) {
     	zoomingCoef -= e.originalEvent.deltaY/10;
     } else {
     	zoomingCoef =1;
     }
   
     //zoomIn or zoomOut
     if(e.originalEvent.deltaY < 0) {
     	chart.zoomIn(zoomingCoef);
       isPreviousNegative = true;
     }	else {
     	chart.zoomOut(zoomingCoef);
       isPreviousNegative = false;
     }
});
});

// data
var data = [
  {
    "id": "1",
    "name": "Phase 1 - Strategic Plan",
    "periods": [
      {"id": "1_1", "start": 1171468800000, "end": 1171987200000, "fill": "green"}]
  },
  {
    "id": "2",
    "name": "Self-Assessment",
    "periods": [
      {"id": "2_1", "start": 1173024000000, "end": 1173715200000, "fill": "yellow"}]
  },
  {
    "id": "3",
    "name": "Define business vision",
    "periods": [
      {"id": "3_1", "start": 1169740800000, "end": 1170172800000, "fill": "green"}]
  },
  {
    "id": "4",
    "name": "Identify available skills, information and support",
    "periods": [
      {"id": "4_1", "start": 1171814400000, "end": 1172419200000, "fill": "green"}]
  },
  {
    "id": "5",
    "name": "Decide whether to proceed",
    "periods": [
      {"id": "5_1", "start": 1171296000000, "end": 1171382400000, "fill": "green"}]
  },
  {
    "id": "6",
    "name": "Define the Opportunity",
    "periods": [
      {"id": "6_1", "start": 1173628800000, "end": 1174320000000, "fill": "green"}]
  }
];

＆＃13;

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

＆＃13;

<link href="https://cdn.anychart.com/releases/8.1.0/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.anychart.com/releases/8.1.0/js/anychart-bundle.min.js"></script>
<div id="container"></div>

＆＃13;

anychart ganttResource如何动态改变范围/缩放

1 个答案: