Biblioteca de gráficos diminutos en JavaScript puro y SVG-Krap. js

Vista prévia

Descripción

Krap. js es una biblioteca JS ligera y libre de dependencia que se utiliza para dibujar gráficos dinámicos simples en la página HTML usando SVG. Actualmente admite gráficos circulares y de barras (columna).

Vista prévia

Importa el Krap. js y el Krap. CSS a la página HTML.

<script src="krap.js"></script>
<link rel="stylesheet" href="krap.css">

Cree un elemento de marcador de posición para el gráfico.

<div id="container" >

</div>

Defina una matriz de objetos que desee presentar en el gráfico.

var json =[


{oracle:[



{profits:[







{phones:1},







{software:2}



]},



{loss:[3]},



{misc:[6]},


]},


{amazon:[10]},


{google:[60]},


{microsoft:[20]}
];

Represente los datos como un gráfico circular dentro del contenedor DIV que ha creado.

properties = {}

properties['width'] = 300;
properties['height']=300;
properties['data']= [10,30,60]
properties['colours']= ['#38D3EE', '#C9D2D4', '#FF5A82'];

chart.pie('pie',properties);

Represente un gráfico circular dentro del contenedor DIV que ha creado.

var
props = {


'width': 300,


'height': 300,


'data': {'apple':5,'oracle':10,'google':15,'tesla':20,'A':15,'B':10,'C':5},


'xCords': [],


'yCords': [],


'yCordsSorted': [],


'divId': 'undefined',


'datumsPerScreen': 4,


'colours': {},


'barColours': 'blue',


'yTickLabels': {},


'svgObj': 'undefined',


'axisType': 'generateSimpleAxis'
};

chart.bar('bar',props);