Grafico a torta annidato/multilivello/drill-down in Javascript?

Question

Sto provando a creare un grafico a torta con javascript che consentirà agli utenti di fare clic su una sezione e "visualizzare ciò che costituisce quella sezione". Se hai mai usato mint.com, saprai cosa intendo, diciamo che stai visualizzando un grafico a torta delle spese e fai clic sulla sezione "Automobile", quindi la sezione si espande in una nuova tabella di Gas, Manutenzione, ecc.

Per fare un ulteriore passo avanti, ho a che fare con una grande quantità di dati, quindi essere in grado di recuperare (ajax) i nuovi dati quando si fa clic sulla fetta è anche un'opzione utile (sebbene io può probabilmente andare via senza di essa).

Forse "nidificato", "multi-livello" e "drill-down" non sono i termini giusti perché ho cercato tutto il giorno e non riesco a trovare una soluzione.

Qualcuno sa di una biblioteca per questo? Grazie in anticipo!

Answer 1

Ho implementato sistemi di drilldown simili utilizzando l'evento click point HighCharts. Ecco la sintassi di massima:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'pie' 
    }, 
    series: [{ 
     data: myInitialDataArray, // make sure each data point has an id 
     point: { 
      events: { 
       click: function() { 
        $.post('/get/data/by/id/' + this.id, function(data) { 
         // you may need to format your data here 
         chart.series[0].setData(data); 
        }); 
       } 
      } 
     } 
    }] 
}); 

In questo esempio, si definisce un evento click che utilizza il valore id del punto (this.id) per eseguire un posto Ajax a un URL. Quindi utilizzi i dati del tuo post per reindirizzare le serie di grafici.

Si prega di notare che ogni volta che si utilizza la funzione setData per aggiornare il grafico, ogni punto dati deve avere un valore id affinché il drilldown possa continuare.

Spero che questo aiuti!

Answer 2

Prova biblioteca grafico a torta psd3
Demo - https://pshivale.github.io/psd3
Fonte - https://github.com/pshivale/psd3
Supporta grafici a torta a più livelli, grafici ad anello e grafici Sunburst. Supporta anche il drill-down di una fetta di torta facendo doppio clic su di esso.