共享点列表中的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>

结果：

react-google-charts sharepoint sharepoint-online

共享点列表中的Google Webchart返回空的WebPart？

问题描述

解决方法

相关问答