使用 SharePoint 列表数据的 Google 图表答案

【问题标题】：Google Charts Using SharePoint List Data使用 SharePoint 列表数据的 Google 图表
【发布时间】：2013-11-03 15:55:08
【问题描述】：

我很困惑，需要一点帮助

我想要做的是使用 Google Chart API 创建一个简单的条形图（图表），它将从共享点列表中提取数据。

这是谷歌条形图代码....

<html>  
<head>    
<body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>    
<script type="text/javascript">      
  google.load("visualization", "1", {packages:["corechart"]});      
  google.setOnLoadCallback(drawChart);      

   function drawChart() {        
   var data = google.visualization.arrayToDataTable([
   ['Month', 'Year', 'Number Of Days'],          
   ['Dec',  2013,      10],          
   ['Jan',  2013,      6],          
   ['Mar',  2012,       22],          
   ['Jun',  2011,      44]        ]);        
   var options = {          
   title: 'Company Performance',          
   vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}        };        
   var chart = new google.visualization.BarChart(document.getElementById('chart_div'));             
   chart.draw(data, options);      }    

   </script>  
   </head>  
   <body>    
   <div id="chart_div" style="width: 900px; height: 500px;"></div>

这可行，但它是静态的，我需要来自 SharePoint 列表的动态数据。这是我用来从 SharePoint 列表中提取数据的方法，但似乎无法找出让 Google Chart 使用我的数据的最佳方法。提前致谢。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready( function() {

var siteUrl = "//serverURL",
    listId  = "{b2b61446-4dfc-44f0-80af-8d18b2b17547}";

$.get( siteUrl + "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List=" + listId, 
function( xml ) {
    var zrow = xml.getElementsByTagName("z:row");
    for(var i=0; i<zrow.length; i++) {
        $("#table1 tbody").append( 
        "<tr><td>"
        + zrow[i].getAttribute("ows_Month")
        + "</td><td>"
        + zrow[i].getAttribute("ows_Number_x0020_Of_x0020_Days") 
        + "</td><td>"
        + zrow[i].getAttribute("ows_Year")  
        + "</td></tr>"
        );
    }
});
});

</script>

【问题讨论】：

您的第二个代码 sn-p 是用于从您的共享点列表中提取数据的代码示例吗？
是的，第二段代码可以工作并从 SharePoint 列表中提取数据...没有问题。我只是很难弄清楚...我如何包含该代码以便它与上面的代码一起使用（Google Chart）

标签： jquery sharepoint google-visualization sharepoint-list

【解决方案1】：

我要感谢 Asgallant 的回复。正是他的回应促使我探索其他方式或选择来实现这一目标。使用 HighCharts 我想出了以下解决方案，以使用 XML 和 JQuery 从 SharePoint 列表中提取数据。看看这个。顺便说一句，这适用于 HighCharts 的条形图和饼图。要将图表从条形图翻转到饼图，您需要做的就是更改代码“plotOptions”中的选项，其中显示 [bar]...change to [pie]。

顺便说一下，underscore.js 文件可以从 GITHib.com 下载，或者在 underscore.js 上进行谷歌搜索。另一件事....我没有使用超过版本的 JQuery 或 SPServices 对此进行测试，因此在此示例中仅使用已在此处测试过的内容可能很重要。

干杯！

现在是代码.....该示例基于自定义的员工休假请求列表。

<script type="text/javascript" src="../Style Library/High Charts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../Style Library/High Charts/highcharts.js"></script>
<script type="text/javascript" src="../Style Library/High Charts/jquery.SPServices-0.7.2.js"></script>
<script type="text/javascript" src="../Style Library/High Charts/underscore.js"></script> 


<script type="text/javascript">    

