SharePoint中报表选择

Office 365中制作报表的方式很多。

这里介绍下使用js获取SharePoint List实现报表的一种方法

资源

• Jquery 1.8.2 http://blog.jquery.com/2012/09/20/jquery-1-8-2-released/
• SPServices http://spservices.codeplex.com/
• Highcharts http://www.highcharts.com/
• underscore.js http://underscorejs.org/

先看效果， 要实现一个饼图

看代码

详细代码解释见原文（原文中的代码有点小问题，修复后的代码如下）  http://www.sharepointdeveloperhq.com/2013/05/utilizing-spservices-for-sharepoint-2010-to-create-charts-with-high-charts/

 <script src="/sites/target3/Theme/jquery.min.js" type="text/javascript"></script>
 <script src="/sites/target3/Theme/highcharts.js" type="text/javascript"></script>
 <script src="/sites/target3/Theme/jquery.SPServices-2013.01.js" type="text/javascript"></script>
 <script src="/sites/target3/Theme/underscore.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
        $().SPServices({
             operation: "GetListItems",
             CAMLQuery: "<Query><OrderBy><FieldRef Name='Location'/></OrderBy></Query>",
             CAMLViewFields: "<ViewFields><FieldRef Name='Title'/><FieldRef Name='Date_x0020_of_x0020_Sighting'/><FieldRef Name='Action'/><FieldRef Name='Location'/></ViewFields>",
             listName: "owl seen",
             completefunc: processData
         });
     });
  
     function processData (xData, status) {
         var owlData = [];
         $(xData.responseXML).SPFilterNode("z:row").each(function () {
             owlData.push({
                 owl:        $(this).attr('ows_Title'),
                 date:       $(this).attr('ows_Date_x0020_of_x0020_Sighting'),
                 action:     $(this).attr('ows_Action'),
                 location:   $(this).attr('ows_Location')
             });
         });

         var chartData = [];
         var locationData = _.groupBy(owlData, 'location');

         $.each(locationData, function(row) {
             var locCount = row.length;

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

         renderChart (chartData);
     }
  
     function renderChart (data) {
         var chart = new Highcharts.Chart({
             chart: {
                 renderTo: 'owlchart',
                 plotBackgroundColor: null,
                 plotBorderWidth: null,
                 plotShadow: false
             },
             credits: {
                 enabled: true
             },
             title: {
                 text: 'Owl Sightings by Location'
             },
             tooltip: {
                 pointFormat: '{series.name}: <b>{point.percentage}%</b> {point.y} Times',
                 percentageDecimals: 1
             },
             plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                         enabled: true,
                         color: '#000000',
                         connectorColor: '#000000',
                         formatter: function() {
                             return '<b>'+ this.point.name +'</b>: '+ this.y +' Times';
                         }
                     },
                 }
             },
             series: [{
                 type: 'pie',
                 name: 'Location Count',
                 data: data
             }]
         });
     }
 </script>
 <div id="owlchart">​​​​​​​​</div> 

Thanks,

Ivan