2016-04-25 71 views
1

我從陣列Ajax響應數據,那就是:數據從Ajax響應無法加載在HighChart

"attd": [ 
    { 
    "y": 1, 
    "name": "Attendance", 
    "sliced": true, 
    "selected": true 
    }, 
    { 
    "y": 1, 
    "name": "SPJ in town", 
    "sliced": true, 
    "selected": true 
    } 
] 

我想通過這個結果到highchart,這裏是我的代碼:

success: function(rs) { 
    var attdChart = $(".attdChart"); 
    attdChart.unbind(); 
    var jsonData = JSON.parse(rs); 
    if (jsonData.success) { 
     var data = jsonData.attd; 
     var data_array = []; 
     $.each(data, function(key, value){ 
      data_array.push(value); 
     }); 
     $('#containerPiechart').highcharts({ 
      chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      type: 'pie', 
      height: 200, 
      marginRight: 60 
      }, 
      title: { 
      text: '' 
      }, 
      tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 
      plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
       enabled: false, 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'      
       } 
       }, 
       showInLegend: true 
      } 
      }, 


legend: { 
      align: 'right', 
      verticalAlign: 'top', 
      layout: 'vertical', 
      x: 0, 
      y: 0 
      }, 


    series: data_array 
     }); 
} 

我試圖用console.log,這裏是結果: enter image description here

它顯示的結果。圖表顯示,我認爲在series: data_array的錯誤導致了我在那裏給出了一個硬代碼。
但導致代碼:series: data_array,沒有圖表show.Help我請...

+0

請分享文字而不是'image'!控制檯說什麼?任何「錯誤」? – Rayon

+0

控制檯日誌中沒有錯誤,只顯示結果 –

+1

你能分享[小提琴](https://jsfiddle.net/)嗎? – Rayon

回答

1

這裏是爲餅圖我的示例代碼,我該怎麼辦,

var options1={ 

     chart:{ 
      renderTo: 'pie_chart', 
      type: 'pie', 
      options3d:{ 
         enabled: true, 
         alpha: 45, 
         beta: 0 
      } 

     }, 
     title: { 
      text: 'Title' 
     }, 
     xAxis: { 
     categories: [] 
     }, 
     yAxis: { 

      title: { 
       text: 'Time Fixed', 

      }, 
      labels: { 
       overflow: 'justify' 
      }, 
      tooltip:{ 
       formatter: function() { 
       return this.series.name +': '+ this.y; 
       } 
      } 

     }, 

     plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        depth: 35, 
        dataLabels: { 
         enabled: true 
        }, 

        showInLegend: true 
       }, 
       series: { 

        animation:{ duration: 1000} 
       } 
     }, 
     legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 50, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
       shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [] 

    } 
    // chart = new Highcharts.Chart(options1); 
    $.getJSON("your_ajax_call_file.php", function(json){ 
     $.each(json, function(key, value) { 
      var series = {}; // <-------------------- moved and changed to object 
      series.name = key; 
      series.data = value; 
      options1.series.push(series); // <-------- pushing series object 
     }); 
     var chart = new Highcharts.Chart(options1); 
    }); 

只是嘗試了這種方法,它應該可以幫助你。記住只要把數組放在var options1中即可。