Question

我的WCF返回此JSON，我想绑定到HighCharts Pie

 Original from WCF -[{"AllRecordsUrl":"http:\/\/EMS\/sites\/IST\/report.aspx","EMSCenterName":"IST","EMSCenterUrl":"http:\/\/EMS\/sites\/IST","Count":2},{"AllRecordsUrl":"http:\/\/EMS\/sites\/LSS\/report.aspx","EMSCenterName":"LSS","EMSCenterUrl":"http:\/\/EMS\/sites\/LSS","Count":17}]

If i hardCode it in cart series as data: [....] it works but the dynamic proccesed data does not..
After processing - [{name: 'IST' , url: 'http://EMS/sites/IST/report.aspx' , y: 2 },{name: 'LSS' , url: 'http://EMS/sites/LSS/report.aspx' , y: 16 }]

即使将其处理为我在上面显示的高级图片，Pie也无法使用我的数据.. 我不确定这里有什么问题，希望得到一些指导

到目前为止，这是做什么......

     function getDataForHub(json) {

        var realArray = $.makeArray(json);
        //debugger;
        //console.log(JSON.stringify(realArray));
        var obj = $.parseJSON(JSON.stringify(realArray));
        var chartData = [];

        $.each(realArray, function (index, item) {
            var final;
            var element;
            var sB = '';
            var name = '';
            var url = '';
            var y = '';
            var color = '';
            for (element in item) {

                if (element == 'EMSCenterName') {
                    name = 'name' + ": " + "'" +  item[element] + "'";
                }
                if (element == 'AllRecordsUrl') {
                    url = 'url' + ": " + "'" +  item[element] + "'";
                }
                if (element == 'Count') {
                    y = 'y' + ": " + item[element];
                }
            }
            sB = name + ' , ' + url + ' , ' + y ;
            //console.log(sB);
            var elements = [];
    //adding each to an array before being pushed to th final array,
            elements.push(sB);
            chartData.push(elements);

        });
        return chartData;
    }

这是我的馅饼

$(function () {
LoadSodByKey("sp.ui.dialog.js", null);
var stdWidth = 530;
var stdHeight = 200;
    Highcharts.setOptions({
 colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263',      '#6AF9C4']
});
$('#containerpie').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: true,
        height: stdHeight + 120,
        width: stdWidth + stdHeight
    },
    title: {
        text: 'Records per Program'
    },
    tooltip: {
        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        /*formatter: function () {
                return '<b>' + this.point.name;
            }*/
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            showInLegend: false
        }
    },
    series: [{
        type: 'pie',
        size: stdHeight,
        data:[{name: 'IST' , url: 'http://EMS/sites/IST/report.aspx' , y: 2 },{name: 'LSS' , url: 'http://EMS/sites/LSS/report.aspx' , y: 16 }],

        point: {
            events: {
                click: function(e) {
                  //alert(e.point.url);
                 var options = {
                        url: e.point.url,
                        title: e.point.name,
                        allowMaximize: true,
                        showClose: true,
                        width: 1100,
                        height: 500,
                        dialogReturnValueCallback: function (result, returnValue) {
                            //location.reload(true);
                        }
                    }

                    SP.UI.ModalDialog.showModalDialog(options);
                    e.preventDefault();
        }
    }
}   
    }]
});
 var data = GetData();});



function GetData(){
var chart = $('#containerpie').highcharts();
series = chart.series[0];
//Ajax call to WCF service 
$.ajax({
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    crossDomain: false,
    url: 'http://EMS/_vti_bin/EMSDashboard.svc/GetEMSCenterDataForHub',
    data: null,
    dataType: 'json',
    success: function (response) {
        var dynamicData = getDataForHub(response);  
        //this doesnot work 
        //series.data = dynamicData;
                    //even this does not work 
        //series.data.push(dynamicData)
                //Wrong, wrong, wrong
        //series.data.push(eval('[' +dynamicData +']'));
                    //gives me count of two but the chart does not load wiht dynamic data
        console.log(series.data.length);             
    },
    error: function (message) {
        alert(message.statusText);
    }
});
}

感谢名单

Answer 1

FIXED：这是

的方式

错误=我已经设置了一个静态图表并尝试使用相同的$ AJAX调用，其中图表已经创建而没有创建“数据”，而是现在首先创建“数据”数组，然后创建使用chart = new Highcharts.Chart（{....}）

创建图表

同时删除了从WCF收到的JSON的所有客户端预处理，即我的服务器对象具有额外的Highchart渲染属性，以便获取..

[{"name":"IST","url":"http:\/\/<XXXX>\/sites\/IST\/ASASA.aspx","y":2},
{"name":"LASS","url":"http:\/\/<XXXX>\/sites\/LASS\/ASASA.aspx","y":17}]

无法从WCF为HighCharts格式化JSON？

1 个答案: