來自sharepoint列表項目的組織結構圖

Question

我想創建一個組織結構圖，我想使用來自sharepoint列表的值來填充。我想使用REST和Javascript檢索項目。這是我的代碼。它在部分工作中，但不能創建圖表。請幫助別人。

<script type="text/javascript" src="http://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(drawChart); 
     function drawChart() { 
      debugger; 
      $.ajax({    
       url: "http://myurl/_api/Web/Lists/GetByTitle('Employee Hierarchy')/items", 
       type: "GET", 
       headers: { 
        "accept": "application/json;odata=verbose", 
       },   
       success: function (r) { 
        debugger; 

        var items = r.d.results; 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Entity'); 
        data.addColumn('string', 'ParentEntity'); 
        data.addColumn('string', 'ToolTip'); 
        for (var i = 0; i <items.length; i++) { 
        var employeeId = r.d[i][0].toString(); 
        var employeeName = r.d[i][1]; 
        var designation = r.d[i][2]; 
        var reportingManager = r.d[i][3] != null ? r.d[i][3].toString() : ''; 
        data.addRows([[{ 
         v: employeeId, 
         f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + employeeId + '.jpg" />' 
        }, reportingManager, designation]]); 
        var chart = new google.visualization.OrgChart($("#chart")[0]); 
        chart.draw(data, { allowHtml: true }); 
       }, 
       failure: function (r) { 
        alert(r.d); 
       }, 
       error: function (r) { 
        alert(r.d); 
       } 
      }); 
     } 
    </script> 
    <div id="chart"> 
    </div> 

this is the structure of my sharepoint list

Answer 1

下面的例子演示瞭如何通過Google Visualization API

google.load("visualization", "1", { packages: ["orgchart"] }); 
google.setOnLoadCallback(displayChart); 


function displayChart() 
{ 
    loadListItems('Employee Hierarchy') 
    .done(function(data){ 
      var items = data.d.results;  
      drawChart(items); 
    }) 
    .fail(function(error){ 
      console.log(error); 
    }); 
} 

function drawChart(items) { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('string', 'Manager'); 
    data.addColumn('string', 'ToolTip'); 

    for (var i = 0; i < items.length; i++) { 
     data.addRow([items[i]['Title'],items[i]['Manager']['Title'],'']);    
    }  
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); 
    chart.draw(data, { allowHtml: true }); 
} 


function loadListItems(listTitle){ 
    return $.ajax({    
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + listTitle + "')/items?$select=Title,Manager/Title&$expand=Manager", 
      type: "GET", 
      headers: { 
        "accept": "application/json;odata=verbose", 
      } 
    });    
} 

要點

在我的例子列表具有可視化SharePoint列表數據，組織結構圖如下架構：

Field Name Type 
Title  Text 
Manager  Lookup 
Description Note 

列表視圖頁面

結果頁面