将Highcharts与SPServices jQuery库一起使用以创建饼图

这是我的第一个HighCharts项目，在显示使用SPservices获取的数据时遇到一些问题。我找到了本教程（SharePoint到Highcharts），它起到了很大的作用，但是在显示图表中的列名和图例时遇到了问题，它仅显示“ Slice”。这是我的javascript：

$(document).ready(function() {

var namesArray = [];
var valuesArray = [];
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Test",
   CAMLQuery: "<Query><OrderBy><FieldRef Name='Person'/></OrderBy></Query>",
   CAMLViewFields: "<ViewFields><FieldRef Name='Person' /><FieldRef Name='Age' /><FieldRef Name='Earnings' /><FieldRef Name='Names' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var names = $(this).attr("ows_Names");
var values = Math.round($(this).attr("ows_Earnings"));
namesArray.push(names);
valuesArray.push(values);

});  } });  
chart = new Highcharts.Chart({
           chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Total values',
            x: -20, //center
             },

   plotOptions:{ pie: {
allowPointSelect: true,
showInLegend: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: $'+ this.y;} }, }},

        subtitle: {
            text: 'This chart shows value from a SharePoint list using SPServices',
            x: -20
        },

   tooltip:{shared: true,pointFormat: '{series.name}: <b>{point.values}$</b>{point.y}',valueDecimals: 2,shared: true,
        useHTML: true,},


        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -300,
            y: 100,
            borderWidth: 0
        },
        series: [{
         showInLegend:true,
        type: 'pie',
            name: 'Earnings',
            data: valuesArray
        }]
    });});  

这是我在浏览器中看到的：

预先感谢您的任何建议。