IWDoraemon� 2021-03-25 19:53 采纳率: 100%
浏览 271
已结题

heatmap.js在网页上绘制热力图

请问能在vue写好的页面上用heatmap.js实现热力图吗，查了很多资料都是在一张图片上实现热力图的

  • 写回答

3条回答 默认 最新

  • CSDN专家-杨俊 2021-03-25 22:33
    关注

    直接在页面中引用不就可以么 

    <!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>
    //引入heatmap.js
    <script src="heatmap.js"></script>
    <script type="text/javascript">
    // 创建一个heatmap实例对象
    var heatmapInstance = h337.create({
        container: document.querySelector('#heatmap'),
    });
    //构建一些随机数据点,网页切图价格这里替换成你的业务数据
    var points = [];
    var max = 0;
    var width = 600;
    var height = 400;
    var len = 100;
    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>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 12月11日
  • 已采纳回答 12月3日