heatmap.js热力图【html】

最新推荐文章于 2024-06-07 15:37:02 发布

bluejad

最新推荐文章于 2024-06-07 15:37:02 发布

阅读量594

点赞数 9

文章标签： javascript html

本文链接：https://blog.csdn.net/bluejad/article/details/134804890

版权

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 400px;
            height: 800px;
            border: 1px solid;
            border-color: grey;
            background-image: url("../../../assets/images/罐子.png");
            background-size: contain; /* 背景图将会完全显示在区域内，保持宽高比例 */
            background-repeat: no-repeat; /* 禁止背景图重复 */
            background-position: center; /* 将背景图居中显示 */
        }
    </style>
</head>

<body>
    <div id="heatmap"></div>

</body>
<script src="https://cdn.jsdelivr.net/npm/heatmap.js/build/heatmap.min.js"></script>
<script type="text/javascript">
    // 创建一个heatmap实例对象
    // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
    // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
    var heatmapInstance = h337.create({
        container: document.querySelector('#heatmap'),
        // canvas: document.querySelector('#heatmap'), // 其实还可以传canvas对象，看一下源码就知道了，源码很显而易见，代码不多，逻辑清晰，有那么一丝丝感觉有些地方写的不好
        backgroundColor: 'rgba(255,255,255,0)',
        gradient: { // 数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色
            '0': 'blue',
            '0.2': 'blue',
            '0.4': 'green',
            '0.6': 'green',
            '0.8': 'yellow',
            '1': 'red'
        },
        radius: 25, // 设置光圈的半径大小，值>=0,=0取得是默认值
        // opacity: 0.7, // 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值
        maxOpacity: .5, minOpacity: 0,
        // blur: .9
    });
    var points1=generateData(60,180,29,170,80)
    var points2=generateData(100,200,0,150)
    var points3=generateData(160,180,79,120,460)


    var points=[...points1,...points2,...points3]
    var max = points.reduce((max, item) => item.value > max ? item.value : max, points[0].value);
    var data = {
            max: max,
            data: points
        }
    // 57 //因为data是一组数据,web切图报价所以直接setData
    heatmapInstance.setData(data); //数据绑定还可以使用

    function generateData(width,height,len,pos1,pos2) {
        var points = [];
        var max = 0;
        var width = width;
        var height = height;
        var len = len;
        while (len--) {
            var val = Math.floor(Math.random() * 100);
            
            max = Math.max(max, val);
            var point = {
                x: Math.floor(Math.random() * width)+pos1,
                y: Math.floor(Math.random() * height) +pos2,
                value: val
            };
            points.push(point);
        }

        var data = {
            max: max,
            data: points
        }
        return points;
    }


</script>

</html>