Guía para crear gráficos en JavaScript con Chart.js

Los datos nos ayudan a contar historias convincentes, la visualización de datos es la representación gráfica de información y datos utilizando elementos gráficos como tablas, gráficos...

Introducción

Los datos nos ayudan a contar historias convincentes, la visualización de datos es la representación gráfica de información y datos mediante elementos gráficos como tablas, gráficos, etc., existen algunas bibliotecas que pueden ayudarnos a producir resultados atractivos con relativamente poco trabajo y .js es uno de ellos.

En esta guía, veremos cómo construir gráficos en JavaScript utilizando Chart.js, así como las numerosas opciones de personalización y estilos que ofrece Chart.js para permitirnos crear hermosos gráficos.

Comenzando

Gráfico.js es un popular marco de visualización de datos de código abierto mantenido por la comunidad. Nos permite generar gráficos de barras, gráficos circulares, gráficos de líneas, gráficos de anillos, gráficos de dispersión, etc. Todo lo que tenemos que hacer es simplemente indicar en qué parte de la página desea que se muestre un gráfico, qué tipo de gráfico desea plot, y luego suministre Chart.js con datos, etiquetas y otras configuraciones. ¡La biblioteca hace todo el trabajo pesado después de eso!

Instalación

Para comenzar con Chart.js, primero debemos instalarlo, ya que es una biblioteca de terceros. Chart.js se puede instalar a través de npm, Lanzamientos de GitHub , o el CDN Gráfico.js, que es el método más rápido y sencillo.

Para esta guía, utilizaremos la CDN de Chart.js. Puede hacerlo obteniendo el enlace CDN más reciente y agregándolo a su proyecto.

{.icon aria-hidden=“true”}

Nota: Utilice la URL con Chart.min.js al final, ya que esta es la versión minimizada.

En el momento de escribir este artículo, la versión más reciente es la 3.7.1. Todo lo que tiene que hacer es agregar lo siguiente al elemento principal de su archivo HTML:

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

Una vez que esto se complete con éxito, podemos usar la biblioteca.

Creación de gráficos con Chart.JS

Para esta guía, crearemos varios tipos de gráficos, destacando los marcos de JavaScript más populares en función de la cantidad de GitHub Stars que tienen actualmente. Esta es la información que usaremos:


Marco de JavaScript Estrellas de GitHub Reaccionar 185.134 Vista 195.514 Angular 80.460 Esbelto 57,022 Humano.js 22,165 Backbone.js 27.862


Crear un lienzo para representar los gráficos

El primer paso sería proporcionar una ubicación en nuestro HTML para que se represente el gráfico. Chart.js se basa en la disponibilidad de la etiqueta HTML5 Canvas (utilizada para dibujar líneas, círculos, etc.) para generar y representar los gráficos. Más información sobre La API de Canvas se puede encontrar aquí.

Todo lo que tenemos que hacer es construir la etiqueta canvas dentro de la etiqueta body y proporcionar un ID al que necesitaremos llamar para obtener el elemento y hacer referencia a nuestro elemento gráfico especificado en JavaScript:

1
<canvas id="myChart" width="1000" height="600"></canvas>

{.icon aria-hidden=“true”}

Nota: Podemos llamar a la ‘ID’ como queramos, sin embargo, se recomienda elegir un nombre descriptivo que represente el tipo de gráficos que queremos generar. Si estamos agregando muchos gráficos a una página, es importante que nos aseguremos de que cada ‘ID’ sea distinto (podríamos, por ejemplo, dar a nuestros gráficos nombres más específicos, como ‘studentsChart’ o ‘productChart’, etc.).

Así es como debería verse nuestro archivo HTML ahora:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
        <title>Programming Lang. Chart</title>
    </head>
    <body>
        <canvas id="myChart" width="1000" height="600"></canvas>

        <script src="./App.js"></script>
    </body>
</html>

Preparar y organizar nuestros datos

Tenemos que guardar la información suministrada anteriormente (marcos y estrellas). El formato más conveniente para nosotros es guardarlo en un objeto, donde las claves representan marcos y los valores representan estrellas. En nuestro App.js, definamos nuestros datos:

1
2
3
4
5
6
7
8
const data = {
    'React': 185134,
    'Vue': 195514,
    'Angular': 80460,
    'Svelte': 57022,
    'Ember.js': 22165,
    'Backbone.js': 27862
};

