La biblioteca de JavaScript de trazado ligero & gráficos-Chartdj
| Autor: | victormiranda |
|---|---|
| Views Total: | 2,252 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 8, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Chartdj es una biblioteca de gráficos de JavaScript ligera, fácil de usar y modular para producir gráficos usando < a href = "https:/d3js.org" target = "_ blank" rel = "noopener" > D3. js y HTML5 Canvas Element.
Funcionamiento
Cargue el D3. js necesario en el documento.
<script src="https://d3js.org/d3.v3.js"></script>
Cargue los otros archivos JavaScript en el documento.
<script src="js/util.js"></script> <script src="js/core.js"></script> <script src="js/line.js"></script> <script src="js/chart.js"></script>
El ejemplo de JavaScript para dibujar un gráfico de líneas simple con datos personalizados en un elemento canvas de de HTML5.
var canvas = new chartDJ.Canvas({
size: [800,300]
});
var sales = new chartDJ.chart.serie.Line({
label : 'Sales',
color : 'darkred',
interpolation: 'cardinal',
accesor: {
x: function(e) {return new Date(e.time);},
y: function(e) {return e.value;}
},
data : [
{
time: '1999/01/01',
value: 0
},
{
time: '2000/01/01',
value: 50
},
{
time: '2000/06/01',
value: 100
},
{
time: '2001/01/01',
value: 140
},
{
time: '2002/01/01',
value: 10
},
{
time: '2003/01/01',
value: 40
}
]
});
var incomes = new chartDJ.chart.serie.Line({
label : 'Incomes',
color : 'darkgreen',
interpolation: 'cardinal',
accesor: {
x: function(e) {return new Date(e.time);},
y: function(e) {return e.value;}
},
data : [
{
time: '1999/01/01',
value: 10
},
{
time: '2000/01/01',
value: 20
},
{
time: '2000/06/01',
value: 220
},
{
time: '2001/01/01',
value: 100
},
{
time: '2002/01/01',
value: 100
},
{
time: '2003/01/01',
value: 140
}
]
});
var chart = new chartDJ.chart.Chart({
container: canvas,
size: [550,250]
});
chart.addSerie(sales);
chart.addSerie(incomes);
setTimeout(function(){
sales.data[0].value = 100;
sales.data[4].value = 500;
chart.updateSerie(sales)
},1000);
chart.render();
