DC.js - Grafico composito

Il grafico composito è un tipo speciale di grafico fornito da DC.js. Fornisce un'opzione per eseguire il rendering di più grafici nella stessa griglia di coordinate. Il grafico composito consente opzioni avanzate di visualizzazione del grafico con una riga di codice minima.

Metodi grafici compositi

Prima di passare a disegnare un grafico composito, dobbiamo capire il dc.compositeChartclasse e i suoi metodi. Il dc.compositeChart utilizza i mixin per ottenere la funzionalità di base del disegno di un grafico. I mixin utilizzati da dc.compositeChart sono i seguenti:

dc.baseMixin
dc.marginMixin
dc.colorMixin
dc.coordinateGridMixin

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

Il dc.compositeChart ottiene tutti i metodi dei mixin sopra specificati. Ha il suo metodo per disegnare il grafico composito, che è spiegato di seguito:

compose ([subChartArray])

Imposta la raccolta di grafici da rendere nello stesso grafico a griglia di coordinate.

chart.compose([
   dc.lineChart(chart)
   dc.barChart(chart)
]);

bambini()

Ottiene tutti i grafici composti nella stessa griglia di coordinate.

childOptions ([childOptions])

Ottiene o imposta le opzioni del grafico per tutti i grafici figlio composti nella stessa griglia di coordinate.

shareTitle ([shareTitle])

Ottiene o imposta il titolo condiviso del grafico. Se impostato, verrà condiviso con tutti i grafici figli composti nella stessa griglia di coordinate.

shareColors ([shareColors])

Simile alla funzione shareTitle (), tranne per il fatto che condivide i colori invece del titolo.

rightY ([yScale])

Ottiene o imposta la scala y per l'asse destro del grafico composto.

rightYAxis ([rightYAxis])

Ottiene o imposta l'asse y destro del grafico composto.

rightYAxisLabel (rightYAxisLabel [??])

Ottiene o imposta l'etichetta dell'asse y destro.

alignYAxes ([alignYAxes])

Ottiene o imposta l'allineamento tra l'asse y sinistro e destro.

useRightAxisGridLines ([useRightAxisGridLines])

Ottiene o imposta se disegnare le linee della griglia dall'asse y destro del grafico composto. Il comportamento predefinito è disegnare dall'asse y sinistro.

Disegna un grafico composito

Tracciamo un grafico composito usando DC.js. 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.compositeChart('#compoiste');

Qui, la funzione dc.compositeChart è mappata con un contenitore con estensione composite come suo id.

Passaggio 2: leggere i dati

Leggi i dati dal file people.csv -

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

Se i dati non sono presenti, restituisce un errore. Useremo lo stesso file people.csv. 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

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

Passaggio 3: mappa i dati

Ora mappa i dati come mostrato di seguito:

var ndx = crossfilter();

ndx.add(people.map(function(data) {
   return {
      age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
      male: data.gender == 'Male' ? 1 : 0,
      female: data.gender == 'Male' ? 0 : 1
   };
}));

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

Ora, applica la dimensione età e raggruppa i dati di genere utilizzando la codifica fornita di seguito:

var dim  = ndx.dimension(dc.pluck('age')),

grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));

Passaggio 4: genera un grafico

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

composite
   .width(768)
   .height(480)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
   .renderHorizontalGridLines(true)
   .compose ([
      dc.lineChart(composite)
         .dimension(dim)
         .colors('red')
         .group(grp1, "Male")
         .dashStyle([2,2]),
      dc.lineChart(composite)
         .dimension(dim)
         .colors('blue')
         .group(grp2, "Female")
         .dashStyle([5,5])
   ])
   
.brushOn(false)
.render();

Qui,

La larghezza del grafico è 768 e l'altezza è 480.
La funzione d3.scale.linear viene utilizzata per costruire una nuova scala lineare con l'intervallo di dominio specificato [15, 70].
Assegniamo un'etichetta dell'asse x come età e un'etichetta dell'asse y come conteggio.
Quindi, renderizza le linee della griglia orizzontali come vere.
Comporre il valore dei colori del grafico a linee: rosso per il sesso maschile e blu per la donna.
Infine, impostiamo il valore brushOn su false e rendiamo il grafico.

Passaggio 5: esempio di lavoro

Il codice completo è il seguente. Crea una pagina webcomposite.html e aggiungi le seguenti modifiche.

<html>
   <head>
      <title>DC composite chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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 = "composite"></div>
      </div>

      <script type = "text/javascript">
         var composite = dc.compositeChart("#composite");

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

            ndx.add(people.map(function(data) {
               return {
                  age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
                  male: data.gender == 'Male' ? 1 : 0,
                  female: data.gender == 'Male' ? 0 : 1
               };
            }));

            var dim  = ndx.dimension(dc.pluck('age')),

            grp1 = dim.group().reduceSum(dc.pluck('male')),
            grp2 = dim.group().reduceSum(dc.pluck('female'));

            composite
               .width(768)
               .height(480)
               .x(d3.scale.linear().domain([15,70]))
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
               .renderHorizontalGridLines(true)
               .compose ([
                  dc.lineChart(composite)
                  .dimension(dim)
                  .colors('red')
                  .group(grp1, "Male")
                  .dashStyle([2,2]),
                  dc.lineChart(composite)
                     .dimension(dim)
                     .colors('blue')
                     .group(grp2, "Female")
                     .dashStyle([5,5])
               ])
               .brushOn(false)
               .render();
         });
      </script>
   </body>
</html>

Ora, richiedi il browser e vedremo la seguente risposta.

↰ Previous page Next page ↱