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

Question

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

示例数据集。

╔═══════════╦═══════════════╗
║   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>

以下是当前的输出结果

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')
        });
    });