Biblioteca de gráficos de lienzo HTML5 mínima-g-Chart

Vista prévia

Descripción

g-Chart es una librería de JavaScript pura de Vanilla que se utiliza para renderizar gráficos dinámicos HTML5 usando los elementos del lienzo. Actualmente, admite gráficos circulares y de líneas.

¿Cómo funciona?

Cargue el archivo JavaScript en el documento HTML.

<script src="g-chart.line.js"></script>
<script src="g-chart.pie.js"></script>

Cree sus propios datos, etiquete las matrices de información sobre herramientas que se presentarán en el gráfico circular o de líneas.

var data
 = [ 12,
 15,
 13,
 22,
 8,
 12,
 31,
 3,
 5 ];
var label
= ['12', '15', '13', '22', '8', '12', '31', '3', '5'];
var tooltip
= ['Twelve', 'Fifteen', 'Thirteen', 'Twenty-two', 'Eight', 'Twelve', 'Thirdy-one', 'Three', 'Five'];

Cree un elemento canvas de HTML5 para el gráfico.

<canvas id="pie" width="400" height="400"></canvas>
<canvas id="line" width="600" height="400"></canvas>

Genere un gráfico circular.

var canvas = document.getElementById("pie");
var pie_chart = new PieChart(canvas, data, label, tooltip);
pie_chart.draw();
pie_chart.tooltipOn('mousemove');

Genere un gráfico de líneas.

canvas = document.getElementById("line");
var line_chart = new LineChart(canvas, data, label, tooltip);
line_chart.draw();
line_chart.tooltipOn('mousemove');

Personalice la información sobre herramientas con sus propios estilos CSS.

.tooltip-chart {

position: fixed;

z-index: 1000;

transform: translate(-50%, -120%);

padding: 10px;

background-color: white;

border-radius: 5px;

text-align: center;

min-width: 100px;

border: 1px solid #000;

box-shadow: 0 0 10px 5px #000;
}