Creación de un gráfico de barras

Comencemos con la lógica central; veremos cómo hacer un gráfico de barras y, más adelante, cómo hacer gráficos adicionales alterando fácilmente nuestros parámetros. Lo bueno de Chart.js es que una vez que creas un objeto Chart, para modificarlo, simplemente cambias el atributo type y dejas todo lo demás como estaba.

El primer paso es tomar el elemento canvas de HTML con el ID myChart y asignarlo a una variable de contexto, normalmente llamada ctx:

1
const ctx = document.getElementById('myChart').getContext('2d');

{.icon aria-hidden=“true”}

Nota: Podemos nombrar la variable como queramos; ctx es simplemente un patrón que la mayoría de los desarrolladores prefieren, y es lo que usaremos. .getContext('2d') es un método opcional que nos permite acceder a las capacidades de dibujo 2D de la etiqueta del lienzo.

Para crear un objeto Chart, llamamos al constructor new Chart(), que acepta dos argumentos:

  • ctx: el objeto de contexto, que hace referencia al elemento del lienzo en el que estamos trazando.
  • Objeto de configuración: nos permite establecer el tipo de gráfico, los datos y los parámetros del gráfico.
1
const myChart = new Chart(ctx, {});

Trabajaremos con el objeto de configuración para ayudarnos a crear nuestro gráfico de barras. Como dijimos anteriormente, el objeto de configuración nos permite especificar:

  • Tipo de gráfico: El tipo de gráfico que deseamos generar. En este escenario, estamos haciendo un gráfico de barras. Podríamos proporcionar type: 'pie' o type: 'line' si quisiéramos un gráfico circular o de líneas.
  • Datos de gráficos: etiquetas y valores que se utilizarán para crear los gráficos.
  • Opciones de gráficos: opciones de configuración para personalizar los gráficos, como ajustar la ubicación de la leyenda, habilitar/deshabilitar la capacidad de respuesta, el estilo de control, etc.

Configuremos un objeto de configuración de esqueleto:

1
2
3
4
5
{
  type: 'bar',
  data: {},
  options: {} // this is optional
}

Luego, este objeto se puede pasar a la creación de instancias del gráfico. Agreguemos los datos del gráfico junto con el tipo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: Object.keys(data),
        datasets: [
            {
                label: 'Number of GitHub Stars',
                data: Object.values(data),
            },
        ],
    },
});

Dado que estamos tratando con un objeto, podemos extraer sus claves y valores a través de los métodos Object.keys() y Object.values(). Alternativamente, también puede adquirir las etiquetas y los valores en matrices separadas.

Comprensión de la propiedad de datos {#comprensión de la propiedad de datos}

Las etiquetas y los conjuntos de datos son los dos atributos del objeto de propiedad de datos. Las etiquetas representan una matriz de componentes que se mostrarán en el eje X:

Bar Chart showing labels

Mientras que, los conjuntos de datos toman una matriz de objetos que tiene dos propiedades básicas:

  • etiqueta: una cadena que generalmente se muestra en la parte superior del gráfico o al pasar el cursor por las barras, como se ve a continuación:

Bar Chart showing label in datser

  • data: una matriz de valores, que se muestra en el eje Y y refleja los números de estrellas de GitHub en nuestro ejemplo:

Bar Chart showing data

{.icon aria-hidden=“true”}

Nota: Puede tener muchos conjuntos de datos, cada uno con su propio "subtítulo" (etiqueta) y datos únicos. Si traza varios conjuntos de datos, es útil tener diferentes colores para indicar la diferencia. Cubriremos este caso de uso en un momento.

En resumen, para trazar un gráfico de barras, preparamos el lienzo/contexto e inicializamos un Gráfico() con nuestros datos y etiquetas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const data = {
    'React': 185134,
    'Vue': 195514,
    'Angular': 80460,
    'Svelte': 57022,
    'Ember.js': 22165,
    'Backbone.js': 27862
};

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: Object.keys(data),
        datasets: [
            {
                label: 'Number of GitHub Stars',
                data: Object.values(data),
            },
        ],
    },
});

Cuando actualice su navegador, la página debe contener algo como:

Gráfico de barras sin estilo

