query flot 直方图上显示对应的y值

方法1：使用在图上加 相对定位的 div 提示对应的直方图数量。

具体实现：获取直方图上所有的点，得到y值和对应的坐标位置，插入相对div

主要js代码：plot 为对应的图对象　

//初始化柱状图数据
            var $query_result = $("#query_result");
            var series = plot.getData();//获取所有的曲线（曲线即一组点）
            for (i = 0; i < series.length; ++i) {
                var s = series[i];
                var points = s.datapoints.points;
                var ps = s.datapoints.pointsize;
                 for (j = 0; j < points.length; j += ps) {//获取所有的点
                    if (points[j] == null)
                        continue;
                    var pageX = parseInt(s.xaxis.p2c(points[j]) + plot.offset().left, 10); //x坐标位置
                    var pageY = parseInt(s.yaxis.p2c(points[j+1]) + plot.offset().top, 10); //y 坐标位置
                    var x = points[j];//x值
                    var y = points[j+1];//y值
                    //插入值
                    $("<div></div>").css({
                        position: "absolute",
                        display: "none",
                        border: "1px solid #fdd",
                        padding: "2px",
                        "background-color": "#fee"
                    }).appendTo($query_result).html(y)
                        .css({top: pageY-30, left: pageX-20}).show();
                 }
            } 

方法2：利用 canvas直接画上去

var plot = $.plot("#placeholder", [data], {
                hooks:{
                    drawOverlay : [drawData]
                }
            });

//初始化柱状图数据
        function drawData(plot, canvascontext){
            canvascontext.font = "Bold 15px Arial"; // 设置字体
            canvascontext.textAlign = "left";// 设置对齐方式
            canvascontext.fillStyle = "#666";// 设置填充颜色
            var series = plot.getData();//获取所有的曲线（曲线即一组点）
            for (i = 0; i < series.length; ++i) {
                var s = series[i];
                var points = s.datapoints.points;
                var ps = s.datapoints.pointsize;
                 for (j = 0; j < points.length; j += ps) {//获取所有的点
                    if (points[j] == null)
                        continue;
                    var x = points[j];//x值
                    var y = points[j+1];//y值
                    canvascontext.fillText(y,                     
                    parseInt(s.xaxis.p2c(points[j])+15, 10),
                    parseInt(s.yaxis.p2c(points[j+1]),10));
                 }
            }    
        };