heatmap.js api docs All In One

heatmap.js api docs All In One

https://www.patrick-wied.at/static/heatmapjs/docs.html

config

var nuConfig = {
  radius: 10,
  maxOpacity: .5,
  minOpacity: 0,
  blur: .75
};
heatmapInstance.configure(nuConfig);

add

// a single datapoint
var dataPoint = {
  x: 5, // x coordinate of the datapoint, a number
  y: 5, // y coordinate of the datapoint, a number
  value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);

// multiple datapoints (for data initialization use setData!!) ✅
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);

set

var data = {
  max: 100,
  min: 0,
  data: [
    dataPoint, dataPoint, dataPoint, dataPoint
  ]
};
heatmapInstance.setData(data);


heatmapInstance.setDataMax(200);
// setting the maximum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMax(100);


heatmapInstance.setDataMin(10);
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);

value

heatmapInstance.addData({ x: 10, y: 10, value: 100});
// get the value at x=10, y=10
heatmapInstance.getValueAt({ x: 10, y: 10 }); // returns 100



var currentData = heatmapInstance.getData();
// now let's create a new instance and set the data
var heatmap2 = h337.create(config);
heatmap2.setData(currentData); // now both heatmap instances have the same content


heatmapInstance.getDataURL(); // data:image/png;base64...
// ready for saving locally or on the server

repaint

heatmapInstance.repaint()

demo

window.h337 ok ✅

const importScript = () => {
    if(!window.h337) {
        const script = document.createElement('script');
        script.src = '/libs/heatmap.min.js';
        const body = document.querySelector('body');
        body.appendChild(script);
    }
};

const parentPage = document.getElementById('parentPage');
const heatMapObj = h337.create({
    container: parentPage,
    radius: 30,
    maxOpacity: .5,
    minOpacity: 0,
    blur: .75
});

landing pages / 落地页

<div class="phone-box" >
    <section
        v-show="showHeatMap"
        id="parentPage"
        class="heatmap-box"
        :style="`height: ${dynamicHeight}px;`">
        <img
            id="childPage"
            name="childPage"
            :src="previewCoverUrl"
            style="width: 100%; height: auto;"
            alt="落地页封面"
            srcset=""
        />
    </section>
</div>

    importScript () {
        if(!window.h337) {
            const script = document.createElement('script');
            script.src = '/libs/heatmap.min.js';
            const body = document.querySelector('body');
            body.appendChild(script);
            script.onload = () => {
                this.iframeScroll();
            };
        } else {
            this.iframeScroll();
        }
    },
    iframeScroll (init = true) {
        const img = document.getElementById('childPage');
        if(this.isDragonflyLandingPage && this.showHeatMap && init) {
            setTimeout(() => {
                this.dynamicHeight = img.scrollHeight;
                setTimeout(() => {
                    this.createHeatMap();
                }, 0);
            }, 0);
        }
    },
    createHeatMap () {
        const parentPage = document.getElementById('parentPage');
        this.heatMapObj = h337.create({
            container: parentPage,
            radius: 30,
            maxOpacity: .5,
            minOpacity: 0,
            blur: .75
        });
        // TODO: 缩放 坐标转换
        // 坐标 375px => 300px
        this.heatMapObj.addData({
            x: this.autoConvert(100),
            y: this.autoConvert(100),
            value: 100,
        });
        this.heatMapObj.addData({
            x: this.autoConvert(100),
            y: this.autoConvert(1000),
            value: 100,
        });
    },
    autoConvert (value) {
        const result = (value * 300) / 375;
        return result;
    },
    changeShow (value) {
        if(value) {
            this.iframeScroll(false);
        }
    },

refs

https://www.cnblogs.com/xgqfrms/p/15650383.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---