1

我很难过，需要一点帮助

我想要做的是使用 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>
4

2 回答 2

3

我要感谢 Asgalant 的回复。正是他的回应促使我探索其他方式或选择来实现这一目标。使用 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>
于 2013-11-12T20:52:36.537 回答
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 上，将数年作为数据系列。那是你的意图吗？

于 2013-10-24T22:05:06.170 回答