Cómo dibujar gráficos usando JavaScript y HTML5 Canvas

Lo que vas a crear

En este tutorial, le mostraré cómo usar JavaScript y el lienzo como un medio para mostrar información numérica en forma de gráficos circulares y gráficos de anillos..

Hay formas más fáciles de crear gráficos que codificando uno desde cero, por ejemplo, esta completa biblioteca de gráficos de CodeCanyon.

Biblioteca de gráficos de CodeCanyon

Pero si quieres saber qué sucede detrás de las escenas en una biblioteca como esta, sigue leyendo.

Qué es un gráfico circular?

Un gráfico es una herramienta estadística utilizada para representar gráficamente datos numéricos. Un gráfico circular muestra esos datos numéricos como un círculo dividido en segmentos. El tamaño de cada sector es proporcional al valor numérico que representa.

¿Qué es un gráfico de anillos?

En pocas palabras, un gráfico de anillos es una variación del gráfico circular. La diferencia es que las rebanadas se cortan hacia el centro del pastel, de modo que solo se ve el borde. De esta manera, el gráfico se ve como una dona y por lo tanto el nombre.

Empieza a dibujar con el lienzo

Antes de dibujar el gráfico circular, veremos cómo dibujar sus partes. Veremos cómo podemos usar el componente de lienzo y JavaScript para dibujar:

• una linea
• un arco (una parte de un círculo)
• una forma llena de color

Para comenzar a dibujar usando el lienzo HTML5, necesitaremos crear algunas cosas:

• Una carpeta para guardar los archivos del proyecto; Llamemos a esta carpeta piechart-tutorial.
• Un archivo HTML index.html dentro de piechart-tutorial carpeta. Este archivo contendrá el código HTML.
• Un archivo JS script.js dentro de piechart-tutorial carpeta. Este archivo contendrá nuestro código JavaScript.

Mantendremos las cosas muy simples y agregaremos el siguiente código dentro index.html:

Tenemos el elemento con el ID myCanvas para que podamos referenciarlo en nuestro código JS. Luego cargamos el código JS a través de

Entonces en script.js Añadimos el código que crea el contenido del elemento de leyenda. Añadimos este código al final del dibujar() función de la Gráfico circular clase:

... if (this.options.legend) color_index = 0; var legendHTML = ""; para (categorizar en this.options.data) legendHTML + = "
  "+ categ +"
"; this.options.legend.innerHTML = legendHTML;… 

El código busca un leyenda elemento pasado a través de la opciones parámetro. Si se proporciona uno, este elemento se completa con el código HTML que contiene un cuadro de color y el nombre de la categoría de modelo de datos.

También necesitamos hacer un cambio en la forma en que llamamos el dibujo de nuestro gráfico circular de esta manera:

var myLegend = document.getElementById ("myLegend"); var myDougnutChart = new Piechart (canvas: myCanvas, data: myVinyls, colors: ["# fde23e", "# f16e23", "# 57d9ff", "# 937e88"], leyenda: myLegend); myDougnutChart.draw ();

Y aquí está el gráfico resultante y la leyenda del gráfico:

Felicidades

Hemos visto que dibujar gráficos utilizando el lienzo HTML5 no es realmente tan difícil. Solo requiere un poco de matemática y un poco de conocimiento de JavaScript. Ahora tiene todo lo que necesita para dibujar sus propios gráficos circulares y gráficos de anillos..

Si desea una solución rápida y fácil para crear no solo gráficos circulares y gráficos de anillos sino también muchos otros tipos de gráficos, puede descargar la Biblioteca de etiquetas HTML de gráficos infográficos o sus contrapartes del complemento de WordPress Gráficos y tablas de WordPress.

Código