Comenzando Con Chart.js: Gráficas de Pastel, Dona y Burbuja

() translation by (you can also view the original English article)

Has aprendido sobre cuatro diferentes tipos de gráficas en Chart.js hasta este punto. El segundo tutorial de la serie cubrió gráficas de línea y barra. El tercer tutorial discutió gráficas de radar y área polar. En este tutorial, aprenderás cómo usar Chart.js para crear gráficas de pastel, dona y burbuja.

Creando Gráficas de Pastel y Dona

Las gráficas de pastel y dona son usadas cuando quieres mostrar la proporción en la que algo está dividido entre distintas entidades. Por ejemplo, puedes usar gráficas de pastel para mostrar el porcentaje de varones, hembras, y jóvenes leones en un parque de vida silvestre, o el porcentaje de votos que distintos candidatos obtuvieron en una elección.

Las gráficas de pastel solo son útiles cuando quieres comparar un parámetro específico o conjunto de datos. Una cosa importante para tener en mente es que no puedes usar gráficas de pastel para trazar entidades cuyos valores son cero porque el ángulo de los sectores en una gráfica de pastel depende de la magnitud de los puntos de datos.

Esto significa que cualquier entidad cuya participación sea cero no será mostrada en la gráfica en absoluto. De manera similar, no puede trazar valores negativos en una gráfica de pastel. Puedes crear gráficas de pastel en Chart.js estableciendo la llave type a pie. De manera similar, puedes crear gráficas de donas estableciendo la llave type a doughnut. Aquí está un ejemplo de crear estas dos gráficas:

var pieChart = new Chart(votesCanvas, {
    type: 'pie',
    data: votesData,
    options: chartOptions
});

var doughnutChart = new Chart(votesCanvas, {
    type: 'doughnut',
    data: votesData,
    options: chartOptions
});

Creemos una gráfica de pastel que muestre la información de exportación de petróleo de los cinco mayores países en 2015. La información está en billones de dolares estadounidenses.

var data = {
    labels: [
        "Saudi Arabia",
        "Russia",
        "Iraq",
        "United Arab Emirates",
        "Canada"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ]
        }]
};

Puedes controlar la apariencia de la gráfica de arriba usando diferentes llaves como cutoutPercentage, la cuál define el porcentaje de la gráfica que es cortada en la mitad. También puedes especificar el ángulo inicial de la gráfica usando la llave rotation. De manera similar, también puedes especificar el ángulo que barre la gráfica mientras traza la información usando la llave circumference.

Hay dos animaciones diferentes que pueden ser activadas mientas se dibuja una gráfica. Puedes especificar si la gráfica debería tener una animación de rotación usando la llave animateRotate. De manera similar, también puedes especificar si la gráfica de dona debería ser escalada desde el centro usando la llave animateScale. El valor de animateRotate es establecido a true por defecto, y el valor para animateScale es establecido a false por defecto.

Como es usual, puedes controlar el color de fondo, color de borde, y grosor de borde de todos los puntos de datos usando las llaves backgroundColor, borderColor, y borderWidth respectivamente. De manera similar, los valores hover de todas esta propiedades pueden ser controlados usando las llaves hoverBackgroundColor, hoverBorderColor, y hoverBorderWidth.

Aquí está el código para crear una gráfica de dona para los datos de arriba. Establecer el valor para rotation igual a -Math.PI lleva ese punto inicial 180 grados en sentido contrario a las manecillas del reloj. Después, establecer el valor de circumference a Math.PI hace la gráfica abarcar solo un semicírculo.

var oilData = {
    labels: [
        "Saudi Arabia",
        "Russia",
        "Iraq",
        "United Arab Emirates",
        "Canada"
    ],
    datasets: [
        {
            data: [133.3, 86.2, 52.2, 51.2, 50.2],
            backgroundColor: [
                "#FF6384",
                "#63FF84",
                "#84FF63",
                "#8463FF",
                "#6384FF"
            ],
            borderColor: "black",
            borderWidth: 2
        }]
};

var chartOptions = {
  rotation: -Math.PI,
  cutoutPercentage: 30,
  circumference: Math.PI,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false,
    animateScale: true
  }
};

Creando Gráficas de Burbuja

Las gráficas de burbuja son usadas para trazar o mostrar tres dimensiones (p1, p2, p3) de información en una gráfica. La posición y tamaño de las burbujas determina el valor de estos tres puntos de datos. El eje horizontal representa el primer punto de datos (p1), el eje vertical representa el segundo punto de datos (p2), y el área de la burbuja es usada para representar el valor del tercer punto de datos (p3).

