Sharepoint：Google Webchart没有出现在列表中吗？

问题描述

我在O365上在线工作了sharepoint，在我们的主页中，我们需要一个图表来显示列表数据的摘要

我正在尝试按照列表中的以下步骤进行操作 https://www.evoketechnologies.com/blog/visualizing-sharepoint-google-charts/

&lt;html&gt;
&lt;head&gt;
&lt;script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script language="javascript"&gt;
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("&lt;View&gt;&lt;/View&gt;");
 
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 = '&lt;p&gt;The request failed: &lt;br&gt;';
markup += 'Message: ' + args.get_message() + '&lt;br&gt;';
displayDiv.innerHTML = markup;
}
&lt;/script&gt;
&lt;/head&gt;
 
&lt;body onload="loadGoogleLibAndDraw()"&gt;
&lt;form name="metricsform" id="metricsform"&gt;
&lt;input id="customListName" name="customListName" value="Project Issues" type="hidden"/&gt;
&lt;/form&gt;
&lt;div&gt;
&lt;div id="displayDiv"&gt;&lt;/div&gt;
&lt;div id="BarChart" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
&lt;div id="LineChart" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

我将上面的脚本嵌入到我的共享点页面中，替换了列表名，列名，但是它没有显示列表中的任何图表，但是给出了如下错误

谢谢

解决方法

@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文件是否已加载。有时它会保留一些缓存，因此请刷新页面或在专用窗口中尝试。

google-visualization sharepoint sharepoint-online

Sharepoint：Google Webchart没有出现在列表中吗？

问题描述

解决方法

相关问答