Google 图表未在 Sharepoint 上使用 javascript 加载答案

【问题标题】：Google chart doesnt load with javascript on SharepointGoogle 图表未在 Sharepoint 上使用 javascript 加载
【发布时间】：2017-05-22 01:07:46
【问题描述】：

我对谷歌图表比较陌生，并试图运行一个基本图表以进行演示和进一步开发。

这是一个非常基本的脚本，直到昨天都运行良好，现在它没有加载任何内容。

我正在 Sharepoint 的脚本编辑器 webpart 中加载此脚本并尝试加载它。不确定是我的情况还是只是 Google 图表有问题。

请帮忙。我在这里错过了一些概念性的东西吗？这是我从http://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/ 获得的非常基本的代码，并对其进行了一些修改以供我使用。

我已经运行了 window.alert，它正确地提取了枚举器中的所有值。我认为然后发生了一些事情并且图表没有加载。

在 barChart.draw(data, options) 和 lineChart.draw(data, options) 代码部分之后还会弹出javascript警报，因此代码已完全执行。

谢谢尼拉吉

*<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('customListName').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', 'Part No');
 data.addColumn('number', 'Volume');
 var enumerator = returnedItems.getEnumerator(); 
 var markup = ''; 
 while (enumerator.moveNext()) { 
 var row = [];

 var listItem = enumerator.get_current(); 
 row.push(listItem.get_item('Part_x0020_No'));
 row.push(listItem.get_item('Volume'));
 data.addRow(row);

 } 

var options = {
 chart: {
 title: 'KPIs',
 },
 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="Projects" type="hidden"/>
 </form>
 <div> 
 <div id="displayDiv"></div>
 <div id="BarChart" style="width: 300px; height: 200px;"></div>
 <div id="LineChart" style="width: 300px; height: 200px;"></div>
 </div> 
</body> 
</html>*

【问题讨论】：

不，页面加载完美 - 除了 sharepoint 脚本编辑器之外的所有 webpart 都可以无缝加载，并且无论是否放置了编辑器 webpart，都会加载一个空白屏幕作为屏幕的一部分。
嗨，经过一天的挫折后，我再次检查并重新加载页面，发现它正在自行加载！如果谷歌图表如此不可靠，它会随心所欲地加载，那么它可能很难在严肃的环境中使用。
有人有同样的经历吗？

标签： javascript sharepoint charts google-visualization

【解决方案1】：

建议不使用内联标签事件 --> <body onload="...

特别是如果有多个编辑器 Web 部件/<body> 标签

另外，这不是必需的，因为 loader...
会在调用回调之前等待文档完成加载

绝对肯定，将所有<script> 标签放在底部，就在</body> 结束标签之前

推荐以下设置...

<html>
<body>
  <form name="metricsform" id="metricsform">
    <input id="customListName" name="customListName" value="Projects" type="hidden"/>
  </form>
  <div>
    <div id="displayDiv"></div>
    <div id="BarChart" style="width: 300px; height: 200px;"></div>
    <div id="LineChart" style="width: 300px; height: 200px;"></div>
  </div>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
  <script>
  var returnedItems = null;
  function visualizeData() {
   var context = new SP.ClientContext();
   var list = context.get_web().get_lists().getByTitle(document.getElementById('customListName').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', 'Part No');
    data.addColumn('number', 'Volume');
    var enumerator = returnedItems.getEnumerator();
    var markup = '';
    while (enumerator.moveNext()) {
      var row = [];

      var listItem = enumerator.get_current();
      row.push(listItem.get_item('Part_x0020_No'));
      row.push(listItem.get_item('Volume'));
      data.addRow(row);
    }

    var options = {
      chart: {
        title: 'KPIs',
      },
      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;
  }
  google.charts.load('current', {
    callback: visualizeData,
    packages: ['bar', 'line']
  });
  </script>
</body>
</html>

【讨论】：

您好 WhiteHat，感谢您的回复。我会试试这个，一两天后回来，以确保它始终有效:) 谢谢！尼拉吉