Gráfico de barras horizontales

Para cambiar el gráfico de barras a uno horizontal, establezca la propiedad indexAxis yo y en el objeto opciones:

1
2
3
4
5
6
7
8
9
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    ...
  },
  options: {
    indexAxis: 'y',
  }
});

Horizontal Bar Chart

{.icon aria-hidden=“true”}

Nota: En versiones anteriores de Chart.js, reemplazaría type:bar con type:horizontalBar, sin embargo, esto ha quedado obsoleto desde entonces.

Dar estilo al gráfico de barras

En este punto, ¡hemos creado con éxito un gráfico de barras! Sin embargo, la visualización de datos se trata de contar historias, no solo de datos. Por lo general, queremos que el gráfico sea más atractivo visualmente. Además, no diseñar el gráfico no solo puede hacerlo aburrido, sino también ilegible. Por ejemplo, si un gráfico circular tiene todos los segmentos del mismo color, no podrá diferenciar entre las diferentes clases, a menos que agregue bordes a cada segmento.

Podemos modificar algunas de estas opciones a través de: backgroundColor, borderColor y borderWidth.

backgroundColor: toma una matriz de valores de color hexadecimales o RGBA (cadenas) que se usarán para colorear las barras del gráfico. Esto también se puede hacer con un solo color porque se aplicará a todas las barras:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
backgroundColor: 'red' // Setting all bars to red

// Or

backgroundColor: [
  'rgba(255, 99, 132, 0.2)',  // Bar 1
  'rgba(54, 162, 235, 0.2)',  // Bar 2
  'rgba(255, 206, 86, 0.2)',  // Bar 3
  'rgba(75, 192, 192, 0.2)',  // Bar 4
  'rgba(153, 102, 255, 0.2)', // Bar 5
  'rgba(255, 159, 64, 0.2)'   // Bar 6
],

borderWidth: toma un valor entero o flotante y especifica el ancho que debe tener un borde:

1
borderWidth: 2

borderColor: al igual que la propiedad backgroundColor, acepta una matriz de cadenas de valores de color. Coloreará los bordes de la barra:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
borderColor: 'green' // Setting all borders to green

// Or

borderColor: [
  'rgba(255, 99, 132, 1)',    // Bar 1
  'rgba(54, 162, 235, 1)',    // Bar 2
  'rgba(255, 206, 86, 1)',    // Bar 3
  'rgba(75, 192, 192, 1)',    // Bar 4
  'rgba(153, 102, 255, 1)',   // Bar 5
  'rgba(255, 159, 64, 1)'     // Bar 6
],

{.icon aria-hidden=“true”}

Nota: Todas estas propiedades y sus valores son parte del objeto data, justo después de datasets.

Al combinarlos, puede crear un gráfico de barras bien estilizado como:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: Object.keys(data),
        datasets: [{
            label: 'Number of GitHub Stars',
            data: Object.values(data),
        }, ],
    },
    options: {
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',  // Bar 1
            'rgba(54, 162, 235, 0.2)',  // Bar 2
            'rgba(255, 206, 86, 0.2)',  // Bar 3
            'rgba(75, 192, 192, 0.2)',  // Bar 4
            'rgba(153, 102, 255, 0.2)', // Bar 5
            'rgba(255, 159, 64, 0.2)'   // Bar 6
        ],
        borderWidth: 2,
        borderColor: 'black'
    }
});

Cómo controlar el ancho y el alto de los gráficos

Hasta ahora, si ha estado viendo el gráfico en su navegador, probablemente haya notado que el navegador muestra el gráfico a pantalla completa y no respeta el ancho y el alto que establecimos previamente en el elemento del lienzo:

1
<canvas id="myChart" width="800" height="400"></canvas>

Para resolver esto, debemos agregar configuraciones a nuestra instancia de gráfico de barras pasando algunas opciones en el objeto de opciones. Estas son las opciones:

  • maintainAspectRation: se establece en false para respetar la altura que agregamos previamente al lienzo. Esto significa que mi gráfico tendría 400 píxeles de alto.
  • responsivo: Esto se establece en falso para obtener un control completo sobre el ancho del lienzo.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    // Data...
  },
  options: {
    // ... Other options
    maintainAspectRatio: false,
    responsive: false
  }
});

