sharepoint - 共享点列表中的 Google 网络图表返回空的 Web 部件？

Question

我有一个 sharepoint 在线列表，并想在我的主页中转换为图表

该列表包含标题、项目状态（选择列）、完成百分比。我想要项目状态的总数如下。下图是从 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。

问候

score 0 · Accepted Answer

我在我的 SPO 环境中测试了您的代码。

创建一个列表并添加一些列

将以下代码插入到内容编辑器 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>

结果：

BR

sharepoint - 共享点列表中的 Google 网络图表返回空的 Web 部件？

1 回答 1

Related

Reference