Flot plothover事件绑定后，获取item一直为null、数据混乱的问题

最近项目中在用Flot制作折线图和柱状图，Ajax获取数据，图表能够正常显示，但是在实现鼠标移动后进行提示的功能时，始终无法正常显示提示信息。google里各种查阅相关资料，还是未能解决问题。最后不得已，只能照着一个Flot官方最简单的sin和cos的折线图进行排查，终于发现问题，故总结如下，以免忘记。

最终的效果：

由于开发阶段，数据没有准备齐全，故看起来比较单调。

这里仅以折线图为例，说明我在解决问题的步骤：

1、检查数据：

打印ajax获取到的数据格式，确认没有问题：

获取数据的方法：

function getTestPercent() {
	var url = Util.getContentPath() + "/tt/getPercent.do";
	var tmp = [];
	getPercent(url, tmp);
	return tmp;
}

function getPercent(url, percent) { 
	$.ajax({
		type : "post",
		dataType : "json",
		async : false,
		url : url,
		success : function (data) {
			json = eval(data);
			for (var i = 0; i < 12; i++) { // 一共12个月
				if (!json[i])
					percent.push([i, 0]);
				else 
					percent.push([i, json[i]]);
			}
		}, error : function () {
//			Error("获取数据失败！");
		}
	});
}

function getStudyPlanPercent(percent) {
	var url = Util.getContentPath() + "/spt/getPercent.do";
	var tmp = [];
	getPercent(url, tmp);
	return tmp;
}

准备数据到datasource：

var test = getTestPercent();
	var studyplan = getStudyPlanPercent();
	
	var ds = [ 
		{ data : test, label : "Test"},
		{ data : studyplan, label : "Study Plan"}
	];

用console.debug打印出test和studyplan，确认没有问题。

2、检查参数设置：

var options = {	
		series: {
	        lines: {show: true},
	        points: {show: true}
	    },
		grid: {hoverable: true, clickable: true},
		yaxis : {
			axisLabel: "Percent",
	                axisLabelUseCanvas: true,
	                axisLabelFontSizePixels: 12,
         	        axisLabelFontFamily: 'Verdana, Arial',
	                axisLabelPadding: 3,
			ticks : [[0, "0"], [0.2, "20%"], [0.4, "40%"], [0.6, "60%"], [0.8, "80%"], [1, "100%"]]
		},
		xaxis : {
			axisLabel: "Month",
	                axisLabelUseCanvas: true,
	                axisLabelFontSizePixels: 12,
	                axisLabelFontFamily: 'Verdana, Arial',
	                axisLabelPadding: 10,
			ticks : [[0, "Jan"], [1, "Feb"], [2, "Mar"],
					[3, "Apr"], [4, "May"], [5, "Jun"],
					[6, "Jul"], [7, "Aug"], [8, "Sep"],
					[9, "Oct"], [10, "Nov"], [11, "Dec"]]
		},
	//	legend: {
	//        noColumns: 0,
	//        labelBoxBorderColor: "#000000",
	//        position: "nw"
	//    },
		colors : ["#F90", "#3C4049", "#666", "#BBB"]
	};

具体画折线图的方法及相信参数请参看：http://www.jqueryflottutorial.com/cn/how-to-make-jquery-flot-line-chart.html

确认没有问题。

以上都没有问题，此时已经束手无策了……

今天早上一来，找了一个正常的折线图，跟我的代码进行了一一比较，发现也没有任何问题。在比较css的时候，突然想起可以去看看生成图表的css样式，看看是否是CSS引起的问题，由于本人对CSS不是很熟悉，故一时半会真没想到这个点，此时感觉告诉我，问题很有可能出在css问题上，于是查看生成的折线图的html：

<canvas class="base" width="623" height="350"></canvas>
<canvas class="overlay" width="623" height="350" style="position: absolute; left: 0px; top: 0px;"></canvas>

