手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

heatmap.js教程

时间:2024-11-14 12:13:57

1、下载zip文件,并解压文件,获取路径。

heatmap.js教程
heatmap.js教程

2、生成一个div用于渲染。h337.create()创建对象,使用containter:指定容器,生成heatmapformat数据data,使用setData()函数设置数据。

heatmap.js教程

3、实例一:代码:<!DOCTYPE html><挢旗扦渌;html><head> <meta charset="UTF-8"> <title></title> <style> div { width:600px; height:400px;border: 1px solid;border-color: grey; } </style></head><body> <div id="heatmap"></div></body><script src="C:\Users\jyjh\Desktop\heatmap.js-2.0.5\heatmap.js-2.0.5\build\heatmap.js"></script><script type="text/javascript">var heatmapInstance = h337.create({ container: document.querySelector('#heatmap'),});var points = [];var max = 0;var width = 600;var height = 400;var len = 20;while (len--) { var val = Math.floor(Math.random()*100); max = Math.max(max, val); var point = { x: Math.floor(Math.random()*width), y: Math.floor(Math.random()*height), value: val }; points.push(point);}var data = { max: max, data: points};heatmapInstance.setData(data);</script></html>

heatmap.js教程

4、实例二:<!DOCTYPE html><html><head> <meta ch锾攒揉敫arset="UTF-8"> <title></title> <style> div { width:600px; height:400px;border: 1px solid;border-color: grey; } </style></head><body> <div id="heatmap"></div></body><script src="C:\Users\jyjh\Desktop\heatmap.js-2.0.5\heatmap.js-2.0.5\build\heatmap.js"></script><script type="text/javascript">var heatmapInstance = h337.create({ container: document.querySelector('#heatmap'), backgroundColor: 'rgba(0,0,0,.95)', gradient: { '.5': 'blue', '.8': 'red', '.95': 'white' }, maxOpacity: .9, minOpacity: .3});var points = [];var max = 0;var width = 840;var height = 400;var len = 300;while (len--) { var val = Math.floor(Math.random()*100); var radius = Math.floor(Math.random()*70); max = Math.max(max, val); var point = { x: Math.floor(Math.random()*width), y: Math.floor(Math.random()*height), value: val, radius: radius }; points.push(point);}var data = { max: max, data: points};heatmapInstance.setData(data);</script></html>

heatmap.js教程

5、创建方法,以及设置方法。

heatmap.js教程
heatmap.js教程
heatmap.js教程
heatmap.js教程
heatmap.js教程
heatmap.js教程
heatmap.js教程

6、更多实例:可以参考一下文档

heatmap.js教程
© 手抄报圈