Biblioteca de visualización de datos multifuncional para JavaScript-Grapho. js

Vista prévia

Descripción

Grapho. js es una biblioteca JavaScript simple, ligera pero altamente personalizable para visualizar sus datasets en varios tipos de gráficos.

Chart types supported:

• Bar (apilado, fijo)
• Línea (apilada, fija)
• Área (apilada, fija)
• Dispersión
• Pie (apilado, regular)
• Bandas
• Barras de error
• Diagrama de caja
• Vela
• Ohlc

¿Cómo funciona?

Descargue y coloque la biblioteca JavaScript de Grapho. js en su documento HTML.

<script src="grapho.js"></script>

Cree un elemento DIV que se servirá como contenedor para el gráfico.

<div id="example"></div>

Cree una barra básica & gráfico de líneas.

var graphoObj = new Grapho( { place: 'example' } );

graphoObj.addDataSet({


type:'line',


strokeStyle: '#F0F066',


y: {




 scaleStyle: '#F0F066',




showGridLines: true,




labels: true


},


x: {




 labels: true


},


data: [7, 6, 5, 4, 2.5, 4, 4, 10, 0, 12,14]
});

graphoObj.addDataSet({


type:'bar',


strokeStyle: '#F0F066',


data: [7, 6, 5, 4, 2.5, 4, 4, 10, 0, 12, 14]
});

Todas las opciones de configuración predeterminadas.

container: {

width: "auto",

height: "auto"
},
settings: {

// Used for all chart types

margin: 5,

showLegend: false,

legend: {


position: "bottom",


inside: false

},


// Used for pie

startAngle: 90,

sizePercent: 1,

relative: true,

innerMargin: 3
},
dataset: {

type: "line", // line || scatter || area || bar || pie || box || error || ohlc || candle


x: { axis: 1 },

y: { axis: 1 },


// type: "line" or "area"

lineWidth: 2,

lineSmooth: true,


dotWidth: 4,



// type: scatter


// type: "bar"

widthPrc: 90,


// Internal stuff

_labels: [],

_usedPos: [],






 // Used for stacking charts

_usedNeg: [],

_data: []
},
axis: {

min: "auto",

max: "auto",

showscale: false,

gridLines: false,


name: undefined,


labels: false,

labelFormat: formats.default,

labelRotation: 0,


showCenter: false,

majorTickHeight: 4,

center: 0,

padded: false,

stacked: false,

numeric: true,






// Handle this as an numerical (continouos) axis, or a text-axis

extra: 0,








 // Extra adds to max and min, usable when using max/min auto


}