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