Generar gráfico de barras/columnas en JavaScript puro-bar. js
| Autor: | themaxsandelin |
|---|---|
| Views Total: | 2,058 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 17, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Bar. js es una biblioteca JS simple y pequeña que se utiliza para representar dinámicamente gráficos de barras/columnas horizontales y/o verticales a partir de datos JS sin formato.
Funcionamiento
Importe el archivo CSS bar. CSS en el encabezado y el archivo JS bar. js en la parte inferior del documento.
<link rel="stylesheet" href="bar.css"> <script src="bar.js"></script>
Cree un contenedor para mantener el gráfico de barras.
<div id="chart"></div>
Prepare los datos que desea presentar.
const params = {
data: [
{
x: 97,
y: 210
},
{
x: 50,
y: 180
},
{
x: 110,
y: 190
},
{
x: 78,
y: 183
},
{
x: 50,
y: 210
},
{
x: 90,
y: 198
},
{
x: 50,
y: 180
},
{
x: 110,
y: 190
}
]
}; Genere un gráfico de barras predeterminado dentro del contenedor que ha creado.
const chart = new Chart('#chart', params); Configuración del gráfico de barras con las siguientes opciones.
const params = {
iterations: 2,
labels: {
x: 'X label',
y: 'Y label'
},
data: [],
spacing: 0,
mode: 'vertical' // or horizontal
};
