Web动态热图插件heatmap.js

所属分类:UI-图表

 29132  278  查看评论 (5)
分享到微信朋友圈
X
Web动态热图插件heatmap.js ie兼容9

使用方法

只需要引入heatmap.min.js文件

<script src="js/heatmap.min.js"></script>

html加入热力图所需要的图片

<div class="heatmap" style="width:538px; height:503px; background:url(images/t.png) no-repeat;">热力图</div>

js

// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
var heatmapInstance = h337.create({
    container: document.querySelector('.heatmap'),
});
//构建一些随机数据点,网页切图价格这里替换成你的业务数据
var points = [];
var max = 100;
var width = 538;
var height = 503;
var len = 5;
while (len--) {
    var val = Math.floor(Math.random() * 1000);
    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); //数据绑定还可以使用
相关插件-图表

jquery.jqplot 绘图插件

jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。
  图表
 46011  374

动态实时折线图

根据时间和数据而动态的折线图
  图表
 75192  513

javript仪表盘插件

javript仪表盘插件,环形效果
  图表
 39267  408

类似芝麻信用占比的插件

这是一块款信用占比的插件
  图表
 24963  375

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    芥末爆珠 0
    2020/6/24 14:32:36
    多少回复才给币啊 回复
    苏格拉底 0
    2019/5/27 15:26:53
    图片?
        SiriBen0
        2019/7/30 14:48:26
        同问,确实我也没看明白这玩意是干啥 的,效果是啥 ,哈哈哈!
        SiriBen0
        2019/7/30 14:49:18
        5QB买张图?哈哈哈
        西瓜0
        2019/7/30 15:08:32
        注意,看原理,根据坐标数据生成热力点。不只是表面一张图那么简单。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复