Crea gráficos interactivos utilizando Plotly.js, Parte 5: Gráficos circulares y de indicador

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

Si has estado siguiendo esta serie desde el principio, puedes haber notado que Plotly.js utiliza el mismo tipo de scatter para la creación de gráficos de líneas y gráficos de indicadores. La única diferencia es que tuvimos que establecer el mode a lines, al crear gráficos de líneas y markers al crear gráficos de indicadores.

Del mismo modo, Plotly.js te permite crear gráficos circulares, de anillos y de medidor utilizando el mismo valor para el atributo type y cambiando el valor de otros atributos según el gráfico que desees crear.

Creación de gráficos circulares en Plotly.js

Puedes crear gráficos circulares en Plotly.js estableciendo el atributo type en pie. También hay otros atributos como opacity, visible y name que también son comunes a otros tipos de gráficos. El atributo name se utiliza para proporcionar un nombre para la traza circular actual. Este nombre se muestra en la leyenda para su identificación. Puedes mostrar u ocultar el trazo circular en la leyenda de un gráfico estableciendo el atributo showlegend en true o false, respectivamente. Puedes establecer un nombre de etiqueta para los diferentes sectores de un gráfico circular utilizando el atributo labels.

En el caso de los gráficos circulares, el objeto marcador se utiliza para controlar la apariencia de diferentes sectores del gráfico. El atributo de color anidado dentro del marker se puede utilizar para establecer el color de cada sector del gráfico circular. El color para diferentes sectores se puede especificar como un valor de matriz para el atributo color.

También puedes establecer el color y el ancho de todas las líneas que encierran cada sector utilizando los atributos de color y ancho width anidados dentro del objeto línea. También tienes la opción de ordenar todos los sectores del gráfico circular de mayor a menor utilizando el atributo sort de ordenación booleana. Del mismo modo, la dirección de los sectores se puede cambiar a la derecha clockwise o la izquierda counterclockwise con la ayuda del atributo direction.

El siguiente código crea un gráfico circular básico que enumera el área boscosa de los cinco principales países del mundo.

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China']
};

var data = [traceA];

var layout = {
  title: "Area Under Forest for Different Countries"
};

Plotly.plot(pieDiv, data, layout);

Como puedes ver, ya no usamos los atributos x e y para especificar los puntos que queremos trazar. Esto ahora se hace con la ayuda de values y labels. Los porcentajes se determinan automáticamente en función de los valores de entrada.

Please accept marketing cookies to load this content.

De forma predeterminada, la primera porción del pastel comienza a las 12 en punto. Puedes cambiar el ángulo inicial del gráfico mediante el atributo rotation, que acepta un valor entre -360 y 360. El valor predeterminado de las 12 en punto es igual al ángulo 0.

Si desea que una porción de tu gráfico se destaque, puedes usar el atributo pull, que puede aceptar un número o una matriz de números con valores entre 0 y 1. El atributo pull se usa para extraer los sectores especificados del pastel. La distancia de extracción es igual a una fracción del radio más grande del pastel o dona.

Es muy fácil convertir un gráfico circular en un gráfico de dona especificando un valor para el atributo hole. Este cortará la fracción dada del radio del pastel para hacer un gráfico de dona.

Puedes controlar el color de los sectores individuales en un gráfico circular utilizando el atributo colors anidado dentro del objeto marcador. El ancho y el color de la línea que encierra cada sector también se pueden cambiar con la ayuda de los atributos width y color anidados dentro del objeto línea. El ancho predeterminado de la línea delimitadora es 0. Esto significa que no se dibujará ninguna línea alrededor de los sectores de forma predeterminada.

También hay un atributo de texto flotante hovertext, que se puede utilizar para proporcionar información textual adicional para cada sector individual. Esta información será visible para los espectadores cuando se desplacen sobre un sector. Una condición para que aparezca el texto es que el atributo hoverinfo debe contener una bandera de texto. Puedes establecer el color del texto que se encuentra dentro o fuera de los sectores circulares utilizando los atributos family, size y color anidados dentro de los objetos insidetextfont y outsidetextfont respectivamente.

El siguiente código usa los datos de nuestro gráfico circular anterior para crear un gráfico de dona que usa los atributos adicionales que acabamos de conocer.

var pieDiv = document.getElementById("pie-chart");

var traceA = {
  type: "pie",
  values: [8149300, 4916438, 4776980, 3100950, 2083210],
  labels: ['Russia', 'Canada', 'Brazil', 'United States', 'China'],
  hole: 0.25,
  pull: [0.1, 0, 0, 0, 0],
  direction: 'clockwise',
  marker: {
    colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'],
    line: {
      color: 'black',
      width: 3
    }
  },
  textfont: {
    family: 'Lato',
    color: 'white',
    size: 18
  },
  hoverlabel: {
    bgcolor: 'black',
    bordercolor: 'black',
    font: {
      family: 'Lato',
      color: 'white',
      size: 18
    }
  }
};

