2013-10-30 48 views
0

我的WCF返回該JSON和我要綁定到HighCharts派無法從WCF爲HighCharts格式化JSON?

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

即使它處理到我上面顯示highcharts餡餅不會與我的數據工作.. 我不知道以後什麼是錯的在這裏,希望得到一些指導

這裏是什麼迄今所做...

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

感謝名單

回答

0

FIXED: 下面是如何

錯誤=我已經建立了一個靜態的圖表,並試圖用同樣的與其中的圖表已經沒有了「數據」創建$ AJAX調用現在先創建「data」數組,然後使用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}]