DC.js - gráfico de pizza

Um gráfico de pizza é um gráfico estatístico circular. Ele é dividido em fatias para mostrar uma proporção numérica. Este capítulo explica como desenhar um gráfico de pizza usando DC.js em detalhes.

Métodos de gráfico de pizza

Antes de prosseguirmos para desenhar um gráfico de pizza, devemos entender o dc.pieChartclasse e seus métodos. O dc.pieChart usa mixins para obter a funcionalidade básica de desenhar um gráfico. Os mixins usados ​​por dc.pieChart são os seguintes -

  • baseMixin
  • capMixin
  • colorMixin

O diagrama de classe completo de um dc.pieChart é o seguinte -

O dc.pieChart obtém todos os métodos dos mixins especificados acima, bem como possui seus próprios métodos para desenhar especificamente o gráfico de pizza. Eles são os seguintes -

  • cx ([cx])
  • drawPaths ([path])
  • emptyTitle ([título])
  • externalLabels ([rótulo])
  • innerRadius ([innerRadius])
  • minAngleForLabel ([minAngleForLabel])
  • raio ([raio])
  • sliceCap ([cap])

Vamos discutir cada um deles em detalhes.

cx ([cx])

É usado para obter ou definir a posição da coordenada x central, que é definida a seguir -

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

Da mesma forma, você pode executar a posição da coordenada y.

drawPaths ([path])

Este método é usado para desenhar caminhos para um gráfico de pizza e é definido abaixo -

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

emptyTitle ([título])

Este método é usado para definir o título quando não houver dados. É definido abaixo -

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

externalLabels ([rótulo])

É usado para posicionar rótulos de fatia deslocados da borda externa do gráfico. É definido abaixo -

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

innerRadius ([innerRadius])

Este método é usado para obter ou definir o raio interno do gráfico de pizza. Se o raio interno for maior que0px, o gráfico de pizza será renderizado como um gráfico de rosca. É definido abaixo -

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

minAngleForLabel ([minAngleForLabel])

Este método é usado para obter ou definir o ângulo mínimo de corte para renderização de rótulo. É definido abaixo -

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

raio ([raio])

Este método é usado para obter ou definir o raio externo. Se o raio não for especificado, ele ocupará a metade da largura e altura mínimas do gráfico. É definido abaixo -

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

sliceCap ([cap])

Obtém ou define o número máximo de fatias que o gráfico de pizza gerará. As fatias superiores são determinadas por um valor de alto a baixo. As outras fatias que excederem o limite serão enroladas em uma única fatia 'Outros'.

Desenhe um gráfico de pizza

Vamos criar um gráfico de pizza em DC. Neste exemplo de gráfico de pizza, vamos pegar um conjunto de dados chamadopeople.csvArquivo. O arquivo de dados de amostra é o seguinte -

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

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

O exemplo acima contém muitos registros. Você pode baixar o arquivo clicando no link a seguir e salvá-lo no local do DC.

people.csv

Agora, vamos seguir as etapas a seguir para desenhar um gráfico de pizza em DC.

Etapa 1: Incluir um Script

Vamos adicionar D3, DC e Crossfilter usando o seguinte código -

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

Etapa 2: Definir uma variável

Crie um objeto do tipo, dc.pieChart como mostrado abaixo -

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

Aqui, a id da pizza é mapeada com uma pizza.

Etapa 3: leia os dados

Leia seus dados (digamos, de people.csv) usando o d3.csv()função. É definido da seguinte forma -

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

Aqui, se o arquivo de dados não estiver disponível no local especificado, a função d3.csv () retornará um erro.

Etapa 4: definir o filtro cruzado

Defina uma variável para Crossfilter e atribua os dados ao Crossfilter. É definido abaixo -

var mycrossfilter = crossfilter(people);

Etapa 5: criar uma dimensão

Crie uma dimensão para gênero usando a função abaixo -

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

Aqui, o gênero das pessoas é usado para dimensionar.

Etapa 6: reduceCount ()

Crie um grupo Crossfilter aplicando a função group () e a função reduceCount () na dimensão de gênero criada acima - groupDimension.

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

Etapa 7: gerar torta

Gere a pizza usando a função abaixo -

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();

Aqui,

  • A largura do gráfico de pizza é definida como 800.

  • A altura do gráfico de pizza é definida como 300.

  • A dimensão do gráfico de pizza é definida para genderDimension usando o método dimension ().

  • Grupo do gráfico de pizza é definido como genderGroup usando o método group ().

  • Adicionado um evento de clique para registrar os dados usando o evento integrado DC.js, renderlet(). O renderlet é chamado, sempre que o gráfico é renderizado ou desenhado.

Etapa 8: Exemplo de trabalho

Crie um novo arquivo html, pie.html e inclua todas as etapas acima, conforme mostrado abaixo -

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

Agora, solicite o navegador e veremos a seguinte resposta.