Biblioteca de trazado de datos animados fácil-Easygraphs. js
| Autor: | M-Ulyanov |
|---|---|
| Views Total: | 2,318 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 17, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Easygraphs. js es una biblioteca de gráficos de JavaScript fácil, flexible y de alto rendimiento que se utiliza para trazar sus datos como animados, tablas basadas en SVG, líneas, puntos y áreas. No se requieren 3 dependencias y estilos CSS.
Funcionamiento
Enlace a Easygraphs. js como sigue:
<script src="source/Easygraphs.js"></script>
Cree un contenedor DIV para el gráfico.
<div id="demo"></div>
Cree una nueva instancia de Easygraphs y prepare sus datos & pasar las opciones de la siguiente manera:
var myGraph = new Easygraphs({
container: document.getElementById('demo'),
width: 880,
height: 200,
padding: {
top: 30,
right: 30,
left: 55
},
tooltip: {
template: 'Number errors: {{ value }}',
widthAuto: true,
color: '#222',
background: '#FFF'
},
yAxis: {
text: {
toFixed: 0
},
title: {
text: 'May'
},
grid: {
dasharray: '1%'
}
},
xAxis: {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
grid: {
dasharray: '1%'
}
},
data: [{
name: 'Errors',
dots: {
color: 'rgb(246, 75, 47)'
},
line: {
width: 2,
color: 'rgb(246, 75, 47)',
fill: 'rgba(246, 75, 47, 0.5)'
},
values: [12, 22, 25, 23, 32, 34, 37, 30, 32, 40, 51, 56, 52, 70, 68, 72, 74, 78, 91, 92, 95, 96, 98, 121, 70, 78, 76, 68, 72, 71, 92]
}]
}); Represente el gráfico dentro del contenedor que acaba de crear.
myGraph.render();
Todas las opciones predeterminadas y funciones de devolución de llamada.
container: null,
width: 1024,
height: 400,
speedRenderingFragment: 40,
padding: {
top: 20,
left: 60,
bottom: 60,
right: 20
},
color: '#FFF',
xAxis: {
labels: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18],
border: {
show: true,
width: 1,
color: '#DADADA'
},
segment: {
show: true,
width: 1,
height: 10,
color: '#DADADA'
},
text: {
color: '#222',
size: 12
},
grid: {
show: true,
width: 1,
color: '#DADADA'
}
},
yAxis: {
title: {
show: true,
text: 'yAxis title',
size: 14,
color: '#222'
},
segment: {
show: true,
count: 5,
width: 10,
height: 1,
color: '#DADADA'
},
border: {
show: true,
width: 1,
color: '#DADADA'
},
text: {
show: true,
color: '#222',
size: 12,
toFixed: 1,
outputCallback: null
},
grid: {
show: true,
width: 1,
color: '#DADADA'
}
},
legends: {
show: true,
width: 20,
height: 4,
offsetY: 0,
color: '#222',
size: 12
},
tooltip: {
show: true,
color: '#FFF',
background: false,
borderWidth: 1,
borderColor: false,
template: '{{value}}',
size: 12,
width: 120,
height: 25,
widthAuto: false,
rx: 3,
ry: 3
},
dotsOptions: {
show: true,
width: 6,
height: 6,
color: '#7CB5EC',
borderColor: '#7CB5EC',
borderWidth: 1,
rx: 25,
ry: 25,
hoverEffect: true
},
lineOptions: {
show: true,
width: 2,
color: '#7CB5EC',
fill: false,
hoverEffect: true
},
data: [{
name: 'Test data',
dots: {
color: 'rgb(31, 118, 185)'
},
line: {
color: 'rgb(31, 118, 185)',
fill: 'rgba(31, 118, 185, 0.3)'
},
values: [1, 5, 7, 9, 11, 15, 22, 14, 10, 1, 2]
}],
callbacks: {
createItem: null,
createInstance: null
}
