2015-05-18 21 views
5

Ho una pagina che elenca circa 30 portafogli, ciascuno con 3 titoli. Sto cercando di creare un grafico a torta per ogni portafoglio, in cui il grafico a torta sarebbe composto da valori dei tre titoli di quel portafoglio.Creazione dinamica di grafici con jQuery

I valori delle scorte vengono stampati sullo schermo, così posso afferrarli abbastanza facilmente con jQuery .text() e .slice().

Il mio problema sorge quando voglio modificare i dati nel grafico per corrispondere a ciascun portafoglio (o gruppo di azioni).

Il <script>:

$(document).ready(function() { 

    $.each($('.stocks-data'), function(){ 
     $this = $(this); 
     $a_base = $this.children(".a-card").text(); 
     $a_pie = $a_base.].replace (/[^\d.]/g, '');; 
     console.log($a_pie) 
     $b_base = $this.children(".b-card").text(); 
     $b_pie = $b_base.replace (/[^\d.]/g, ''); 
     console.log($b_pie) 
     $c_base = $this.children(".c-card").text(); 
     $c_pie = $c_base.replace (/[^\d.]/g, ''); 
     console.log($c_pie) 

     var data = [ 
     { 
      value: $a_pie, 
      color:"#F7464A", 
      highlight: "#FF5A5E", 
      label: "Stock A" 
     }, 
     { 
      value: $b_pie, 
      color: "#46BFBD", 
      highlight: "#5AD3D1", 
      label: "Stock B" 
     }, 
     { 
      value: $c_pie, 
      color: "#FDB45C", 
      highlight: "#FFC870", 
      label: "Stock C" 
     } 
     ] 

     $this.children('.stocks-pie'), (function(index, element){   
      var ctx = element.getContext("2d"); 
      new Chart(ctx).Doughnut(data ,{animateRotate: false}); 
     }); 

    }); 

}); 

Il page.php:

#in a php echo 
<div class=".stocks-data"> 
    <div class="name-container"> 
     <div class="name">Name: '.$name.'</div> 
    </div> 
    <div class="a-card">Stock A: '.$stocka.'g</div> 
    <div class="b-card">Stock B: '.$stockb.'g</div> 
    <div class="c-card">Stock C: '.$stockc.'g</div> 
    <canvas class="stocks-pie" height="80" width="100"></canvas> 
</div> 

Esempio Dati:

.$stocka. = 14.2 .$stockb. = 2.8 .$stockc. = 3.9

Il problema:

posso ottenere i grafici a lavorare, ma solo in mostra gli ultimi dati di portafogli per ogni grafico portafogli, che ovviamente non è quello che voglio. Come posso rendere questa dinamica, in cui il grafico viene creato per ogni portafoglio utilizzando i propri dati?

Info integrativa:

Questo sta usando Charts.js

+0

che cosa è tornato da 'con sole.log ($ a_pie) ' – Saqueib

+0

Varia per ogni portafoglio, ma è essenzialmente uguale a'. $ stocka .' – thefoxrocks

+0

prova a eseguire 'parseFloat ($ a_pie)' su tutti i valori – Saqueib

risposta

3

jsfiddle di lavoro - http://jsfiddle.net/6cgo4opg/45/

Risolto il seguito

$a_pie = $a_base.].replace (/[^\d.]/g, '');; 

dovrebbe essere

$a_pie = $a_base.replace(/[^\d.]/g, ''); 

e

$this.children('.stocks-pie'), (function(index, element){ 

dovrebbe essere

$this.children('.stocks-pie').each(function (index, element) { 

e

<div class=".stocks-data"> 

dovrebbe essere

<div class="stocks-data"> 
+0

È fantastico! Grazie mille. – thefoxrocks