$(document).ready(function () {         

$().SPServices({            
operation: "GetListItems",            
CAMLQuery: "<Query><OrderBy><FieldRef Name='Employee'/></OrderBy></Query>",            
CAMLViewFields: "<ViewFields><FieldRef Name='Title'/><FieldRef Name='Day_x0020_Off_x0020_Taken'/><FieldRef Name='Request_x0020_Type'/><FieldRef Name='Time_x0020_Off_x0020_Description'/><FieldRef Name='Employee'/></ViewFields>",            
listName: "{2fdbe305-a489-4428-a319-b4167b8dbabf}",        
completefunc: processData        
});    
});     


function processData (xData, status) {        
var torData = []; 

$(xData.responseXML).SPFilterNode("z:row").each(function () {            
    torData.push({                
        timeOff:        $(this).attr('ows_LinkTitle'),                
        dayOffTaken:       $(this).attr('ows_Day_x0020_Off_x0020_Taken'),                
        requestType:     $(this).attr('ows_Request_x0020_Type'),
        timeOffDescription:    $(this).attr('ows_Time_x0020_Off_x0020_Description'),            
        employee:   $(this).attr('ows_Employee')            
    });        
});         



var chartData = [];        
var employeeData = _.groupBy(torData, 'employee');  

 _.each(employeeData, function(row) {            
var empCount = row.length;

    chartData.push( {                
        name:   row[0].employee,                
        y:      empCount            
    });         
});         


renderChart (chartData);    

}


 function renderChart (data) {        
    var chart = new Highcharts.Chart({            
        chart: {                
            renderTo: 'torChart',                
            plotBackgroundColor: null,                
            plotBorderWidth: null,                
            plotShadow: false            
    },            
    credits: {                
        enabled: true            
    },            
    title: {                
        text: 'Employee Time Off'            
    },            

    plotOptions: {                
        bar: {                    
            allowPointSelect: true,                    
            cursor: 'pointer',                    
            dataLabels: {                        
                enabled: true,                        
                color: '#000000',                        
                connectorColor: '#000000',                        
                formatter: function()    {                            
                    return '<b>'+ this.point.name +'</b>: '+ this.y +' Times';                        
                }                    
            },                
        }            
    },            
   series: [{                
        type: 'bar',                
        name: 'Days Off Taken',                
        data: data            
      }]        
   });    
  }


  </script>
  <div id="torChart"></div>

【讨论】：

嗨@CBanks 我也想创建图表。这是我的问题链接：stackoverflow.com/questions/47374924/…。请看一下。我刚刚开始在 SharePoint 上进行开发。所以请帮助我一步一步地指导。这是我的 gmail id：mmaid786@gmail.com

【解决方案2】：

试试这样的：

function drawChart () {
    var siteUrl = "//serverURL",
        listId  = "{b2b61446-4dfc-44f0-80af-8d18b2b17547}";

    $.get(siteUrl + "/_vti_bin/owssvr.dll?Cmd=Display&XMLDATA=TRUE&List=" + listId, function( xml ) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Year');
        data.addColumn('number', 'Number of Days');

        var zrow = xml.getElementsByTagName("z:row");
        for (var i = 0; i < zrow.length; i++) {
            data.addRow([zrow[i].getAttribute("ows_Month"), parseInt(zrow[i].getAttribute("ows_Year")), parseInt(zrow[i].getAttribute("ows_Number_x0020_Of_x0020_Days"))]);
        }

        var options = {
            title: 'Company Performance',
            vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
}

这将复制您在上面发布的图表的布局，但我不确定它是否正是您想要的。这将数月放在 vAxis 上，将数年作为数据系列。这是你的本意吗？

【讨论】：

感谢您的工作！我还没有尝试过上面的代码，但看起来可能会这样做。就 vAxis 而言，我可以使用它来获得正确的结果 - 非常感谢。最后一件事......我假设我需要做的就是将我的 JQuery $(document.ready()) 包裹在完整的函数周围？因为我需要加载它，然后加载页面，然后我将它填充到 SharePoint 的内容编辑器 webpart 中。干杯！！
您不想在文档就绪时运行它；届时 API 可能尚未完成加载，因此您想在 google 加载程序的回调中调用它（就像您的第一个示例一样）。