如何解决共享点列表中的Google Webchart返回空的WebPart?
该列表包含标题,项目状态(选择列),完成百分比。我希望获得以下项目状态总数。下图是通过Power BI完成的
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
<script language="javascript">
var returnedItems = null;
function loadGoogleLibAndDraw() {
google.charts.load('current',{ 'packages': ['corechart','bar','line'] });
google.charts.setonLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(document.getElementById('Project Issues').value);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback,onFailedCallback);
}
function onSucceededCallback(sender,args) {
var countProcessing = 0;
var countUserConfirming = 0;
var countReConfirming = 0;
var enumerator = returnedItems.getEnumerator();
while (enumerator.moveNext()) {
var listItem = enumerator.get_current();
if (listItem.get_item('Status').get_lookupValue() == "In Progress")
countProcessing++;
if (listItem.get_item('Status').get_lookupValue() == "Completed")
countUserConfirming++;
if (listItem.get_item('Status').get_lookupValue() == "Not Started")
countReConfirming++;
}
var data = new google.visualization.DataTable();
data.addColumn('string','Status');
data.addColumn('number','% Complete');
data.addRows([
['In Progress',countProcessing],['Completed',countUserConfirming],['Not Started',countReConfirming]
]);
var totalIncident = countProcessing + countUserConfirming + countReConfirming;
var options = {
title: 'Incident by Status (' + totalIncident + ')'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data,options);
}
function onFailedCallback(sender,args) {
var markup = '<p>The request Failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
</head>
<body onload="loadGoogleLibAndDraw()">
<form name="metricsform" id="metricsform">
<input id="Project Issues" name="Project Issues" value="Project Issues" type="hidden" />
</form>
<div>
<div id="displayDiv"></div>
<div id="piechart" style="width: 500; height: 500px;"></div>
</div>
</body>
</html>
结果为空,并且在页面中返回空的Webpart。
致谢
解决方法
我在SPO环境中测试了您的代码。
- 创建列表并添加一些列
将以下代码插入到Content Editor Web部件中:
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert('ready');
google.charts.load('current',{ 'packages': ['corechart','bar','line'] });
google.charts.setOnLoadCallback(loadGoogleLibAndDraw);
});
var returnedItems = null;
function loadGoogleLibAndDraw() {
ExecuteOrDelayUntilScriptLoaded(visualizeData,"sp.js");
}
function visualizeData() {
alert('visualizeData');
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle(document.getElementById('Project Issues').value);
var caml = new SP.CamlQuery();
caml.set_viewXml("<View></View>");
returnedItems = list.getItems(caml);
context.load(returnedItems);
context.executeQueryAsync(onSucceededCallback,onFailedCallback);
}
function onSucceededCallback(sender,args) {
alert('onSucceededCallback');
console.log(returnedItems);
var countProcessing = 0;
var countUserConfirming = 0;
var countReConfirming = 0;
var enumerator = returnedItems.getEnumerator();
while (enumerator.moveNext()) {
var listItem = enumerator.get_current();
if (listItem.get_item('Status') == "In Progress")
countProcessing++;
if (listItem.get_item('Status') == "Completed")
countUserConfirming++;
if (listItem.get_item('Status') == "Not Started")
countReConfirming++;
}
console.log(countProcessing,countUserConfirming,countReConfirming);
var data = new google.visualization.DataTable();
data.addColumn('string','Status');
data.addColumn('number','% Complete');
data.addRows([
['In Progress',countProcessing],['Completed',countUserConfirming],['Not Started',countReConfirming]
]);
var totalIncident = countProcessing + countUserConfirming + countReConfirming;
var options = {
title: 'Incident by Status (' + totalIncident + ')'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data,options);
}
function onFailedCallback(sender,args) {
var markup = '<p>The request failed: <br>';
markup += 'Message: ' + args.get_message() + '<br>';
displayDiv.innerHTML = markup;
}
</script>
<input id="Project Issues" name="Project Issues" value="Project Issues" type="hidden" />
<div>
<div id="displayDiv"></div>
<div id="piechart" style="width: 500; height: 500px;"></div>
</div>
结果:
BR
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。