结合SPServices jQuery库使用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
        }]
    });});  

$（文档）.ready（函数（）{
var namesArray=[]；
var值ray=[]；
$（）.SPServices({
操作：“GetListItems”，
async:false，
列表名：“测试”，
CAMLQuery:“”，
CAMLViewFields:“”，
completefunc：函数（扩展数据、状态）{
$（扩展数据.responseXML）.SPFilterNode（“z:row”）.each（函数（）{
变量名称=$（this.attr（“ows_名称”）；
var值=数学圆（$（this）.attr（“ows_收益”）；
namesArray.push（名称）；
值ray.push（值）；
});  } });  
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“总值”，
x:-20，//中心
},
绘图选项：{饼图：{
allowPointSelect:true，
showInLegend：是的，
光标：“指针”，
数据标签：{
启用：对，
颜色：'#000000'，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回“+this.point.name+”：$”+this.y；}}}，}，
副标题:{
text:'此图表使用SPSServices显示SharePoint列表中的值'，
x:-20
},
工具提示：{shared:true，pointFormat:{series.name}:{point.values}${point.y}，valueDecimals:2，shared:true，
useHTML:true，}，
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-300，
y:100，
边框宽度：0
},
系列：[{
showInLegend：是的，
键入“pie”，
姓名：'收入'，
数据：valuesArray
}]
});});  

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

---

提前感谢您的建议。

您必须在序列数据数组中提供切片名称。这样试试看

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); <-- YOU DON'T NEED THIS
        valuesArray.push([names,values]);
    });  
});  

completefunc:函数（扩展数据、状态）{
$（扩展数据.responseXML）.SPFilterNode（“z:row”）.each（函数（）{
变量名称=$（this.attr（“ows_名称”）；
var值=数学圆（$（this）.attr（“ows_收益”）；
//namesArray.push（名称）；你能显示你从
SPServices
得到的响应吗？我假设这就是你在控制台上要求的（？）：[“John”][“John”、“Charles”][“John”、“Charles”、“Jim”[“John”、“Charles”、“Jim”、“Pedro”][“John”、“Charles”、“Jim”、“Pedro”、“Juan”][“John”、“Charles”、“Jim”、“Pedro”、“Juan”][“John”、“Charles”“约翰”、“查尔斯”、“吉姆”、“佩德罗”、“胡安”、“阿里”[“约翰”、“查尔斯”、“吉姆”、“佩德罗”、“胡安”、“阿里”、“库科”][“约翰”、“查尔斯”、“吉姆”、“佩德罗”、“胡安”、“阿里”、“库科”、“胡安”、“胡安”][“约翰”、“查尔斯”、“吉姆”、“佩德罗”、“胡安”、“阿里”、“库科”、“胡安”、“珍妮”]我知道我不应该在评论部分写感谢信，但我必须这么做……太棒了！！！