JQplot에 동적 데이터 표시

Question

안녕 얘들 아 JQPlot을 사용하여 piechart를 표시하고 있습니다. Jquery에 익숙하지 않은 이유는 Jquery에서 배열을 조작하기가 어렵 기 때문입니다.

이

JQuery와에 전달됩니다 배열의 구조이며

array (size=8) 
    0 => 
    array (size=1) 
     'Baseball' => string '12.18' (length=5) 
    1 => 
    array (size=1) 
     'Basketball' => string '8.12' (length=4) 
    2 => 
    array (size=1) 
     'Boxing' => string '5.54' (length=4) 
    3 => 
    array (size=1) 
     'Golf' => string '6.64' (length=4) 
    4 => 
    array (size=1) 
     'Soccer' => string '36.90' (length=5) 
    5 => 
    array (size=1) 
     'Tennis' => string '27.31' (length=5) 
    6 => 
    array (size=1) 
     'Football' => string '2.21' (length=4) 
    7 => 
    array (size=1) 
     'Hockey' => string '1.11' (length=4) 

동적 그리고이 데이터는 내 파이 차트에 표시 할. 지금까지 이것이 내 코드입니다. 여기

$(document).ready(function(){ 

     var sports = $('#sports').val(); 
     // sports - this variable holds the data array 
     jQuery.jqplot.config.enablePlugins = true; 
     plot1 = jQuery.jqplot('chart1',[sports], 
     [[['Verwerkende FruedenStunde Companaziert Eine industrie', 9],['Retail', 8], ['Primaire producent', 7], 
     ['Out of home', 6],['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]], ` 
// this is where i put the data from array but idont know how` 
     { 
      title: '', 
      seriesDefaults: { 
      shadow: false, 
      renderer: jQuery.jqplot.PieRenderer, 
      rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: true } 
      }, 
     legend: { show:true, location: 'w' } 
     }); 
    }); 

Answer 1

는

$(document).ready(function(){ 
    var s = $.parseJSON($('#sports').val()); 
    var s1= []; 
    for(d in s) 
    { 
     for (ix in s[d]) { 
      s1.push([ix , parseFloat(s[d][ix])]) 
     } 
    } 
    console.log(s1) 

    jQuery.jqplot.config.enablePlugins = true; 
    plot1 = jQuery.jqplot('chart1',[s1], 
    { 
     title: 'Percentage of Bets by Sport', 
     seriesDefaults: { 
     shadow: false, 
     renderer: jQuery.jqplot.PieRenderer, 
     rendererOptions: { 
      showDataLabels: true, 
      dataLabelThreshold:0, 
      padding: 20, 
      sliceMargin: 2, 
      diameter: 400, 
      showDataLabels: true } 
     }, 
    legend: { show:true, location: 'ne' } 
    }); 
});