使用 AngularJs 和 JqPlot 绘制 SharePoint 托管应用图表
5.00/5 (7投票s)
使用 AngularJs 和 JqPlot 构建图表 SharePoint 托管应用。
引言
SharePoint 2013 引入了应用，其中一个选项是创建 SharePoint 托管的应用，这些应用托管在 SharePoint 自身的应用 Web 中。使用 SharePoint 托管的应用，您不能使用服务器端代码，因此仅限于 JavaScript。但是，您可以读取和写入宿主 Web（托管应用的 SharePoint Web）中的 SharePoint 列表数据。
JavaScript 框架，如 Angular、Backbone 和 Knockout，已经日趋成熟并变得非常强大。
因此，这里的场景是 SharePoint 列表中包含数据（自定义列表，一个用于标题的列，一个用于值的列），创建一个具有读取权限的应用来访问这些数据，使用 Angular（http://angularjs.org）进行数据绑定，并使用 jqPlot（http://www.jqplot.com ）进行图表渲染。此外，此示例中的一个图表使用了 ui-chart 指令（http://angular-ui.github.io/ui-chart/)，该指令允许您在 Angular 中使用 jqPlot。
我假设对本文感兴趣的人已经具备 SharePoint 2013、JavaScript 和 HTML 的一些知识，因此我在这里不会写关于 SharePoint 应用、AngularJS 和 jqPlot 的内容。您可以访问它们各自的网站以了解更多信息。
背景
撰写本文的基本想法是为 SharePoint 创建更好的图表。在 2010 版本中，我们有一个图表 Web 部件，它还不错；在 2013 版本中，该 Web 部件已被弃用。Excel 是 SharePoint 中图表的理想解决方案。它是一个强大的工具，但它不能满足所有场景，特别是对于我们想在页面中显示的快速图表。
通过引入更好的客户端脚本支持（JSOM、REST）和应用模型，Microsoft 为 SharePoint 开发开辟了一个全新的世界。现在，可以使用强大且经过验证的 JavaScript 框架（如 AngularJS 和 jqPlot）来开发解决方案。
我有一个创建此应用的灵感，是在观看 Jeremy Thake 的讲座“使用 AngularJS 创建 SharePoint 2013 应用”时产生的，该讲座在拉斯维加斯的 Channel 9 上（http://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC408）。这里展示的许多代码（用于检索 SharePoint 数据的服务）都来自他。
创建应用
Data
我在 SharePoint 中创建了一个简单的自定义列表，名为 PieChartData。除了自动生成的 Title 列（我将用它作为标签）之外，我还添加了一个名为 Value 的列（类型 - 数字）。
我还将此列表另存为模板（包含数据），您可以在此处下载 - 下载 PieChartData.zip
您应该在将安装应用的 SharePoint 网站中创建此列表。
您可以在上面的图片中看到带有示例数据的列表。
注意：如果您自己创建此列表，则字段的内部名称非常重要，必须是 Title 和 Value，否则代码将失败。如果您无法将字段命名为这样，或者坚持将其命名为其他名称，则还应更改 App.js 中检索 SharePoint 数据的代码。只需找到这两行并更改即可。
var Title = currentItem.get_item("Title");
var Value = currentItem.get_item("Value");
另外，如果您想更改列表名称，也应该在这里（App.js）进行更改。
var promise = $SharePointJSOMService.getData($scope, 'PieChartData'); 第二个参数是列表名称。
想法：创建一个应用部件并在其中提供列表名称属性会很棒。这将赋予您的用户能力，使他们能够更改数据源。
Sharepoint 应用创建
我在此部分使用了 Visual Studio 2013。我创建了一个新项目（下图），选择“SharePoint 2013 的应用”。
然后我选择了它将是一个 SharePoint 托管的应用（下图）。
最后一件事是设置我们的应用权限。在 Application.manifest 文件中（双击它），在权限选项卡下，为 Web 对象添加读取权限（下图）。
这样我就可以开始了。
资源
我将 angular.js 复制到项目中的 Scripts/lib/angular 目录，将 jqplot 复制到 Scripts/lib/jqplot，将 bootstrap 复制到 Scripts/lib/bootstrap（但我甚至没有使用它）。UI-charts 的 chart.js 文件直接复制到了 Scripts/lib 目录。
视图模板
在我们应用 Web 的主页 Default.aspx 文件中，我引用了所需的资源，并添加了我们 Angular 应用的视图部分。
这组包含内容应放在 Default.aspx 页面的 head 部分。
<script type="text/javascript" src="../Scripts/lib/angular/angular.js"></script>
<script type="text/javascript" src="../Scripts/lib/jqplot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../Scripts/lib/jqplot/plugins/jqplot.pieRenderer.js">
</script>
<script type="text/javascript" src="../Scripts/lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="../Scripts/lib/chart.js"></script>
<script type="text/javascript" src="../Scripts/Common.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/lib/jqplot/jquery.jqplot.css"/>
Angular 视图将放在 body 中：
<div ng-app="myChartingApp" ng-controller="DemoCtrl">
<div ui-chart="someData" chart-options="myChartOpts"
style="width:600px; height:300px”></div>
<div id="barchart" style="width:600px; height:300px;"></div>
<div id="linechart" style="width:600px; height:300px;"></div>
</div>
在 SharePoint 主页中，将 ng-app 指令放在 html 元素中并不实用，因此我将其放在了应用 Default.aspx 页面的 div 元素中。我还声明了 DemoCtrl 控制器（通过 ng-controller 指令声明），因此此 div 中的所有内容都将成为 myChartApp 的一部分，并且它将使用 DemoCtrl 控制器。
在这个应用 div 中还有三个 div（它们作为图表的占位符）。
1. 第一个使用 ui-chart 指令，并绑定到我们控制器中用于图表数据的 someData 属性，以及用于图表选项的 myChartOpts 属性。
2. 第二个 div 是我们条形图的容器，它将直接渲染，而不是通过 ui-chart 指令。
3. 第三个 div 是我们折线图的容器，它将直接渲染，而不是通过 ui-chart 指令。
这就是此项目正常工作所需的全部标记。
注意：我在这里提供了两种创建图表的方案：一种使用 ui-chart 指令，如果您为每种图表类型创建控制器和应用部分（或者对相似的图表进行分组），则该方案既方便又整洁；第二种方法是直接使用 jqplot，当您创建一个控制器来渲染不同类型的图表，并且在您的应用部分有一个属性供用户选择他们想要渲染的图表时，该方法很有用。
Javascript
我们所有的代码都将放在 App.js 和 Common.js 中。
我删除了这里所有的 SharePoint 示例代码，并放入了我自己的代码。myChartingApp 模块、DemoCtrl 控制器和用于检索 SharePointData 的 Angular 服务在这里定义。
注意：所有关于 Angular 服务的功劳都归于 Jeremy Thake，他写了一篇关于在 SharePoint 中使用 AngularJS 的精彩文章（http://www.jeremythake.com/2013/10/sharepoint-hosted-app-with-angularjs-for-mvc-javascript/）。
Common.js
此文件只有一个通用方法，该方法取自 MSDN 示例（几乎每个 SharePoint 托管的应用示例中都可以找到它），它用于解析 QueryString。
function getQueryStringParameter(paramToRetrieve) {
var params =document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)return singleParam[1];
}
}
模块
这是定义 Angular 模块并为饼图注入图表选项的代码。
var myChartingApp = angular.module('myChartingApp', ['ui.chart'])
.value('charting', {
pieChartOptions: {
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show: true, location: 'e' }
}
});
在此代码中，我们创建了 myChartingApp，其中包含用于创建饼图（使用 ui-chart 指令的那个）的图表选项。我们还告诉 Angular 我们将使用 ui-chart（['ui.chart']）。
控制器 (Controller)
myChartingApp.controller('DemoCtrl', function ($scope, charting, $SharePointJSOMService) {
属性
$scope.someData = [[]];
$scope.ticks = [];
$scope.barvalues = [];
var promise = $SharePointJSOMService.getData($scope, 'PieChartData');
promise.then(function (message) {
alert(message);
},function (reason) {
alert(reason);
}
);
$scope.myChartOpts =charting.pieChartOptions;
…
关于属性的一点说明
- someData – 将保存数据（SP 列表的标题、值对集合）的属性。
- ticks 属性 – 刻度数组（本例中为 SP 列表的标题集合），用于条形图。
- barvalues – SP 列表中的值数组，用于条形图的值和折线图的 Y 轴。
- myChartOpts – 注入到控制器的饼图选项。在带有 ui-chart 指令的饼图中用到。
方法
$scope.setBarChart = function () {
var plot2 = $.jqplot('barchart', [$scope.barvalues], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
},
axes: {
xaxis: {
renderer:$.jqplot.CategoryAxisRenderer, ticks: $scope.ticks
}
}
});
}
setbarChart 方法用于使用 jqplot 渲染条形图，无需 ui-chart 指令的帮助。它非常简单，它将 $scope.barvalues 设置为数据，$scope.ticks 设置为刻度，并且它有一个显示点标签的选项（pointLabels）。
$scope.setLineChart = function () {
var plot = $.jqplot('linechart', [$scope.barvalues], {
title: 'Sales 2014',
axesDefaults: {
labelRenderer:$.jqplot.CanvasAxisLabelRenderer
},
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
axes: {
yaxis: {
label: 'Sales', min: 0
},
xaxis: {
label: 'Months', min: 1, max:$scope.barvalues.length
}
},
series: [{ color: '#5FAB78' }]
});
setLineChart 方法用于使用 jqplot 渲染折线图，无需 ui-chart 指令的帮助。它非常简单，它将 $scope.barvalues 设置为 Y 轴数据，将 1 设置为 X 轴的最小值，将 $scope.barvalues.length 设置为 X 轴的最大值，并且它有一个显示标题、Y 轴和 X 轴标签的选项。
Service
正如我所说，此服务来自 Jeremy Thake 的博客，并进行了少量修改。它的目的是连接到 SharePoint 宿主 Web 并从 PieChartData 列表中读取数据。
我将此代码添加到了列表枚举器中。
var Title = currentItem.get_item("Title");
var Value = currentItem.get_item("Value");
var b = [Title, Value];
$scope.someData[0].push(b);
$scope.ticks.push(Title);
$scope.barvalues.push(Value);
它很简单，我正在读取 Title 和 Value 字段的值。
并将它们作为集合成员添加到我的属性中（someData、ticks、barvalues）。
此外，在枚举器外部，我调用了渲染 jqPlot 图表的方法。
$scope.setBarChart();$scope.setLineChart();
就这样。
结果如下（下图）。
结论
这是一个非常简单的应用，它更像是一个预览，而不是一个真正的应用，但通过这种方式，您可以轻松掌握在 SharePoint 应用中使用 Angular 进行图表绘制的基础知识。
后续步骤和想法
- 创建带有单个图表的应用部件，以便用户可以在 SharePoint 页面中显示图表。
- 为不同类型的图表创建控制器。
- 尝试更复杂的图表。
SharePoint 应用商店
如果您计划将此类应用部署到 SharePoint 应用商店，您应该知道您的应用应该能在 IE8 上运行。我没有针对 IE8 测试 angularjs 和 jqplot。