0

私の 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 }] 

ハイチャートの上に示したものに処理した後でも、パイは私のデータでは機能しません..ここで何が問題なのかわかりません。いくつかのガイダンスをいただければ幸いです

これがこれまでに行われたことです...

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

ありがとう

4

1 に答える 1

0

修正済み: 方法は次のとおりです。

間違い = 静的チャートを設定し、「データ」が作成されていないチャートが既に作成されている $AJAX 呼び出しで同じものを使用しようとしましたが、代わりに「データ」配列が最初に作成され、次にチャートが作成されますチャートを使用 = 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}]
于 2013-10-31T07:36:35.457 に答える