Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
加载页面qtip2时javascript不工作_Javascript_Html_Qtip_Qtip2 - Fatal编程技术网

加载页面qtip2时javascript不工作

加载页面qtip2时javascript不工作,javascript,html,qtip,qtip2,Javascript,Html,Qtip,Qtip2,我用javascript写了一个很好的热图,到目前为止效果很好。热图基本上是一个带有颜色变化的表,基于表中显示的值的阈值。我使用JavaScript创建表格,并设置颜色。但是,我想显示一个漂亮的弹出窗口,因此当用户将鼠标悬停在表的单元格上时,会显示一些附加信息。我找到了这个图书馆 此函数用于创建热图: function makeTable(data) { var row = new Array(); var cell = new Array();

我用javascript写了一个很好的热图,到目前为止效果很好。热图基本上是一个带有颜色变化的表,基于表中显示的值的阈值。我使用JavaScript创建表格,并设置颜色。但是,我想显示一个漂亮的弹出窗口,因此当用户将鼠标悬停在表的单元格上时,会显示一些附加信息。我找到了这个图书馆

此函数用于创建热图:

function makeTable(data)
    {
        var row = new Array();
        var cell = new Array();
        
        var row_num = 26;
        var cell_num = 44;
        
        var tab = document.createElement('table');
        tab.setAttribute('id', 'mytable');
        tab.border = '1px';
        
        var tbo = document.createElement('tbody');
        
        for(var i = 0; i < row_num; i++){
            row[i] = document.createElement('tr');
            
            var upper = (i+1)*44;
            var lower = i*44;
            for(var j = lower; j < upper; j++){
                cell[j] = document.createElement('td');
                //cell[j].setAttribute('class', 'selector');
                if(data[j] != undefined){
                    var count = document.createTextNode(data[j].diff);
                    cell[j].appendChild(count);
                    var index = parseInt(data[j].diff);
                    /* specify which color better suits the heatmap */
                    if(index >= 0 && index <= 100){
                        cell[j].style.backgroundColor = '#00BFFF';
                    }
                    else if(index > 100 && index <= 1000){
                        cell[j].style.backgroundColor = "#6495ED";
                    }
                    else if(index > 1000 && index <= 4000){
                        cell[j].style.backgroundColor = "#4682B4";
                    }
                    else if(index > 4000 && index <= 6000){
                        cell[j].style.backgroundColor = "#0000FF";
                    }
                    else{
                        cell[j].style.backgroundColor = "#00008B";
                    }
                    row[i].appendChild(cell[j]);
                }
            }
            
            tbo.appendChild(row[i]);
        }
        
        tab.appendChild(tbo);
        document.getElementById('mytable').appendChild(tab);
    }
谢谢


加载时调用whis:google.setOnLoadCallbackOnLoad

加载表后,需要创建qtip,如下所示:

function OnLoad() {
    $.post('index.php/heatmap/getDatalines', 
        function(answer){
            var data = eval('(' + answer + ')');
            var list = [];

            makeTable(data);

            $('#mytable td').qtip({
                overwrite : false,         // make sure it can't be overwritten
                content : {
                    text : function(api){
                        return "Time spent: " + $(this).html();
                    }
                },
                position : {
                    my : 'top left',
                    target : 'mouse',
                    viewport : $(window),  // keep it on-screen at all time if possible
                    adjust : {
                        x : 10, y : 10
                    }
                },
                hide : {
                    fixed : true    // Helps to prevent the tooltip from hiding occassionaly when tracking!
                },
                style : 'ui-tooltip-tipsy ui-tooltip-shadow'
            });
        });
    }

加载表后,需要创建qtip,如下所示:

function OnLoad() {
    $.post('index.php/heatmap/getDatalines', 
        function(answer){
            var data = eval('(' + answer + ')');
            var list = [];

            makeTable(data);

            $('#mytable td').qtip({
                overwrite : false,         // make sure it can't be overwritten
                content : {
                    text : function(api){
                        return "Time spent: " + $(this).html();
                    }
                },
                position : {
                    my : 'top left',
                    target : 'mouse',
                    viewport : $(window),  // keep it on-screen at all time if possible
                    adjust : {
                        x : 10, y : 10
                    }
                },
                hide : {
                    fixed : true    // Helps to prevent the tooltip from hiding occassionaly when tracking!
                },
                style : 'ui-tooltip-tipsy ui-tooltip-shadow'
            });
        });
    }

你把makeTable叫做哪里?你也可以创建一个描述问题的模型吗?你把makeTable称为哪里?你能不能创建一个描述问题的模型?
function OnLoad() {
         $.post('index.php/heatmap/getDatalines', 
                function(answer){
                    var data = eval('(' + answer + ')');
                    var list = [];
                    makeTable(data);
                });
    }
function OnLoad() {
    $.post('index.php/heatmap/getDatalines', 
        function(answer){
            var data = eval('(' + answer + ')');
            var list = [];

            makeTable(data);

            $('#mytable td').qtip({
                overwrite : false,         // make sure it can't be overwritten
                content : {
                    text : function(api){
                        return "Time spent: " + $(this).html();
                    }
                },
                position : {
                    my : 'top left',
                    target : 'mouse',
                    viewport : $(window),  // keep it on-screen at all time if possible
                    adjust : {
                        x : 10, y : 10
                    }
                },
                hide : {
                    fixed : true    // Helps to prevent the tooltip from hiding occassionaly when tracking!
                },
                style : 'ui-tooltip-tipsy ui-tooltip-shadow'
            });
        });
    }