Accentsconagua

Cómo dibujar gráficos de barras con JavaScript y HTML5 Canvas

Código
Share
Lo que vas a crear

En un tutorial anterior, explicamos cómo dibujar un gráfico circular o un gráfico de anillos usando un lienzo HTML5. En este tutorial, le mostraré cómo usar JavaScript y el lienzo HTML5 como un medio para mostrar gráficamente los datos mediante gráficos de barras..

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 infográficos de CodeCanyon

Pero si desea saber qué se necesita para crear una biblioteca como esta, este tutorial es para usted..

¿Qué es un gráfico de barras??

Los gráficos de barras son herramientas muy comunes que se utilizan para representar datos numéricos. Desde los informes financieros hasta las presentaciones de PowerPoint y las infografías, los gráficos de barras se utilizan con mucha frecuencia, ya que ofrecen una vista de datos numéricos que es muy fácil de entender..

Los gráficos de barras representan datos numéricos utilizando barras, que son rectángulos con sus anchos o alturas proporcionales a los datos numéricos que representan.

Hay muchos tipos de gráficos de barras:

  • Gráficos de barras horizontales y gráficos de barras verticales según la orientación del gráfico
  • Gráficos de barras apiladas o gráficos de barras clásicos para representar múltiples series de datos
  • Gráficos de barras 2D o 3D
  • etc.

¿Cuáles son los componentes de un gráfico de barras??

Echemos un vistazo a los componentes que forman un gráfico de barras independientemente de su tipo:

  • Los datos del gráfico: son conjuntos de números y categorías asociadas que están representados por el gráfico..
  • Nombre de la serie de datos (1).
  • La cuadrícula del gráfico (2): proporciona un sistema de referencia para que la representación visual se pueda entender fácilmente.
  • Las barras (3): rectángulos rellenos de color con dimensiones proporcionales a los datos representados.
  • Leyenda del gráfico (4): muestra la correspondencia entre los colores utilizados y los datos que representan.

Ahora que conocemos los componentes de un gráfico de barras, veamos cómo podemos escribir el código JavaScript para dibujar un gráfico como este.

Dibujando el gráfico de barras usando JavaScript

Configuración del proyecto JS

Para comenzar a dibujar usando JavaScript y el lienzo HTML5, necesitaremos configurar nuestro proyecto de esta manera:

  • Crea una carpeta para guardar los archivos del proyecto; Llamemos a esta carpeta gráfico de barras-tutorial.
  • Dentro de la carpeta del proyecto, crea un archivo y llámalo. index.html. Esto contendrá nuestro código HTML.
  • También dentro de la carpeta del proyecto, crea un archivo y llámalo script.js. Esto contendrá el código JavaScript para dibujar el gráfico de barras.

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 

los leyenda La etiqueta se usará como un marcador de posición para la leyenda del gráfico. los para el atributo vincula la leyenda al lienzo que contiene el gráfico. Ahora necesitamos agregar el código que crea la leyenda. Haremos esto en el index.js Archivo después del código que dibuja el nombre de la serie de datos. El código identifica la leyenda etiqueta correspondiente al gráfico, y agregará la lista de categorías del modelo de datos del gráfico junto con el color correspondiente. La resultante index.js archivo se verá así:

var myCanvas = document.getElementById ("myCanvas"); myCanvas.width = 300; myCanvas.height = 300; var ctx = myCanvas.getContext ("2d"); función drawLine (ctx, startX, startY, endX, endY, color) ctx.save (); ctx.strokeStyle = color; ctx.beginPath (); ctx.moveTo (startX, startY); ctx.lineTo (endX, endY); ctx.stroke (); ctx.restore ();  función drawBar (ctx, upperLeftCornerX, upperLeftCornerY, width, height, color) ctx.save (); ctx.fillStyle = color; ctx.fillRect (upperLeftCornerX, upperLeftCornerY, width, height); ctx.restore ();  var myVinyls = "Música clásica": 10, "Rock alternativo": 14, "Pop": 2, "Jazz": 12; var Barchart = function (options) this.options = options; this.canvas = options.canvas; this.ctx = this.canvas.getContext ("2d"); this.colors = options.colors; this.draw = function () var maxValue = 0; para (var categ en this.options.data) maxValue = Math.max (maxValue, this.options.data [categ]);  var canvasActualHeight = this.canvas.height - this.options.padding * 2; var canvasActualWidth = this.canvas.width - this.options.padding * 2; // dibujando las líneas de la cuadrícula var gridValue = 0; while (gridValue <= maxValue) var gridY = canvasActualHeight * (1 - gridValue/maxValue) + this.options.padding; drawLine( this.ctx, 0, gridY, this.canvas.width, gridY, this.options.gridColor ); //writing grid markers this.ctx.save(); this.ctx.fillStyle = this.options.gridColor; this.ctx.textBaseline="bottom"; this.ctx.font = "bold 10px Arial"; this.ctx.fillText(gridValue, 10,gridY - 2); this.ctx.restore(); gridValue+=this.options.gridScale;  //drawing the bars var barIndex = 0; var numberOfBars = Object.keys(this.options.data).length; var barSize = (canvasActualWidth)/numberOfBars; for (categ in this.options.data) var val = this.options.data[categ]; var barHeight = Math.round( canvasActualHeight * val/maxValue) ; drawBar( this.ctx, this.options.padding + barIndex * barSize, this.canvas.height - barHeight - this.options.padding, barSize, barHeight, this.colors[barIndex%this.colors.length] ); barIndex++;  //drawing series name this.ctx.save(); this.ctx.textBaseline="bottom"; this.ctx.textAlign="center"; this.ctx.fillStyle = "#000000"; this.ctx.font = "bold 14px Arial"; this.ctx.fillText(this.options.seriesName, this.canvas.width/2,this.canvas.height); this.ctx.restore(); //draw legend barIndex = 0; var legend = document.querySelector("legend[for='myCanvas']"); var ul = document.createElement("ul"); legend.append(ul); for (categ in this.options.data) var li = document.createElement("li"); li.style.listStyle = "none"; li.style.borderLeft = "20px solid "+this.colors[barIndex%this.colors.length]; li.style.padding = "5px"; li.textContent = categ; ul.append(li); barIndex++;    var myBarchart = new Barchart(  canvas:myCanvas, seriesName:"Vinyl records", padding:20, gridScale:5, gridColor:"#eeeeee", data:myVinyls, colors:["#a55ca5","#67b6c7", "#bccd7a","#eb9743"]  );

Lo que producirá un resultado final con este aspecto:

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 de barras..

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

Biblioteca de gráficos infográficos de CodeCanyon
Código
×