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

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

资源

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

看代码

详细代码解释见原文(原文中的代码有点小问题,修复后的代码如下)  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

SharePoint中报表选择的更多相关文章

  1. 在SharePoint中创建可自定义属性的文件夹

    概况 阅读时间:约5分钟 适用版本:SharePoint Server 2010及以上 面向用户:普通用户.管理员.开发人员 难度指数:★★★☆☆ SharePoint中的文件夹分为2种,一种是文档库 ...

  2. 如何:在 SharePoint 中创建外部列表

    在创建外部内容类型后创建外部列表是一项非常简单的任务,有如下4种方式进行: 可使用 Microsoft SharePoint Designer 2010 浏览器来完成 VS2010的列表实例 采用代码 ...

  3. 自定义SharePoint 2013 元数据选择控件

    元数据在Sharepoint中是一个很常用的功能,他提供一个方法来管理企业中常用的关键词,可以更加统一的使用和更新.默认情况下,绑定在列表或库中的元数据字段可以设置是否允许为多个值.但是无法控制在弹出 ...

  4. No-Touch Integration 在SharePoint中使用社区支持的Silverlight应用程序

    No-Touch Integration 在SharePoint中使用社区支持的Silverlight应用程序         No-Touch Integration应该是最简单的方法了.将Silv ...

  5. 彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器 基于SharePoint平台开发时,人员选择器使用频率是非常高的,但是原生的人员选择器使用太麻 ...

  6. “认证发布”和“获取展示”,如何在 SharePoint 中正确使用 RSS Feed。

    在我们进行的日常工作中,是由一部分信息需要 Share 给其他人或者组织的.SharePoint 虽然支持在某个 Site Collection 中互通信息,但是跨 Site Collection 的 ...

  7. SharePoint中使用Visio Service展示业务数据

    SharePoint中可以通过Visio Service可以在浏览器中查看Visio图,功能部署到系统中,一切安好. 而现实总是很折磨人,使用该功能后,相关使用者随后提出,Visio图能否与我的业务数 ...

  8. Visual Studio工具栏中无法选择调试设备

    Visual Studio工具栏中无法选择调试设备 在Visual Studio工具栏中,默认显示已经识别的设备.用户可以从中选择对应的设备,进行调试和部署App.但是由于误操作,可能导致该选项丢失. ...

  9. VIM 中鼠标选择不选中行号

    VIM 中鼠标选择不选中行号 在Vim中,我们一般会使用 :set nu 打开行号开关. 但是打开行号后,有个弊端,那就是在用鼠标进行选择的时候,会将前面的行号也一起进行拷贝了.但是在gVim中进行选 ...

随机推荐

  1. UE4 使用UGM制作血条

    声明:本文是自己做的项目,可能不是最好的方法,或有错误使用方式.各位不喜勿喷! HP进度 HP背景 将上面的资源拖到UE4中(使用UE4自带的颜色也可实现效果,具体参考官方教程 https://doc ...

  2. 如何用photoshop把图片白色背景变成透明?

    1.当提示配置文件丢失时,选择“指定RGB模式”. 2.Ctrl+J是一个复合动作,复制+新建,会得到一个新图层. 3.选中新图层,点击鼠标左边工具条里面的魔棒工具,再用鼠标点击下图片的某处白色部分, ...

  3. Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    错误提示: 原因: MIME类型错误. 之前添加json.woff.woff2映射,更换系统(Win7升Win10)后配置失效,在webconfig中删除映射即可,因为Win10自带上面3个MIME映 ...

  4. .net 网站开发学习资源

    慕课网 前端基础学习 http://www.imooc.com/course/list?c=fe 了解需求 例子之一 http://wenku.it168.com/d_000517899.shtml ...

  5. hadoop修改MR的提交的代码程序的副本数

    hadoop修改MR的提交的代码程序的副本数 Under-Replicated Blocks的数量很多,有7万多个.hadoop fsck -blocks 检查发现有很多replica missing ...

  6. 淘宝网触屏版 - 学习笔记(0 - 关于dpr)

    注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name=&qu ...

  7. PHP设计模式

    设计模式总的分为三种,创建型模式.结构性模式.行为型模式 1.创建型模式 创建型模式为根据实际情况来创建对象,创建的模式又分为对象创建模式和类创建模式,对象创建模式会把对象创建的一部分在另一个对象中实 ...

  8. JAVA 重复提交

    FormServlet package servlet; import java.io.IOException; import javax.servlet.ServletException; impo ...

  9. js小程序写法优化

    (function(){ var gcld_but = document.getElementById("gcld_but"), gcld_but_li = gcld_but.ge ...

  10. 锁相关知识 & mutex怎么实现的 & spinlock怎么用的 & 怎样避免死锁 & 内核同步机制 & 读写锁

    spinlock在上一篇文章有提到:http://www.cnblogs.com/charlesblc/p/6254437.html  通过锁数据总线来实现. 而看了这篇文章说明:mutex内部也用到 ...