可以看到，该图标的css为overlay，是不是由于这个css有冲突呢？于是查找整个项目的css文件，果然在loading加载动画的css里边找到了这个问题的罪魁祸首：

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	_padding: 0 20px 0 0;
	background: #f6f4f5;
	display: none;
}

于是修改这个css的名字，在重新查看问题，问题得到解决……

ps：身为Java程序员，不光是能够了解Java的相关技术，javascript、Css、数据都需要全面去了解掌握，由于本人对CSS非常不熟悉，才导致半天没找到问题所在，饶了很大弯路，悲哀啊……

完整js代码：

折线图：

function getTestPercent() {
	var url = Util.getContentPath() + "/tt/getPercent.do";
	var tmp = [];
	getPercent(url, tmp);
	return tmp;
}

function getPercent(url, percent) { 
	$.ajax({
		type : "post",
		dataType : "json",
		async : false,
		url : url,
		success : function (data) {
			json = eval(data);
			for (var i = 0; i < 12; i++) { // 一共12个月
				if (!json[i])
					percent.push([i, 0]);
				else 
					percent.push([i, json[i]]);
			}
		}, error : function () {
//			Error("获取数据失败！");
		}
	});
}

function getStudyPlanPercent(percent) {
	var url = Util.getContentPath() + "/spt/getPercent.do";
	var tmp = [];
	getPercent(url, tmp);
	return tmp;
}

$(function () {
	var test = getTestPercent();
	var studyplan = getStudyPlanPercent();
	
	var ds = [ 
		{ data : test, label : "Test"},
		{ data : studyplan, label : "Study Plan"}
	];
    
	var options = {	
		series: {
	        lines: {show: true},
	        points: {show: true}
	    },
		grid: {hoverable: true, clickable: true},
		yaxis : {
			axisLabel: "Percent",
	        axisLabelUseCanvas: true,
	        axisLabelFontSizePixels: 12,
	        axisLabelFontFamily: 'Verdana, Arial',
	        axisLabelPadding: 3,
			ticks : [[0, "0"], [0.2, "20%"], [0.4, "40%"], [0.6, "60%"], [0.8, "80%"], [1, "100%"]]
		},
		xaxis : {
			axisLabel: "Month",
	        axisLabelUseCanvas: true,
	        axisLabelFontSizePixels: 12,
	        axisLabelFontFamily: 'Verdana, Arial',
	        axisLabelPadding: 10,
			ticks : [[0, "Jan"], [1, "Feb"], [2, "Mar"],
					[3, "Apr"], [4, "May"], [5, "Jun"],
					[6, "Jul"], [7, "Aug"], [8, "Sep"],
					[9, "Oct"], [10, "Nov"], [11, "Dec"]]
		},
	//	legend: {
	//        noColumns: 0,
	//        labelBoxBorderColor: "#000000",
	//        position: "nw"
	//    },
		colors : ["#F90", "#3C4049", "#666", "#BBB"]
	};
	
	var plot = $.plot($("#line-chart"), ds, options);
	var previousPoint = null, previousLabel = null;
	var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    $("#line-chart").bind("plothover", function (event, pos, item) {
        if (item) {
            if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                previousPoint = item.dataIndex;
                previousLabel = item.series.label;
                $("#tooltip").remove();
                  
                var x = item.datapoint[0];
                var y = item.datapoint[1];

                var color = item.series.color;
                //console.log(item);
                showTooltip(item.pageX,
                    item.pageY,
                    color,
                    "<strong>" + item.series.label + "</strong><br>" + monthNames[x] + " : <strong>" + y + "</strong> (%)");
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
	});
});

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 5,
        left: x + 5,
        border: '2px solid' + color,
        padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.8
    }).appendTo("body").fadeIn(200);
}

柱状图：

$(function () {
	count();
	$("#countTypeSel").change(function () {
		count();
	});
	$("#selectMonth").change(function () {
		count();
	});
});

function getShowData (url, data, month) {
	var json = null;
	$.ajax({
		type : "post",
		dataType : "json",
		async : false,
		url : url,
		data : data,
		success : function (data) {
			json = eval(data);
		}
	});
	return json;
}

function count() {
	// x轴标签，默认显示5个
	var ticks = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]];
	// 需要呈现的数据
	var data = [];
	
    // 从后到获取显示的数据
    var isTest = false;
    var url = Util.getContentPath() + "/spt/getEachPercent.do";
    if ($("#countTypeSel").val() == "1") {
	    isTest = true;
	    url = Util.getContentPath() + "/tt/getEachPercent.do";
    }
    var month = $("#selectMonth").val();
    var p = {month : 1};
    var json = getShowData(url, p, month);
    
    // 解析获取到的数据
    var dataArray = [];
    var ticksTmp = [];
    for (var i = 0; i < json.length; i++) {
		var m = json[i]; // test : test , percent : percent
		dataArray.push(m);
		ticksTmp.push([i + 1, i + 1]);
	}
	
    for (var i = 0; i < dataArray.length; i++) {
    	data.push([i + 1, dataArray[i].percent]);
    }
    // 默认显示5个,不足补0
    if (dataArray.length < 5) {
    	for (var i = 1; i <= (5 - dataArray.length); i++) {
		    data.push([data.length + 1, 0]);
    	}	
    } else {
    	ticks.push(ticksTmp);
    }
    
 	var bars = {
		show : true,
		align: "left",
		barWidth : 0.2,
		order : 1,
		lineWidth : 0.2,
		fillColor : {
			colors : [{
					opacity : 0.65
				}, {
					opacity : 1
				}]
		}
 	};
 	var grid = {
 		hoverable : true
 	};
 	var ds = [{label : "Percent", data : data}];
 	var options = {
 		series: {
	        bars: {
	            show: true
	        }
	    },
	    bars : bars,
	    grid : grid,
 		colors: ["#F90", "#3C4049", "#666", "#BBB"],
        xaxis: {
        	axisLabel: "Test / Study Plan ",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
 			ticks: ticks
        }, 
		yaxis: {
			axisLabel: "Percent",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
	    	ticks: [[0, "0"],[0.2, "20%"],[0.4, "40%"],[0.6, "60%"],[0.8, "80%"],[1, "100%"]]}
//	    legend: {
//            noColumns: 0,
//            labelBoxBorderColor: "#000000",
//            position: "nw"
//       	}	
 	};
    
    var tips = "";
    for (var i = 0; i < dataArray.length; i++) {
		$("#s-bar-chart").find(".tickLabel").each(function (j,v){
			if(j == i) {
				if (isTest)
					tips = dataArray[i].test.name;
				else 
					tips = dataArray[i].sp.name;
				$(this).tooltip({title : "name : " + tips});
				return;
			}
		});
    }
    
    $.plot($("#s-bar-chart"), ds, options);
    
    var previousPoint = null, previousLabel = null;
	$("#s-bar-chart").bind("plothover", function (event, pos, item) {
			if (item) {
			    if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
			        previousPoint = item.dataIndex;
			        previousLabel = item.series.label;
			        $("#tooltip").remove();
			
				    var x = item.datapoint[0];
				    var y = item.datapoint[1];
				    //console.log(item.series.xaxis.ticks[x].label);                
				    var color = item.series.color;
				    var name = "";
				    if (isTest)
				    	name = "Test : " + dataArray[previousPoint].test.name;
				    else 
				    	name = "Study Plan : " + dataArray[previousPoint].sp.name;
				    var tips = "<strong>" + name + "</strong><br>" + item.series.label + " : <strong>" + y + "</strong> (%)";
				    showTooltip(item.pageX, item.pageY, color, tips);                
			    }
			} else {
			    $("#tooltip").remove();
			    previousPoint = null;
			}
		}
	);
}