Generador de gráficos de líneas pequeñas con JavaScript y Canvas-jschart
| Autor: | ftunholm |
|---|---|
| Views Total: | 2,407 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 3, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
jschart es una pequeña biblioteca de visualización de datos de JavaScript para dibujar un gráfico de líneas simple en un elemento canvas de HTML5.
Funcionamiento
Coloque el archivo principal de JavaScript Chart. js en la Página Web.
<script src="chart.js"></script>
Cree un elemento canvas de HTML5 en el que desee dibujar el gráfico de líneas.
<canvas id="canvas"> Canvas not supported! </canvas>
Defina los datos que desea visualizar.
var data = {
"xName": "Month",
"yName": "Users",
"cols": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"data": [{ "name": "2016", "values": [6, 21, 60, 654, 323, 265, 282, 876, 111, 345, 899, 145] },
{ "name": "2015", "values": [10, 11, 60, 344, 423, 365, 382, 476, 211, 145, 999, 45] }]
}; Dibuje un gráfico de líneas predeterminado en el elemento canvas que acaba de crear.
var canvas = document.getElementById("canvas");
chartify(canvas, data); Configuración predeterminada para personalizar el gráfico de líneas.
var settings = {
"backgroundColor": "",
"chartColor": "",
"chartLinesColor": "",
"textColor": ""
};
