Biblioteca de gráficos base SVG-chartress. js
| Autor: | jsnanigans |
|---|---|
| Views Total: | 2,104 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 5, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
chartress. js es una biblioteca de JavaScript ligera que utiliza SVG. js para dibujar gráficos interactivos, de línea/columna/tarta en la página HTML. También proporciona un método para convertir el gráfico SVG en una imagen de lienzo.
Funcionamiento
Cargue tanto SVG. js como la biblioteca chartress. js en el documento HTML.
<script src="svg.min.js"></script> <script src="dist/chartress.js"></script>
Cree un elemento contenedor en el que desee representar el gráfico SVG.
<div class="demo"></div>
Dibuje un gráfico de líneas simple.
var linechart = {
lines: [
{
name: 'Red',
color: 'red',
plot: [0, 10, 50, 80, 53, 20, 25, 80, 70, 5, 40],
},{
name: 'Black',
plot: [40, 20, 1, 50, 60, 70, 100, 70, 40, 30, 10],
},{
name: 'Gray',
dash: '10,5',
color: 'gray',
plot: [4, 6, 20, 18, 24, 8, 0, 0, 20, 10, 5],
}
]
}
document.addEventListener("DOMContentLoaded", function(event) {
var chart = chartress(document.querySelector('.demo'), linechart);
}); Dibuje un gráfico de columnas simple.
var coumnchart = {
type: 'column',
lines: [
{
name: 'MO',
value: 40,
color: 'orange',
textColor: 'red'
},{
name: 'TU',
value: 60
},{
name: 'WE',
value: 30
},{
name: 'TH',
value: 60
},{
name: 'FR',
value: 90
},{
name: 'SA',
value: 22
},{
name: 'SU',
value: 15
}
]
};
document.addEventListener("DOMContentLoaded", function(event) {
var chart = chartress(document.querySelector('.demo'), coumnchart);
}); Dibuje un gráfico circular simple.
var piechart = {
type: 'pie',
lines: [
{
value: 100
},
{
value: 61,
color: '#1b860b'
}
]
};
document.addEventListener("DOMContentLoaded", function(event) {
var chart = chartress(document.querySelector('.demo'), piechart);
}); Configuración global:
yMax: 0,
fontSize: 'Helvetica',
class: 'chartress',
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
type: 'line',
yAxis: {
markEvery: 1,
label: {
color: 'gray',
x: 0
},
markEvery: 20,
},
xAxis: {
range: {
from: 0,
to: null,
},
markEvery: 1,
label: {
color: 'gray',
y: 0
},
},
legend: {
x: 100,
y: 0,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0,
}
},
columns: {
width: 15,
labels: {
fontSize: 16,
y: 1
}
},
pie: {
total: 100,
red: 'blue',
title: {
size: 50,
bold: true,
text: false,
pre: false,
sub: false
}
} Convierta el gráfico SVG en una imagen de lienzo.
chart.drawToCanvas(document.querySelector('#canvas'));