var data = [traceA];

var layout = {
  title: "Area Under Forest for Different Countries"
};

Plotly.plot(pieDiv, data, layout);

Please accept marketing cookies to load this content.

Crear gráficos de indicadores en Plotly.js

La estructura básica de un gráfico de indicadores es similar a un gráfico de dona. Esto significa que podemos usar algunos valores seleccionados inteligentemente y crear gráficos de indicadores simples manteniendo el atributo type establecido en pie. Básicamente, ocultaremos algunas secciones del pastel completo para que parezca un gráfico de indicadores.

Primero, debemos elegir algunos valores para el atributo values. Para simplificar las cosas, usaré la mitad superior del pastel como mi gráfico de indicadores. Esto significa que los valores deben dividirse equitativamente entre la parte que quiero que sea visible y la parte del gráfico circular que quiero ocultar. La sección visible del gráfico se puede dividir en partes más pequeñas. A continuación, se muestra un ejemplo de cómo elegir los valores para nuestro gráfico de indicadores.

1	values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100]

El número 100 en la línea anterior es arbitrario. Como puedes ver, los primeros cinco sectores juntos suman 100, que también es el valor establecido para el área oculta del gráfico circular. Esto divide todo el pastel por igual entre la parte oculta y la visible.

Aquí está el código completo que crea nuestra tabla básica de indicadores. Debes tener en cuenta que configuré el atributo de color del sector que debería estar oculto en blanco. De manera similar, los valores text y labels para el sector correspondiente también se han establecido en cadenas vacías. El atributo rotation se ha establecido en 90 para que el gráfico no se dibuje desde su posición predeterminada de las 12 en punto.

1	var gaugeDiv = document.getElementById("gauge-chart");
2
3	var traceA = {
4	type: "pie",
5	showlegend: false,
6	hole: 0.4,
7	rotation: 90,
8	values: [100 / 5, 100 / 5, 100 / 5, 100 / 5, 100 / 5, 100],
9	text: ["Very Low", "Low", "Average", "Good", "Excellent", ""],
10	direction: "clockwise",
11	textinfo: "text",
12	textposition: "inside",
13	marker: {
14	colors: ["rgba(255, 0, 0, 0.6)", "rgba(255, 165, 0, 0.6)", "rgba(255, 255, 0, 0.6)", "rgba(144, 238, 144, 0.6)", "rgba(154, 205, 50, 0.6)", "white"]
15	},
16	labels: ["0-10", "10-50", "50-200", "200-500", "500-2000", ""],
17	hoverinfo: "label"
18	};

La siguiente parte del código trata sobre la aguja de la tabla de medición. El valor que establezca para la variable degrees determinará el ángulo en el que se dibuja la aguja. La variable radius determina la longitud de la aguja. Los atributos x0 e y0 se utilizan para establecer el punto de partida de nuestra línea. De manera similar, los atributos x1 e y1 se utilizan para establecer el punto final de nuestra línea.

Puedes crear formas más complejas para tu aguja con la ayuda de trazados SVG. Todo lo que tienes que hacer es establecer el atributo type en path y especificar la ruta real utilizando el atributo path. Puedes leer más sobre esto en la sección de formas de diseño de la referencia.

var degrees = 115, radius = .6;
var radians = degrees * Math.PI / 180;
var x = -1 * radius * Math.cos(radians);
var y = radius * Math.sin(radians);

var layout = {
  shapes:[{
      type: 'line',
      x0: 0,
      y0: 0,
      x1: x,
      y1: 0.5,
      line: {
        color: 'black',
        width: 8
      }
    }],
  title: 'Number of Printers Sold in a Week',
  xaxis: {visible: false, range: [-1, 1]},
  yaxis: {visible: false, range: [-1, 1]}
};

var data = [traceA];

Plotly.plot(gaugeDiv, data, layout, {staticPlot: true});

Todo el código de esta sección crea la siguiente tabla de mediciones. En este momento, el gráfico no es muy elegante, pero puede actuar como un buen punto de partida.

Please accept marketing cookies to load this content.

Pensamientos finales

En este tutorial, aprendiste a crear gráficos circulares y de medición utilizando el tipo de trazado pie en Plotly.js. También aprendiste a establecer cuidadosamente los valores de algunos atributos para convertir esos gráficos circulares en gráficos de medición simples. Puedes leer más sobre los gráficos circulares y sus diferentes atributos en la página de referencia.

Este fue el último tutorial de nuestra serie interactiva de gráficos Plotly.js. El primer tutorial introductorio te proporcionó una descripción general de la biblioteca. Los tutoriales segundo, tercero y cuarto te mostraron cómo crear gráficos de líneas, gráficos de barras y gráficos de burbujas, respectivamente. Espero que hayas disfrutado de este tutorial y de toda la serie. Si tienes alguna pregunta, no dudes en hacérmelo saber en los comentarios.