谷歌圖表不能在Sharepoint上加載JavaScript

我對谷歌圖表比較新，並且試圖運行演示和進一步開發的基本圖表。谷歌圖表不能在Sharepoint上加載JavaScript

它是一個非常基本的腳本，一直工作到昨天，現在它不加載任何東西。

我在Sharepoint的腳本編輯器webpart中加載此腳本並嘗試加載它。不知道是我的情況還是Google Charts有問題。

Pl help。我在這裏錯過了一些概念嗎？它是一個非常基本的代碼，我從http://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/得到，並修改了一下我的使用。

我已經運行window.alert，它正確地提取枚舉數中的所有值。我認爲然後發生了一些事情，圖表沒有加載。

javascript警報還會在barChart.draw（data，options）和lineChart.draw（data，options）代碼部分彈出之後彈出，因此代碼已完全執行。

謝謝尼拉吉

*<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>*

來源

2017-05-22 user3483474

不，頁面加載完美 - 除Sharepoint腳本編輯器以外的所有Web部件無縫加載，並且無論編輯器Web部件是否放置，屏幕都會加載一個空白屏幕。 – user3483474

嗨，我經過一天的挫折後再次檢查並重新加載頁面，並看到它正在自行加載！如果谷歌圖表不可靠，它加載了奇思妙想，可能很難在嚴肅的環境中使用。 – user3483474

任何人都有同樣的經歷嗎？ – user3483474

使用內聯標籤事件建議不 - ><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>

來源

2017-05-22 16:54:10 WhiteHat

Hello WhiteHat，謝謝你的迴應。我會嘗試這一點，並在一兩天內回來，以確保它始終有效:)謝謝！尼拉吉 – user3483474

谷歌圖表不能在Sharepoint上加載JavaScript

回答

相關問題