Heatmap.js  – 最强大的 Web 动态热图

最新公司项目需要用到热力图，在百度上搜下，了解到heatmap.js这款神器。然后搜了下例子，却很难搜到马上出效果的例子，特此写一篇heatmap.js基础教程。

官网：http://www.patrick-wied.at/static/heatmapjs/

api：http://www.patrick-wied.at/static/heatmapjs/docs.html

官网例子：http://www.patrick-wied.at/static/heatmapjs/examples.html

本人英文不好，官网的例子看了好久才看懂

首先看一段代码

 <!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="js/heatmap.js"></script>

 <script type="text/javascript">

 // 创建一个heatmap实例对象

 // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例

 // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api

 var heatmapInstance = h337.create({

     container: document.querySelector('#heatmap'),

 });

 //构建一些随机数据点,网页切图价格这里替换成你的业务数据

 var points = [];

 var max = 0;

 var width = 600;

 var height = 400;

 var len = 200;

 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

 };

  //因为data是一组数据,web切图报价所以直接setData

 heatmapInstance.setData(data); //数据绑定还可以使用

 </script>

 </html>

请先下载 heatmap.js ,上面的代码复制出去就能看到效果了。

API方法，属性

h337.create(configObject)

创建heatmap实例，configObject是一个json对象，里面有很多参数

参数详情

container 页面操作div的dom对象，如div的id为test,可以写成

backgroundColor 画板的背景颜色设置，支持rgb(a)，颜色名称，但必须要用引号

gradient  设置热点图的光圈颜色，数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色

radius 设置光圈的半径大小，值>=0,=0取得是默认值

opacity 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值

 h337.create({

     container:document.getElementById("text"),

     backgroundColor:'red',    // '#121212'    'rgba(0,102,256,0.2)'

     gradient: {

         '0.5': 'blue',

         '0.8': 'red',

         '0.95': 'white',

         '0.6':'yellow',

         '0.5':'green'

     },

     radius: 10,        // [0,+∞)

     opacity:0.8,

 });

热力图实现-heatmap.js 代码示例的更多相关文章

  1. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  2. 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）

    我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...

  3. jsonp原生js代码示例

    /* mightygumball.js */ /* * get the content of a JSON file using JSONP * update every 3 seconds. * * ...

  4. 一文了解服务端推送（含JS代码示例）

    常用的服务端推送技术,包括轮询.长轮询.websocket.server-sent-event(SSE) 传统的HTTP请求是由客户端发送一个request,服务端返回对应response,所以当服务 ...

  5. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  6. 网页热力图 heatmap js

    HBuilder +js 实现网页热力图 废话不多说,上代码 <!DOCTYPE html> <html> <head> <title>111</ ...

  7. 热力图heatmap.js使用中的思路解析

    官网: https://www.patrick-wied.at/static/heatmapjs/ 需求:使用heatmap.js制作热力图,反映人群分布情况 问题:热力图需要的数据:坐标 + 人数 ...

  8. 中文代码示例之NW.js桌面应用开发初体验

    先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: ...

  9. 【JS】heatmap.js v1.0 到 v2.0，详细总结一下:)

    前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这 ...

随机推荐

  1. e586. Drawing Simple Shapes

    There are two ways to draw basic shapes like circles, ovals, lines, arcs, squares, rectangles, round ...

  2. 使用 const 提高函数的健壮性

    使用 const  提高函数的健壮性 看到 const 关键字,C++程序员首先想到的可能是 const 常量.这可不是良好的条件 反射.如果只知道用 const 定义常量,那么相当于把火药仅用于制作 ...

  3. unity3D绘画手册-----地形及术语解释

    Unity3D教程:设置地形(Terrain) Posted on 2013年04月18日 by U3d / Unity3D 基础教程 /被围观 1,901 次 新建地形: 在菜单中新建一个地形. U ...

  4. Onject.Instantiate实例

    该函数有两个函数原型: Object Instantiate(Object original,Vector3 position,Quaternion rotation); Onject Instant ...

  5. asp.net 后端验证

    using EntryRegistration.Filters; using EntryRegistration.Models.Entity; using System; using System.C ...

  6. 【Java NIO的深入研究】 ServerSocketChannel

    Java NIO中的 ServerSocketChannel 是一个可以监听新进来的TCP连接的通道, 就像标准IO中的ServerSocket一样.ServerSocketChannel类在 jav ...

  7. 使用PHP生成和获取XML格式数据

    1.php生成xml

  8. apk 反编译工具的使用

    在学习android 开发的时候,我们经常回尝试使用到别人的apk,希望能了解别人怎么编写的代码,于是想要一个能实现其反编译的软件,将软件反编译出来,查看其代码. 工具/原料 反编译软件dex2jar ...

  9. Unity 大版本更新之APK的下载与覆盖安装

    作为一个游戏开发者,更新这个技能是必不可少的!更新分为游戏内的更新,也就是所谓的资源热更包括AssetBundle更新和代码更新,代码其实也是所谓的二进制文件,在安卓上和普通资源文件毫无差异,然而在I ...

  10. win8 学习笔记二 输出日志

    Win8 Store App的日志输出不像Desktop App 那么简单,见 这篇文档(http://www.cnblogs.com/xiaokang088/archive/2011/12/27/2 ...