DC.js - Grafico a torta

Un grafico a torta è un grafico statistico circolare. È diviso in sezioni per mostrare una proporzione numerica. Questo capitolo spiega in dettaglio come disegnare un grafico a torta utilizzando DC.js.

Metodi del grafico a torta

Prima di passare a disegnare un grafico a torta, dovremmo capire il dc.pieChartclasse e i suoi metodi. Il dc.pieChart utilizza i mixin per ottenere le funzionalità di base del disegno di un grafico. I mixin utilizzati da dc.pieChart sono i seguenti:

  • baseMixin
  • capMixin
  • colorMixin

Il diagramma delle classi completo di un dc.pieChart è il seguente:

Il dc.pieChart ottiene tutti i metodi dei mixin sopra specificati e ha i propri metodi per disegnare in modo specifico il grafico a torta. Sono i seguenti:

  • cx ([cx])
  • drawPaths ([percorso])
  • emptyTitle ([title])
  • externalLabels ([label])
  • innerRadius ([innerRadius])
  • minAngleForLabel ([minAngleForLabel])
  • raggio ([raggio])
  • sliceCap ([cap])

Cerchiamo di discutere ciascuno di questi in dettaglio.

cx ([cx])

Viene utilizzato per ottenere o impostare la posizione della coordinata x centrale, definita di seguito:

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

Allo stesso modo, puoi eseguire la posizione della coordinata y.

drawPaths ([percorso])

Questo metodo viene utilizzato per disegnare percorsi per un grafico a torta ed è definito di seguito:

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle ([title])

Questo metodo viene utilizzato per impostare il titolo quando non ci sono dati. È definito di seguito:

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels ([label])

Viene utilizzato per posizionare le etichette delle sezioni sfalsate rispetto al bordo esterno del grafico. È definito di seguito:

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

Questo metodo viene utilizzato per ottenere o impostare il raggio interno del grafico a torta. Se il raggio interno è maggiore di0px, quindi il grafico a torta verrà visualizzato come un grafico ad anello. È definito di seguito:

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

Questo metodo viene utilizzato per ottenere o impostare l'angolo minimo della sezione per il rendering dell'etichetta. È definito di seguito:

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

raggio ([raggio])

Questo metodo viene utilizzato per ottenere o impostare il raggio esterno. Se il raggio non è specificato, sarà necessaria la metà della larghezza e dell'altezza minima del grafico. È definito di seguito:

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

sliceCap ([cap])

Ottiene o imposta il numero massimo di sezioni che il grafico a torta genererà. Le fette superiori sono determinate da un valore da alto a basso. Le altre fette che superano il tappo verranno arrotolate in un'unica fetta "Altri".

Disegna un grafico a torta

Creiamo un grafico a torta in DC. In questo esempio di grafico a torta, prendiamo un set di dati denominatopeople.csvfile. Il file di dati di esempio è il seguente:

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

L'esempio precedente contiene molti record. È possibile scaricare il file facendo clic sul collegamento seguente e salvarlo nella posizione DC.

people.csv

Ora, seguiamo i seguenti passaggi per disegnare un grafico a torta in DC.

Passaggio 1: includi uno script

Aggiungiamo D3, DC e Crossfilter utilizzando il seguente codice:

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

Passaggio 2: definire una variabile

Crea un oggetto di tipo, dc.pieChart come mostrato di seguito -

var pieChart = dc.pieChart('#pie');

Qui, l'id della torta è mappato con una torta.

Passaggio 3: leggere i dati

Leggi i tuoi dati (ad esempio, da people.csv) utilizzando il d3.csv()funzione. È definito come segue:

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

In questo caso, se il file di dati non è disponibile nella posizione specificata, la funzione d3.csv () restituisce un errore.

Passaggio 4: definire il Crossfilter

Definisci una variabile per Crossfilter e assegna i dati a Crossfilter. È definito di seguito:

var mycrossfilter = crossfilter(people);

Passaggio 5: creare una dimensione

Crea una dimensione per il sesso utilizzando la funzione di seguito:

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

Qui, il genere delle persone è usato per dimensione.

Passaggio 6: reduceCount ()

Crea un gruppo Crossfilter applicando la funzione group () e reduceCount () sulla dimensione di genere creata sopra - groupDimension.

var genderGroup = genderDimension.group().reduceCount();

Passaggio 7: genera torta

Genera la torta utilizzando la funzione di seguito:

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

Qui,

  • La larghezza del grafico a torta è impostata su 800.

  • L'altezza del grafico a torta è impostata su 300.

  • La dimensione del grafico a torta è impostata su genderDimension utilizzando il metodo dimension ().

  • Il gruppo del grafico a torta è impostato su genderGroup utilizzando il metodo group ().

  • Aggiunto un evento clic per registrare i dati utilizzando l'evento integrato DC.js, renderlet(). Il renderlet viene richiamato ogni volta che il grafico viene visualizzato o disegnato.

Passaggio 8: esempio di lavoro

Crea un nuovo file html, pie.html e includi tutti i passaggi precedenti come mostrato di seguito -

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.