Sería útil explicar cómo se puede lograr esto usando CSS, que es otro método para controlar el ancho y el alto de su gráfico. ¡Esta opción requiere un marcado adicional, pero es más flexible porque nuestro gráfico seguirá respondiendo!

{.icon aria-hidden=“true”}

Nota: Debemos eliminar el objeto ‘opciones’, así como la ‘altura’ y el ‘ancho’ de la etiqueta del lienzo.

Ahora envolvamos la etiqueta del lienzo en un div que usaríamos para diseñar el gráfico:

1
2
3
<div class="container">
    <canvas id="myChart"></canvas>
</div>

En nuestro CSS, todo lo que tenemos que hacer es aplicar un “ancho máximo” y establecer su “margen” en “0 automático”, para que cambie de tamaño y aparezca en el medio:

1
2
3
4
.container {
    max-width: 800px;
    margin: 0 auto;
}

Cuando vuelva a cargar su navegador, notará que responde, ¡y también respeta el conjunto max-width!

Trazado de gráficos de líneas, gráficos de anillos, áreas polares y gráficos de radar con Chart.js

Crear gráficos es muy simple, todo lo que tenemos que hacer es cambiar el tipo de tipo: "barra" al tipo específico que desee. Esto podría ser pastel, horizontalBar, line, donut, radar, polarArea, scatter, etc.

Otros gráficos que se pueden crear con Chart.js

Adición/actualización y eliminación de conjuntos de datos de los gráficos

Hasta ahora, hemos visto cómo hacer varios tipos de gráficos en Chart.js. Veamos cómo podemos agregar y eliminar datos de nuestro gráfico existente ahora.

Para actualizar un gráfico, querrá actualizar la propiedad del objeto data del objeto Chart y volver a renderizarlo.

El objeto data tiene una propiedad labels (que correspondería a los nombres del marco en nuestro caso) y una propiedad datasets, donde se puede trazar cada conjunto de datos dentro de él. ¡Echemos un vistazo a cómo podemos agregar nuevas instancias a data!

Adición de datos

En términos generales, un enfoque genérico para actualizar un gráfico consiste en acceder a la propiedad data y enviar nuevas etiquetas y datos a sus conjuntos de datos, antes de llamar a chart.update():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });

    chart.update();
}

addData(myChart, 'SolidJS', 18200)

El método update() está destinado a ser llamado después de modificar el objeto data y actualiza el gráfico de forma segura. Vuelve a representar las escalas, la leyenda y el gráfico completo, por lo que cualquier cambio realizado estará presente sin llamadas adicionales.

Avancemos y actualicemos nuestro propio objeto data (que no debe malinterpretarse como la propiedad data propia del gráfico) y veamos cómo podemos actualizar el gráfico con los nuevos valores.

Adición de nuevos datos a gráficos existentes

Digamos que recibimos una solicitud, deserializado en un objeto de JavaScript que debería agregarse al gráfico. Podemos pasar este dataObj a nuestra data (base de datos simulada) y agregar el nuevo dataObj al gráfico:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function updateChart(chart, dataObj) {
    // Saving the new incoming object into the mock database
    Object.assign(data, dataObj);

    // Push changes to the chart
    chart.data.labels.push(Object.keys(dataObj));
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(Object.values(dataObj));
    });
    // Update chart
    chart.update();
}

const newData = {'SolidJS': 18200};
updateChart(myChart, newData);

Adición de múltiples puntos de datos a gráficos existentes

Si intentamos agregar múltiples puntos de datos usando este método, notaremos que todos se acumulan en un solo lugar, ya que el dataObj pasado se agrega directamente al gráfico. Para agregar múltiples puntos de datos, desearemos recorrer los datos e insertar cada propiedad (nombre del marco) como una entidad separada en la matriz:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function updateChart(chart, dataObj) {
    Object.assign(data, dataObj);

    for (const property in dataObj) {
        chart.data.labels.push(property);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(dataObj[property]);
        });
    }

    chart.update();
}

Reemplazo de todos los datos con datos nuevos

Dado que nuestros datos actúan como una base de datos, actualicemos el ejemplo anterior para almacenar primero el objeto de datos entrante en la base de datos y luego extraer los datos de la base de datos, en lugar de agregar los datos de la solicitud.

