初识支持云图与鼠标轨迹重演的开源网站分析系统——openwebanalytics

今天有人向我介绍openwebanalytics，开源的，发现其竟然支持热点图（云图or heatmap），同时支持鼠标移动点击轨迹重演。于是很好奇的了解了一下。

官网是：http://www.openwebanalytics.com/

演示地址：http://demo.openwebanalytics.com/

云图的地址是
http://demo.openwebanalytics.com/owa/index.php?owa_do=base.overlayLauncher&owa_document_id=3491704707&owa_overlay_params=siteId%3D%3Ec9b7d12e322c7c360fb8f7c72ffe4c41%7C%7C%7Cperiod%3D%3Elast_seven_days%7C%7C%7Caction%3D%3EloadHeatmap%7C%7C%7Cdocument_id%3D%3E3491704707

轨迹重演

http://demo.openwebanalytics.com/owa/index.php?owa_period=last_thirty_days&owa_document_id=3491704707&owa_do=base.reportDomstreams

 

看了demo后很容易发现问题，鼠标，云图的轨迹都向左偏移。查看了其js获取坐标的代码

//获取坐标
    getCoords : function(e) {
         
        var coords = new Object();
         
        if ( typeof( e.pageX ) == 'number' ) {
            coords.x = e.pageX + '';
            coords.y = e.pageY + '';
        } else {
            coords.x = e.clientX + '';
            coords.y = e.clientY + '';
        }
         
        return coords;
    },
 
//获取滚动条偏移
    getScrollingPosition : function() {
     
        var position = [0, 0];
        if (typeof window.pageYOffset != 'undefined') {
            position = {x: window.pageXOffset, y: window.pageYOffset};
        } else if (typeof document.documentElement.scrollTop != 'undefined' && document.documentElement.scrollTop > 0) {
            position = {x: document.documentElement.scrollLeft, y: document.documentElement.scrollTop};
        } else if (typeof document.body.scrollTop != 'undefined') {
            position = {x: document.body.scrollLeft, y: document.body.scrollTop};
        }
        return position;
    },

 很明显，openwebanalytics仅仅这样获取鼠标坐标跟滚动条偏移值的后果会导致实际坐标有明显的误差，如用户窗口最大化与非最大化时的坐标误差
但这样做的好处就是，鼠标轨迹重演与绘制云图方便。因为忽略了滚动条以及允许上述“坐标误差”。


那要怎样才能尽可能的减少误差？对于宽度固定，宽度自适应100%，又或者系统align=”left”,center,right的系统如何做到统一化？可以看丸迪尔的另一篇文章：地址：http://onedear.iteye.com/blog/1158007