DC.js - Grafico a barre

Il grafico a barre è uno dei tipi di grafico più comunemente utilizzati e viene utilizzato per visualizzare e confrontare il numero, la frequenza o altre misure (ad esempio la media) per diverse categorie o gruppi discreti. Il grafico è costruito in modo che le altezze o le lunghezze delle diverse barre siano proporzionali alla dimensione della categoria che rappresentano.

L'asse x (l'asse orizzontale) rappresenta le diverse categorie che non ha scala. L'asse y (l'asse verticale) ha una scala e questo indica le unità di misura. Le barre possono essere disegnate verticalmente o orizzontalmente a seconda del numero di categorie e della lunghezza o complessità della categoria.

Metodi del grafico a barre

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

dc.stackMixin
dc.coordinateGridMixin

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

Il dc.barChart ottiene tutti i metodi dei mixin sopra specificati. Inoltre, ha anche i propri metodi per disegnare il grafico a barre. Sono spiegati come segue:

alwaysUseRounding ([round])

Questo metodo viene utilizzato per ottenere o impostare se l'arrotondamento è abilitato quando le barre sono centrate.

barPadding ([pad])

Questo metodo viene utilizzato per ottenere o impostare la spaziatura tra le barre come frazione della dimensione della barra. I possibili valori di riempimento sono compresi tra 0 e 1.

centerBar ([centerBar])

Questo metodo viene utilizzato per impostare la barra, centrata attorno alla posizione dei dati sull'asse x.

gap ([gap])

Questo metodo viene utilizzato per impostare uno spazio fisso tra le barre.

outerPadding ([pad])

Questo metodo viene utilizzato per impostare il riempimento esterno su un grafico a barre ordinale.

Disegna un grafico a barre

Disegniamo un grafico a barre in DC. Per fare ciò, dobbiamo seguire i passaggi indicati di seguito:

Passaggio 1: definire una variabile

Definiamo una variabile del grafico come mostrato di seguito:

var chart = dc.barChart('#bar');

Qui, la funzione dc.barChart è mappata con un contenitore avente bar come l'id.

Passaggio 2: leggere i dati

Leggi i dati dal file people.csv.

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

Se i dati non sono presenti, restituisce un errore. Ora, assegna i dati a Crossfilter. Per questo esempio, utilizzeremo lo stesso file people.csv, che ha il seguente aspetto:

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
..................
..................
..................

Passaggio 3: crea una dimensione età

Ora, crea una dimensione per l'età come mostrato di seguito:

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Qui, abbiamo assegnato l'età dai dati Crossfilter. ~~ è un doppio operatore NOT bit per bit. È usato come sostituto più veloce perMath.floor() funzione.

Ora, raggruppalo usando il file reduceCount() funzione mostrata di seguito -

var ageGroup = ageDimension.group().reduceCount();

Passaggio 4: genera un grafico

Ora, genera un grafico a barre utilizzando la codifica fornita di seguito:

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

Qui,

La larghezza del grafico è 800 e l'altezza è 300.
La funzione d3.scale.linear viene utilizzata per costruire una nuova scala lineare con l'intervallo di dominio specificato [15, 70].
Successivamente, impostiamo il valore brushOn su false.
Assegniamo l'etichetta dell'asse y come conteggio e l'etichetta dell'asse x come età.
Infine, raggruppa l'età utilizzando la funzione ageGroup.

Passaggio 5: esempio di lavoro

L'elenco completo del codice è il seguente. Crea una pagina webbar.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <title>DC Bar 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 = "bar"></div>
      </div>

      <script language = "javascript">
         var chart = dc.barChart('#bar');

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

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

↰ Previous page Next page ↱