Una cosa que deberías tener en mente es que la magnitud del tercer punto de datos no es representada por el radio de las burbujas sino su área. Ahora, el área de un círculo es proporcional al cuadrado del radio. Esto significa que tienes que asegurar que el radio de la burbuja que traces es proporcional a la raíz cuadrada de la magnitud del tercer punto de datos.

Puedes crear gráficas de burbuja en Chart.js estableciendo el valor de la llave type a bubble. Aquí está un ejemplo de crear una gráfica de burbuja.

var bubbleChart = new Chart(popCanvas, {
    type: 'bubble',
    data: popData,
    options: chartOptions
});

Tracemos el peso de diferentes elementos mantenidos en un cuarto usando una gráfica de burbuja. La información para la gráfica necesita ser pasada en la forma de un objeto. El objeto de datos necesita tener la siguiente interfaz para que sea trazada apropiadamente.

{
    x: <Number>,
    y: <Number>,
    r: <Number>
}

Una diferencia importante entre gráficas de burbuja y todas las otras gráficas es que el radio de la burbuja no está escalada con la gráfica.

Por ejemplo, el ancho de las barras en una gráfica de barra puede aumentar o disminuir basado en el tamaño de la gráfica. La misma cosa no ocurre con las gráficas de burbuja. El radio de las burbujas siempre es igual al número exacto de pixeles que especificaste. Tiene sentido porque en este tipo de gráfica, el radio está siendo usado realmente para representar información real.

Creemos una gráfica de burbuja para trazar la población de venados en diferentes puntos en un bosque.

1	var popData = {
2	datasets: [{
3	label: ['Deer Population'],
4	data: [{
5	x: 100,
6	y: 0,
7	r: 10
8	}, {
9	x: 60,
10	y: 30,
11	r: 20
12	}, {
13	x: 40,
14	y: 60,
15	r: 25
16	}, {
17	x: 80,
18	y: 80,
19	r: 50
20	}, {
21	x: 20,
22	y: 30,
23	r: 25
24	}, {
25	x: 0,
26	y: 100,
27	r: 5
28	}],
29	backgroundColor: "#FF9966"
30	}]
31	};

Ya que el radio aquí es proporcional a la raíz cuadrada de la magnitud actual, el número de venados en (80, 80) es 100 veces más que el número de venados en (0,100).

Al igual que los otros tipos de gráficas, puedes controlar el color de fondo, color de borde, y grosor de borde de los puntos trazados usando las llaves backgroundColor, borderColor, y borderWidth. De manera similar, también puedes especificar el color de fondo al deslizar, color de borde al deslizar y grosor de borde al deslizar usando las llaves hoverBackgroundColor, hoverBorderColor, y hoverBorderWidth.

También puedes especificar el radio adicional que quieres agregar a diferentes burbujas al deslizar usando la llave hoverRadius. Recuerda que este radio es agregado al valor original para dibujar la burbuja en la que se desliza. Si la burbuja original tuviera un radio de 10 y hoverRadius es establecido a 5, el radio de la burbuja en deslizamiento será igual a 15.

1	var popData = {
2	datasets: [{
3	label: ['Deer Population'],
4	data: [{
5	x: 100,
6	y: 0,
7	r: 10
8	}, {
9	x: 60,
10	y: 30,
11	r: 20
12	}, {
13	x: 40,
14	y: 60,
15	r: 25
16	}, {
17	x: 80,
18	y: 80,
19	r: 50
20	}, {
21	x: 20,
22	y: 30,
23	r: 25
24	}, {
25	x: 0,
26	y: 100,
27	r: 5
28	}],
29	backgroundColor: "#9966FF",
30	hoverBackgroundColor: "#000000",
31	hoverBorderColor: "#9966FF",
32	hoverBorderWidth: 5,
33	hoverRadius: 5
34	}]
35	};

Los parámetros de arriba crearán la siguiente gráfica de burbuja.

Ideas Finales

En este tutorial aprendiste sobre tres tipos más de gráficas disponibles en Chart.js. Ahora deberías poder elegir el tipo apropiado de gráfica para trazar tu información y establecer valores específicos para diferentes llaves para controlar su apariencia. En el siguiente tutorial, aprenderás cómo manipular las escalas para diferentes tipos de gráficas.

Espero que te haya gustado este tutorial. Si tienes alguna pregunta, por favor déjame saber en los comentarios.