如何解决Sharepoint：Google Webchart没有出现在列表中吗？
我在O365上在线工作了sharepoint，在我们的主页中，我们需要一个图表来显示列表数据的摘要
我正在尝试按照列表中的以下步骤进行操作 https://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/
<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':['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 data = new google.visualization.DataTable();
data.addColumn('string','Status');
data.addColumn('number','PercentComplete');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Status'));
row.push(listItem.get_item('PercentComplete'));
data.addRow(row);
}
var options = {
chart: {
title: 'Sales Trend',},bars: 'vertical'
};
var barChart = new google.charts.Bar(document.getElementById('BarChart'));
barChart.draw(data,options);
var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.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="customListName" name="customListName" value="Project Issues" type="hidden"/>
</form>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 900px; height: 500px;"></div>
<div id="LineChart" style="width: 900px; height: 500px;"></div>
</div>
</body>
</html>
我将上面的脚本嵌入到我的共享点页面中，替换了列表名，列名，但是它没有显示列表中的任何图表，但是给出了如下错误
谢谢
解决方法
@aryan，
请尝试下面的代码，我能够使图表起作用。
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.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">
var returnedItems = null;
$(document).ready(function () {
loadGoogleLibAndDraw();
});
function loadGoogleLibAndDraw() {
google.charts.load('current',{ 'packages': ['bar','line'] });
google.charts.setOnLoadCallback(visualizeData);
}
function visualizeData() {
var context = new SP.ClientContext();
var list = context.get_web().get_lists().getByTitle('smartphone_sales');
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 data = new google.visualization.DataTable();
data.addColumn('string','Year');
data.addColumn('number','Red Mi3');
data.addColumn('number','Honor 5s');
data.addColumn('number','Le 1s');
var enumerator = returnedItems.getEnumerator();
var markup = '';
while (enumerator.moveNext()) {
var row = [];
var listItem = enumerator.get_current();
row.push(listItem.get_item('Title'));
row.push(listItem.get_item('RedMi3'));
row.push(listItem.get_item('Honor5s'));
row.push(listItem.get_item('Le1s'));
data.addRow(row);
}
var options = {
chart: {
title: 'Sales Trend',},bars: 'vertical'
};
var barChart = new google.charts.Bar(document.getElementById('BarChart'));
barChart.draw(data,options);
var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.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>
<div>
<div id="displayDiv"></div>
<div id="BarChart" style="width: 900px; height: 500px;"></div>
<div id="LineChart" style="width: 900px; height: 500px;"></div>
</div>
</body>
</html>
测试结果：
请确保代码中列的内部名称正确。您可以检查源代码面板以查看JS文件是否已加载。有时它会保留一些缓存，因此请刷新页面或在专用窗口中尝试。
BR
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。