Esto es mucho más parecido a lo que trabajará en entornos prácticos de desarrollo. Como antes, asignaremos() el nuevo dataObj a data, pero en lugar de enviar los valores a las matrices existentes, reemplazaremos las matrices con todos los datos obtenidos de la base de datos. :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function updateChart(chart, dataObj) {
    // Store data into the database
    Object.assign(data, dataObj);

    // Fetch data from the database and replace old data
    chart.data.labels = Object.keys(data);
    chart.data.datasets.forEach((dataset) => {
        dataset.data = Object.values(data);
    });

    chart.update();
}

const newData = {'SolidJS': 18200};
updateChart(myChart, newData);

Esto también funciona de forma nativa al insertar varios objetos:

1
const newData = {'SolidJS': 18200, 'SemanticUI': 50000 };

Eliminación de datos de gráficos

Eliminar datos es lo opuesto a agregarlos. pop() es lo contrario de push():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });

    chart.update();
}

removeData(myChart);

pop() elimina la última entrada en las matrices, por lo que solo se eliminará el último elemento. De manera similar, shift() elimina el primero. Sin embargo, esto no le da mucho poder sobre lo que se está eliminando.

Por lo general, querrá apuntar a una eliminación, en cuyo caso, se transmitirá un valor para eliminar. Afortunadamente, es muy fácil eliminar un valor de un objeto:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function removeData(chart, val) {
    // Delete entry from the database
    delete data[val];

    // Re-populate and re-render the chart
    chart.data.labels = Object.keys(data);
    chart.data.datasets.forEach((dataset) => {
        dataset.data = Object.values(data);
    });

    chart.update();
}

removeData(myChart, "React");

Más estilos

Ahora echemos un vistazo a algunas opciones de estilo más que se pueden realizar fácilmente con Chart.js.

Estilos/configuraciones globales

Chart.js nos permite declarar algunas configuraciones globales, definidas en Chart.defaults.

Usemos esto para ajustar la familia de fuentes, el tamaño de fuente, el estilo de fuente y el peso de fuente de nuestro chat globalmente, para que se aplique a cada texto en el gráfico. Estas opciones se pueden encontrar en Chart.defaults.fuente.

1
2
3
4
Chart.defaults.font.size = 10;
Chart.defaults.font.weight = 'bold';
Chart.defaults.font.family = 'Lato';
Chart.defaults.font.style = 'italic';

{.icon aria-hidden=“true”}

Nota: La configuración de fuente global solo se aplica cuando no se incluyen opciones más específicas en la configuración de un gráfico individual.

Por ejemplo, en este gráfico, el texto tendrá un tamaño de fuente de 16 px, excepto el texto del título, que tiene asignado un tamaño específico:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            title: {
                text: 'Popular JavaScript Frameworks',
                font: {
                    size: 25,
                },
            },
        },
    },
});

{.icon aria-hidden=“true”}

Nota: También podemos agregar color global para todos los textos en nuestro chat usando Chart.defaults.color.

Configuración de títulos

Se puede agregar un complemento dentro del objeto opciones para especificar el título:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
options: {
  ...
  plugins: {
    title: {
      display: true,
      text: 'Popular JavaScript Frameworks',
      font: {
        size: 25
      }
    },
  }
}

{.icon aria-hidden=“true”}

Nota: Esto acepta más estilos como posición, relleno, fuente, etc. Más detalles están en la Documentación oficial de Chart.js.

Adición de leyendas

Las leyendas son una excelente manera de ayudar a los usuarios a conectar las clases y sus etiquetas con sus colores. Las leyendas también se pueden declarar/diseñar globalmente usando Chart.defaults.plugins.legend en caso de que tenga varios gráficos y no quiera repetir el mismo código:

1
2
3
4
5
6
7
plugins: {
  ...
  legend: {
    display: true,
    position: 'right'
  }
}

{.icon aria-hidden=“true”}

Nota: Para otros gráficos además de los mencionados anteriormente, es mejor establecer display en false.

Setting the legent content

Conclusión

Hasta ahora, en este tutorial, hemos podido aprender cómo utilizar Chart.js para crear todas las formas de gráficos y también hemos visto cómo podemos aplicar estilos, lo que puede volverse muy complicado si no comprende cómo funciona correctamente. mente.