DC.js: gráfico circular

Un gráfico circular es un gráfico estadístico circular. Se divide en porciones para mostrar una proporción numérica. Este capítulo explica en detalle cómo dibujar un gráfico circular usando DC.js.

Métodos de gráfico circular

Antes de pasar a dibujar un gráfico circular, debemos comprender el dc.pieChartclase y sus métodos. El dc.pieChart usa mixins para obtener la funcionalidad básica de dibujar un gráfico. Los mixins utilizados por dc.pieChart son los siguientes:

baseMixin
capMixin
colorMixin

El diagrama de clases completo de un dc.pieChart es el siguiente:

El dc.pieChart obtiene todos los métodos de los mixins especificados anteriormente y tiene sus propios métodos para dibujar específicamente el gráfico circular. Son los siguientes:

cx ([cx])
drawPaths ([ruta])
emptyTitle ([título])
externalLabels ([etiqueta])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
radio ([radio])
rebanadasCap ([cap])

Analicemos cada uno de estos en detalle.

cx ([cx])

Se utiliza para obtener o establecer la posición de la coordenada x central, que se define a continuación:

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

Del mismo modo, puede realizar la posición de la coordenada y.

drawPaths ([ruta])

Este método se usa para dibujar rutas para un gráfico circular y se define a continuación:

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

emptyTitle ([título])

Este método se utiliza para establecer el título cuando no hay datos. Se define a continuación:

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

externalLabels ([etiqueta])

Se utiliza para colocar etiquetas de sector desplazadas desde el borde exterior del gráfico. Se define a continuación:

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

innerRadius ([innerRadius])

Este método se utiliza para obtener o establecer el radio interior del gráfico circular. Si el radio interior es mayor que0px, el gráfico circular se representará como un gráfico de anillos. Se define a continuación:

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

minAngleForLabel ([minAngleForLabel])

Este método se utiliza para obtener o establecer el ángulo de corte mínimo para la representación de etiquetas. Se define a continuación:

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

radio ([radio])

Este método se utiliza para obtener o establecer el radio exterior. Si no se especifica el radio, tomará la mitad del ancho y alto mínimo del gráfico. Se define a continuación:

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

rebanadasCap ([cap])

Obtiene o establece el número máximo de porciones que generará el gráfico circular. Los cortes superiores están determinados por un valor de mayor a menor. Otras secciones que excedan el límite se enrollarán en una sola sección "Otros".

Dibujar un gráfico circular

Creemos un gráfico circular en DC. En este ejemplo de gráfico circular, tomemos un conjunto de datos llamadopeople.csvarchivo. El archivo de datos de muestra es el siguiente:

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

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

La muestra anterior contiene muchos registros. Puede descargar el archivo haciendo clic en el siguiente enlace y guardarlo en la ubicación de DC.

people.csv

Ahora, sigamos los siguientes pasos para dibujar un gráfico circular en DC.

Paso 1: incluye un guión

Agreguemos D3, DC y Crossfilter usando el siguiente código:

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

Paso 2: definir una variable

Crea un objeto de tipo, dc.pieChart como se muestra a continuación -

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

Aquí, la identificación de la tarta se asigna con una tarta.

Paso 3: lea los datos

Lea sus datos (por ejemplo, de people.csv) utilizando el d3.csv()función. Se define de la siguiente manera:

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

Aquí, si el archivo de datos no está disponible en la ubicación especificada, la función d3.csv () devuelve un error.

Paso 4: Defina el filtro cruzado

Defina una variable para Crossfilter y asigne los datos a Crossfilter. Se define a continuación:

var mycrossfilter = crossfilter(people);

Paso 5: crea una dimensión

Cree una dimensión para el género usando la función a continuación:

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

Aquí, el género de las personas se utiliza para la dimensión.

Paso 6: reduceCount ()

Cree un grupo de filtro cruzado aplicando el grupo () y la función reduceCount () en la dimensión de género creada anteriormente: groupDimension.

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

Paso 7: generar pastel

Genere el pastel usando la función a continuación:

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

Aquí,

El ancho del gráfico circular se establece en 800.
La altura del gráfico circular se establece en 300.
La dimensión del gráfico circular se establece en genderDimension utilizando el método dimension ().
El grupo del gráfico circular se establece en genderGroup utilizando el método group ().
Se agregó un evento de clic para registrar los datos usando el evento incorporado DC.js, renderlet(). El renderlet se invoca cada vez que se renderiza o dibuja el gráfico.

Paso 8: Ejemplo de trabajo

Cree un nuevo archivo html, pie.html e incluya todos los pasos anteriores como se muestra a continuación:

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

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