2016-04-25 12 views
1

ich Daten von Ajax-Antwort in einem Array haben, hier ist sie:Daten von Ajax Antwort nicht in HighChart geladen werden

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

ich dieses Ergebnis in highchart geben wollen, hier ist mein Code:

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

ich versuchte console.log zu verwenden, hier ist das Ergebnis: enter image description here

es das Ergebnis zeigen. Ich nahm an, dass der Fehler in series: data_array verursacht, wenn ich einen harten Code dort gebe, zeigte das Diagramm.
Aber führen Sie den Code: series: data_array, gibt es keine Grafik show.Help mir bitte ...

+0

Teilen Sie einen Text anstelle von 'image'! Was sagt die Konsole? Irgendwelcher "Fehler"? – Rayon

+0

Es gibt keinen Fehler im Konsolenprotokoll, es zeigt nur das Ergebnis –

+1

Können Sie [Fiddle] (https://jsfiddle.net/) teilen? – Rayon

Antwort

1

hier ist mein Beispielcode für Kreisdiagramm, dass, wie ich das tun,

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

gerade diese Methode ausprobiert, Es sollte dir auf jeden Fall helfen. Denken Sie daran, nur die Reihe als Array in var options1 zu setzen.