Question

我正在尝试使用REST API通过Google图表创建组织结构图，因为我需要的数据的位置我需要为每个项目进行多次AJAX调用。问题是我没想到它会这么慢。我觉得我在某处做错了什么。如果有人可以提供帮助，我就会徘徊。

所以基本上drawchart函数只获取数据并将其传递给getpicturefunc函数，该函数使用从传递的数据中获取的用户值来为用户检索图像。取决于getpicturefunc将多次运行的用户数量。我期待一些延迟，但对于仅8个项目（差不多20秒）而言并非如此糟糕。

任何帮助？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">< /script>
<script type="text/javascript" src="https://www.google.com/jsapi">< /script>

<script type="text/javascript">
google.load("visualization", "1", {
  packages: ["orgchart"]
});
google.setOnLoadCallback(GetUserDetails);

//function to get userdetails from a sharepoint List
function GetUserDetails() {
  var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle('OrganisationalChart')/items?$select=Id,user/Title,user/Id,user/Name,Boss/Id,Boss/Title,PictureUrl,Designation&$expand=user,Boss";

  $.ajax({
    url: requestUri,
    type: "GET",
    async: false,
    headers: {
      "ACCEPT": "application/json;odata=verbose"
    },
    success: function(data) { //pass the object containing the user details to the getPicturefunc Function to retrieve the picture for individual users 
      $.when(getPicturefunc(data)).done(function() {});
    }
  });
};

function getPicturefunc(data) {
  var def = $.Deferred();
  requests = [];
  var items = data.d.results;
  console.log(items);

  //create a data table to be used by google charts and then populate
  var dataValues = new google.visualization.DataTable();
  dataValues.addColumn('string', 'Entity');
  dataValues.addColumn('string', 'ParentEntity');
  dataValues.addColumn('string', 'ToolTip');

  //iterate through the users object and the retrieve the picture url for each user
  for (var i = 0; i < items.length; i++) {

    var user = items[i]['user'].Name.split('|')[1];
    var employeeId = items[i]['user'].Id.toString();
    var employeeName = items[i]['user'].Title;
    var Designation = items[i].Designation != null ? items[i].Designation : '';
    var reportingManager = items[i]['Boss']['Id'] != null ? items[i]['Boss']['Id'] : '';
    eportingManager = reportingManager.toString();
    var requestUri = _spPageContextInfo.webAbsoluteUrl +
      "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='" + user + "'";

    $.ajax({
      url: requestUri,
      type: "GET",
      async: false,
      headers: {
        "ACCEPT": "application/json;odata=verbose"
      }
    }).done(function(data) {
      dataValues.addRows([
        [{
          v: employeeId,
          f: employeeName + '<div>(<span>' + Designation + '</span>)</div><img src = "' + data.d.PictureUrl + '" />'
        }, reportingManager, Designation]
      ]);
      Console.log(dataValues);
    });
  } // end of for loop

  var chart = new google.visualization.OrgChart(document.getElementById('chart'));
  chart.draw(dataValues, {
    allowHtml: true
  });

  $.when.apply($, requests).then(function() {
    def.resolve();
  });

  return def.promise();
};
</script>

<div id="chart">
</div>

对于小型数据集，Ajax调用时间过长

0 个答案: