Question

这是我的第一个HighCharts项目，我遇到了一些问题，显示了我使用SPservices获取的数据。我找到了这个教程（SharePoint to 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
        }]
    });});

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

enter image description here

提前感谢任何建议。

Answer 1

您必须在系列数据数组中提供切片名称。试试这种方式

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

有关详细说明，请参阅以下小提琴 http://jsfiddle.net/krishanudey/XzZa4/1/
如果您看到该系列的数据，您会看到，在未提供切片名称的地方，它的名称为Slice

使用Highcharts与SPServices jQuery库创建饼图

1 个答案: