Gráfico circular básico con JavaScript y Canvas-DiagJS
| Autor: | boatx |
|---|---|
| Views Total: | 1,456 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 6, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
DiagJS es una biblioteca JavaScript fácil de usar que le permite dibujar dinámicamente un gráfico de < a href = "https://wikicss.com/tag/pie-chart/" > en un elemento de HTML5 Canvas.
Funcionamiento
Cree un elemento Canvas vacío en el que desee dibujar el gráfico circular.
<canvas width="800" height="800" id="example"> Sorry, canvas not supported </canvas>
Descargue e inserte el script diagjs. js en la Página Web.
<script src="diagjs.js">
Defina los datos (valores porcentuales y códigos de color) en el código JavaScript.
var elements = {
dogs: 0.3,
cats: 0.6,
dinosaurs: 0.1
};
var colors = {
dogs: 'green',
cats: 'blue',
dinosaurs: 'red'
}; Dibuje el gráfico circular en el elemento Canvas y listo.
var canvas = document.getElementById('can');
var diag = diagJS.PieChart(elements, colors, canvas);
diag.draw();
