如何在 Highcharts 中按状态和图表对 SharePoint 项目的数量进行分组？

Question

我正在尝试使用 SharePoint 2013 列表中的数据在 Highcharts 中创建一个简单的柱形图。我正在尝试按状态可视化项目数量。我能得到的最好的是一个单列图表，其中包含所有项目的计数。如果能帮助解决我的问题，我们将不胜感激！

示例数据集：

╔═══════════╦═══════════════╗
║   Title   ║ ProjectStatus ║
╠═══════════╬═══════════════╣
║ Project 1 ║ Open          ║
║ Project 2 ║ Open          ║
║ Project 3 ║ On Hold       ║
║ Project 4 ║ Complete      ║
║ Project 5 ║ On Hold       ║
║ Project 6 ║ Open          ║
╚═══════════╩═══════════════╝

代码：

<script type="text/javascript">

$(document).ready(function () {

    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Projects",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ProjectStatus' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='ProjectStatus'/></OrderBy></Query>",
       completefunc: processData
    });
});

function processData (xData, status) {
    var statusData = [];

    $(xData.responseXML).SPFilterNode("z:row").each(function () {
        statusData.push({
            vstatus:      $(this).attr('ProjectStatus'),
            units:    $(this).attr('Title')
        });
    });

    var statData=[];
    var projectData=_.groupBy(statusData,'vstatus');

    _.each(projectData, function(row) {
        var projectCount = row.length;

        var colorMap = {'Active':'#33AD33','Complete':'#CC0000','On Hold':'#FFCC00'};

        statData.push( {
            name: row[0].status,
            y: projectCount,
            color: colorMap[row[0].status]
        });
    });
    renderChart (statData);
}

function renderChart (data) {

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'chart-container',
            type: 'column'
        },
        title: {
            text: 'Number of Projects by Status'
        },
        xAxis: {
            categories: ['Active', 'Complete', 'On Hold']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Number of Projects'
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: 'gray'
                }
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.y;}
        },
        credits: {
            enabled: false
        },
        series: [{
            type:'column',
            name: 'Status',
            data: data
        }] 
    });
 }
</script>

Here is the current output

Answer 1

想通了。由于 CAML 查询，需要为列名称提供 XML 命名空间前缀 ("ows_")。

将 ows_ 名称添加到以下部分，瞧！

    $(xData.responseXML).SPFilterNode("z:row").each(function () {
        statusData.push({
            vstatus:      $(this).attr('ows_CaddieStatus'),
            units:    $(this).attr('ows_Title')
        });
    });

如何在 Highcharts 中按状态和图表对 SharePoint 项目的数量进行分组？

How do I group number of SharePoint items by status and chart in Highcharts?

javascript

sharepoint

jquery

highcharts

underscore.js