共享點列表項目中的組織結構圖

Question

我想創建一個要使用共享點列表中的值填充的組織結構圖。 我想使用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>

這是我的共享列表的結構

Answer 1

下面的示例演示如何通過Google Visualization API將SharePoint List數據可視化為組織結構圖

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",
             }
     });             
}

關鍵點

在我的示例中，列表具有以下架構：

Field Name  Type 
Title       Text 
Manager     Lookup 
Description Note

列表視圖頁面

結果頁面