使用任意图表甘特图刷新数据时内存消耗不断增加

Question

我有一个简单的anychart代码用于刷新甘特图，每1秒运行一次：

function init_schedule(){
    anychart.onDocumentReady(function () {
        anychart.data.loadJsonFile("../scheduler?type=getschedule", function (data) {
            document.getElementById("container").innerHTML = "";
            var treeData = anychart.data.tree(data, "as-tree");

            var chart = anychart.ganttResource(); 
            ...other logic, etc
       });
    });
}


var intervalId = setInterval(function() {
    init_schedule();
}, 1000);

如果我循环运行 var Chart = anychart.ganttResource() 方法，浏览器不会释放页面内存，VM 内存消耗不断增长到无穷大，页面开始冻结。 还有其他方法可以从服务器刷新甘特图数据吗？

我注释掉了所有其他代码以查找内存消耗增加的原因。难道是我搞错了？

Answer 1

要定期刷新甘特图数据，您只需要提取数据，然后使用

data()

方法更新图表，如下面的示例所示。

anychart.onDocumentReady(function() {

  // create data
  var data = [{
    id: "1",
    name: "Server 1",
    periods: [{
        id: "1_1",
        start: "2018-01-05",
        end: "2018-01-25"
      },
      {
        id: "1_2",
        start: "2018-01-28",
        end: "2018-02-22"
      },
      {
        id: "1_3",
        start: "2018-03-03",
        end: "2018-03-25"
      }
    ]
  }];

  // create a data tree
  var treeData = anychart.data.tree(data, "as-tree");

  // create a chart
  var chart = anychart.ganttResource();

  // imitate new data coming from a server and update chart with it
   const dataUpdateCallback = () =>{
    if (data[0].id == 1){
      data = [
        {
          id: "2",
          name: "Server 2",
          periods: [
            {id: "2_1", start: "2018-01-07", end: "2018-02-15"},
            {id: "2_2", start: "2018-02-26", end: "2018-03-20"}
          ]
        }
      ];
    } else if (data[0].id == 2){
      data = [
        {
          id: "3",
          name: "Server 3",
          periods: [
            {id: "3_1", start: "2018-01-04", end: "2018-03-25"}
          ]
        }
      ];
    } else if (data[0].id == 3){
      data = [
        {
          id: "1",
          name: "Server 1",
          periods: [
            {id:"1_1", start: "2018-01-05", end: "2018-01-25"},
            {id:"1_2", start: "2018-01-28", end: "2018-02-22"},
            {id:"1_3", start: "2018-03-03", end: "2018-03-25"}
          ]}
      ];
    }
    
    // update a data tree
    treeData = anychart.data.tree(data, "as-tree");
    // set the data
    chart.data(treeData); 
    
    // fit elements to the width of the timeline
    chart.fitAll()    
  }  

  // imitation of updates coming from a server
  const intervalID = setInterval(dataUpdateCallback, 1000);

  // set the data
  chart.data(treeData);

  // set the container id
  chart.container("container").draw();

  // fit elements to the width of the timeline
  chart.fitAll();
});

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

<link href="https://cdn.anychart.com/releases/8.12.0/css/anychart-ui.min.css" rel="stylesheet" />
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-base.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-gantt.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-exports.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-ui.min.js?hcode=a0c21fc77e1449cc86299c5faa067dc4"></script>

<div id="container"></div>