Generador de mapa de calor simple con JavaScript y Canvas-Simpleheat
| Autor: | mourner |
|---|---|
| Views Total: | 5,594 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 30, 2018 |
| Licencia: | BSD 2-Clause |
Vista prévia
Descripción
Simpleheat es una biblioteca de visualización de mapas de calor simple y rápida que le permite dibujar gráficos de calor basados en HTML5 Canvas con facilidad.
¿Cómo funciona?
Cargue la biblioteca simpleheat. js necesaria en el documento.
<script src="simpleheat.js"></script>
Cree un elemento canvas de HTML5 en el lugar donde desee renderizar un mapa térmico personalizado.
<canvas id="canvas" width="1000" height="600"></canvas>
preparar los datos.
var data = [[38,20,2],[38,690,3],[48,30,1],...];
Operación de datos.
// set data of [[x, y, value], ...] format heat.data(data); // set max data value (1 by default) heat.max(max); // add a data point heat.add(point); // clear data heat.clear();
Dibuja el mapa térmico.
// create a simpleheat object given an id or canvas reference var heat = simpleheat(canvas); // draw the heatmap with optional minimum point opacity (0.05 by default) heat.draw(minOpacity);
Opciones de apariencia.
// set point radius and blur radius (25 and 15 by default)
heat.radius(r, r2);
// set gradient colors as {<stop>: '<color>'}, e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}
heat.gradient(grad); Registro de cambios
07/30/2018
- Corregido demo & descargar
