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

将SharePoint列表数据可视化为组织结构图

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

列表视图页面

结果页面

来自sharepoint列表项的组织结构图

1 个答案: