Use gráfico.js para convertir los datos en diagramas interactivos

Sep 13, 2025
Cómo
[dieciséis]

En teoría, crear diagramas no es difícil. El manejo de la trigonometría requerida para un gráfico circular se encuentra entre los trabajos más clásicos utilizados para los programadores de capacitación. Hay muchas bibliotecas de diagramas que compiten por las atenciones de los desarrolladores en este momento, pero en este artículo, vamos a centrarnos en cómo usar la herramienta de código abierto, TABL.JS.

Pondremos la biblioteca a través de sus pasos, creando un conjunto de diagramas imprimibles de datos generados al azar. Chart.js es especialmente popular Herramienta de diseño web Debido a que ofrece una compensación única entre facilidad de uso y características avanzadas, lo que le permite crear gráficos interactivos y participar infografías .

Con Chart.js, puede elegir entre ocho tipos diferentes de gráficos para agregar a sus sitios web con un esfuerzo mínimo. El módulo de animaciones recientemente agregado enriquece los diagramas con imágenes de aspecto elegante. ¿Creando un nuevo sitio para albergar tus diagramas? Conseguir su Alojamiento web Spot activado, y asegúrate de probar un top. Creador de sitios web . Está bien, vamos a empezar.

Haga clic en el icono en la parte superior derecha de cada imagen para ampliarla.

01. Implementar la biblioteca.

A medida que el uso de Chart.js está generalizado, puede encontrar su versión minificada de varios CDN, como CloudFlare. Simplemente carga con un & lt; script & gt; etiqueta, y asegurarse de que un & lt; lienzo & gt; El objeto está cerca: Chart.js hace su magia utilizando la infraestructura de renderización proporcionada en este widget. 

 & lt; HTML & GT;
& lt; cabeza y gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Gráfico.min.js "& gt;
& lt; / script & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; lienzo id = "workarea" & gt;
& lt; / lienzo & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Iniciar inicialización

First, load up the framework

[dieciséis] Primero, cargar el marco.

Cuando se carga el marco, el siguiente paso implica obtener una manija de lienzo2D apuntando a la & lt; lienzo & gt; Instancia creada en el paso anterior. Esto se puede usar para crear una nueva instancia de la Gráfico() Clase, que es responsable del manejo de datos, representación e interacción. 

 & lt; script & gt;
(función () {
var ctx = documento.
getElementbyid ('WorkArea'). GetContext ('2D');
var gráfico = nuevo gráfico (CTX,
{
Tipo: 'Línea',
Opciones: {},
. . .
});
}) ();
& lt; / script & gt;

03. Añadir una fuente de datos

line chart

[dieciséis] Para nuestra tabla de líneas, solo se requiere un conjunto de datos

Las clases de gráficos toman un puntero de datos que proporciona uno o más Dataset Objetos que contienen la información de medición real. En el caso de nuestra tabla de líneas, solo se necesita un conjunto de datos. Viene con el elemento de datos obligatorio y algunos parámetros opcionales que rigen el proceso de visualización real. 

 var gráfico = nuevo gráfico (CTX, {
Tipo: 'Línea',
Opciones: {},
datos: {
Etiquetas: ["Enero",
"Febrero", "March", "Abril", "Mayo", "Junio",
"Julio"],
Conjunto de datos: [{
Etiqueta: "Mi primer conjunto de datos",
color de fondo:
        'RGB (255, 99, 132)',
color del borde:
'RGB (255, 99, 132)',
DATOS: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Detenga cualquier parpadeo

Chart.js viene con una lógica de cambio de tamaño sofisticada, que, lamentablemente, tiende a obtener tamaños de pantalla incorrecta de vez en cuando. Limitando el tamaño de la & lt; lienzo & gt; Elemento a través de CSS, tristemente, no hace el truco. En su lugar, tanto el mantenimiento de la relación de aspecto como la capacidad de responsabilidad deben desactivarse a través del campo de las opciones que acompaña al constructor de clases de gráficos. 

 & lt; lienzo id = "WorkArea" Style = "Anchth: 800px;
altura: 600px; "& gt; & lt; / liend & gt; / ldas & gt; / lona & gt;
& lt; script & gt;
(función () {
var ctx = documento.
getElementbyid ('WorkArea'). GetContext ('2D');
var gráfico = nuevo gráfico (CTX,
{
Tipo: 'Línea',

Opciones: {
Receptivo: Falso, MantenerSpectratio:
Falso},

05. Añadir diseños

Parafraseando a Andrei Tupolev: ahora que el pequeño está volando, vamos a colocar la más grande. El andamio que se muestra acompañando a este paso 'Multiplica' nuestro diagrama: en lugar de trabajar con un elemento de lona, ​​ahora creamos un total de cuatro de ellos y lo organizamos en la pantalla de una manera similar a un osciloscopio de Lecroy. Lamentablemente, esto no funciona, según lo previsto. 

 & lt; lienzo id = "workarea"
Estilo = "Posición: Absolute; Top: 0%; Izquierda: 0%;
Ancho: 49%; Altura: 49%; "& gt; & lt; / liend & gt; & lt; / lona & gt;
& lt; lienzo id = "workarea2"
Estilo = "Posición: Absolute; Top: 0%; Izquierda: 51%;
Ancho: 49%; Altura: 49%; "& gt; & lt; / liend & gt; & lt; / lona & gt;
& lt; lienzo id = "workarea3"
Estilo = "Posición: Absolute; Top: 51%; izquierda: 0%;
Ancho: 49%; Altura: 49%; "& gt; & lt; / liend & gt; & lt; / lona & gt;
& lt; lienzo id = "workarea4"
Estilo = "Posición: Absolute; Top: 51%; Izquierda: 51%;
Ancho: 49%; altura: 49%; "& gt; & lt; / liend & gt; & lt; / ldas & gt;

06. domesticar cualquier error de renderizado

Wrapper <div> tags enforce a structure from the outside

[dieciséis] Wrapper & Lt; DIV & GT; Las etiquetas hacen cumplir una estructura desde el exterior.

La forma más segura de manejar los diagramas de gráficos en los diseños complejos implica el uso de envoltura & lt; div & gt; etiquetas Hacen cumplir una estructura desde el exterior, asegurando así que el motor de diseño interno no pueda hacer más daño de lo necesario. En este caso, sin embargo, asegúrese de volver a habilitar la función de responsabilidad. 

 & lt; Div Style = "Posición: Absolute; Top: 0%; Izquierda:
0%; Ancho: 49%; Altura: 49%; "& gt;
& lt; lienzo id = "workarea" & gt; / ltas & gt; & lt; & lt; & lt; / lt; /
lienzo & gt;
& lt; / DIV & GT;
& lt; div style = "Posición: Absolute; Top: 0%; Izquierda:
51%; Ancho: 49%; Altura: 49%; "& gt;
& lt; lienzo id = "workarea2" & gt; / lt; / lona & gt; & lt; & lt; /
lienzo & gt;
& lt; / DIV & GT;
& lt; div style = "Posición: Absolute; Top: 51%; Izquierda:
0%; Ancho: 49%; Altura: 49%; "& gt;
& lt; lienzo id = "workarea3" & gt; / lt; / ldas & gt; & lt; & lt; & lt; /
lienzo & gt;
& lt; / DIV & GT;
& lt; div style = "Posición: Absolute; Top: 51%; Izquierda:
51%; Ancho: 49%; Altura: 49%; "& gt;
& lt; lienzo id = "workarea4" & gt; & lt; / ldas & gt; & lt; & lt; /
lienzo & gt;
& lt; / DIV & GT;
& lt; script & gt;
document.addeventlistener ("domcontentl
OADED ", FUNCION () {
var ctx = documento.
getElementbyid ('WorkArea'). GetContext ('2D');
var gráfico = nuevo
Gráfico (CTX, {
escribe:
'línea',
Opciones:
{},

07. Prueba barras

Creating bar charts is simple

[dieciséis] La creación de gráficos de barra es simple

Siempre renderizar las tablas de línea se pone tedioso rápidamente. Vamos a spruce las cosas cambiando la propiedad tipo a la barra, produciendo así diagramas de barras, como la que se muestra en la figura que acompaña a este paso. Promovemos el campo de datos a un alcance 'global' para eliminar la reutilización. 

 & lt; script & gt;
document.addeventlistener ("domcontentloaded", función () {
var myfield = {
Etiquetas: ["Enero", "Febrero", "March", "Abril", "Mayo", "June", "Julio"],
Conjunto de datos: [{
etiqueta:
"Mi primer conjunto de datos",

BackgroundColor: 'RGB (255, 99, 132)',

BorderColor: 'RGB (255, 99, 132)',
Datos: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = DOCUMENTO.
getElementByID ('WorkAreaA4'). GetContext ('2D');
gráfico = nuevo gráfico (CTX, {
Tipo: 'Bar',
Opciones: {},
DATOS: MyField
});
});
& lt; / script & gt;

08. Evitar tartas

pie charts taking over the screen

[dieciséis] Los gráficos circulares requieren un tratamiento especial si no quiere que llenen toda su pantalla

En teoría, un gráfico circular se puede representar a lo largo de las mismas líneas. Retire las propiedades del color para evitar una apariencia uniforme y configure la propiedad de tipo a PANE. Lamentablemente, esto no funciona del todo, cuando se hace, el gráfico circular llenará la pantalla completa. Esto es causado por una especialidad del renderizado que utiliza la "más grande" de las dos propiedades para determinar el radio de pastel. 

 var mypie = {
Etiquetas: ["Enero", "Febrero", "March", "Abril", "Mayo", "June", "Julio"],
Conjunto de datos: [{
Etiqueta: "Mi primer conjunto de datos",
Datos: [0, 10, 5, 2, 20, 30, 45],
}]
};
ctx = document.getelementbyid ('WorkArea2').
getcontext ('2d');
gráfico = nuevo gráfico (CTX, {
Tipo: 'Pie',
Opciones: {},
DATOS: MYPIE
});

09. Resuelve el problema.

Abra el archivo 'index.js' creado en el Paso 1. Comience especificando el tipo de gráfico como línea y agregando los datos para estar representados visualmente como se muestra a continuación. 

& lt; cuerpo y gt;
& lt; div style = "Posición: Absolute; Top: 0%;
izquierda: 0%; Ancho: 49%; Altura: 49%; "& gt;
& lt; lienzo id = "workarea" & gt; & lt; /
lienzo & gt; & lt; / lienzo & gt;
& lt; / DIV & GT;
& lt; div style = "Posición: Absolute; Top: 0%;
izquierda: 51%; Ancho: 29%; Altura: 49%; "& gt;
& lt; lienzo id = "workarea2" & gt; & lt; /
lienzo & gt; & lt; / lienzo & gt;
& lt; / DIV & GT;

10. Deja que Chart.js rescate el diagrama.

Otro enfoque para resolver el problema implica re-deshabilitar el mantener la relación de aspecto característica. De esta manera, el motor de diagramación puede rescate el diagrama, ya que ve en forma, asegurando que todo el círculo aparezca en la pantalla. 

 CTX = DOCUMENT.GETELEMENTBYID ('Workarea2').
getcontext ('2d');
gráfico = nuevo gráfico (CTX, {
Tipo: 'Pie',
Opciones: {Mayoraspectratio: False
},
DATOS: MYPIE
});

Página siguiente: Terminar creando su tabla interactiva con gráficos .js

  • 1
  • 2

Página actual: Usando gráfico.js: Pasos 01-10

Cómo - Artículos más populares

Comienza con Bulma

Cómo Sep 13, 2025

[dieciséis] (Crédito de la imagen: Bulma) ¿Quieres empezar a usar Bulma? Estás en el lugar correcto. Bulma es un marco pop..

Cómo dibujar un personaje en la pluma y la tinta

Cómo Sep 13, 2025

[dieciséis] Como artista en un estudio de juego, he olvidado los medios más tradicionales, pero la tinta siempre me llama a mí. Desp..

¿Qué es una línea de terminador?

Cómo Sep 13, 2025

[dieciséis] Hay muchos aspectos de la iluminación que necesita considerar para transmitir el formulario. Un fundamental muy útil es ..

Diseños flexibles de moda con cuadrícula CSS

Cómo Sep 13, 2025

[dieciséis] La cuadrícula CSS es perfecta para crear diseños de dos ejes de filas y columnas. La sintaxis es simple y hace que la di..

Crea arte de retratos en Corel Painter

Cómo Sep 13, 2025

Página 1 de 2: Página 1 Página 1 Página 2 Este taller le presen..

Cómo usar la reducción en el desarrollo web

Cómo Sep 13, 2025

[dieciséis] Como desarrolladores web y creadores de contenido, generalmente pasamos mucho tiempo escribiendo texto que está envuelto ..

Cómo simular explosiones en Maya

Cómo Sep 13, 2025

[dieciséis] Página 1 de 2: Página 1 Página 1 Página 2 ..

La anatomía de la caricatura: 15 puntas superiores

Cómo Sep 13, 2025

[dieciséis] Como freelancer a tiempo completo, estoy acostumbrado a trabajar en una variedad de estilos y Técnicas de dibujo ..

Categorías