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