添加工具提示到flot圖

Question

我是新來的圖表，但我一直在嘗試添加一個工具提示到最近幾個小時的圖表，我只是不斷失敗 所有我想要的是添加工具提示點懸停與文本 - point_number +「評級」

$(function() { 
    var plot = $.plot($("#placeholder"),[ 
     { data: [[0,30],[1,20],[2,0],[3,50],[4,80],[5,16],[6,10],[7,100],[8,80],[9,100]], color: '#8edf00'} 
    ], { 
     series: { 
      lines: { show: true, fill: true, fillColor: '#daff93' }, 
      points: { show: true} 
     }, 
     grid: { 
      color: 'transparent', 
      margin: 10 
     }, 
     xaxis: { 
      min:1, 
      color: '#777', 
      font: { color: '#777777', family: 'sans-serif', size: 11} 
     }, 
     yaxis: { 
      max: 100, 
      min: 0, 
      color: '#777', 
      font: { color: '#777777', family: 'sans-serif', size: 11} 
     } 
    }); 
}); 

jsfidie

的問題是，我想保持圖表儘可能簡單，但都提示非常凌亂四周淨圖表的例子，所以我的天堂」真的找到一個好的教程來做到這一點。

Answer 1

編輯：如果您的固定例如http://jsfiddle.net/Margo/84xgs6we/2/

喜，請我怎麼沒在這裏http://jsfiddle.net/yKG7X/31/

var plot; 
$(function() { 
    //Add tooltip 
    $("#placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
       $("#tooltip").remove(); 

       var x = item.datapoint[0], 
        y = item.datapoint[1]; 
       showTooltip(item.pageX, item.pageY, x + "/" + y); 
       } 
}); 
var d2 = [[0, 1], [1, 2], [2, 3],[3, 4]]; 

var data = [ 
{ 
    color:1, 
    data: d2 
}]; 

var conf = { 
    lines: { show: true }, 
    points: { show: true }, 
    grid: { hoverable: true, clickable: true }, 
}; 

plot = $.plot($('#placeholder'), data, conf); 

}); 

function showTooltip(x, y, contents) { 
    $('<div id="tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y + 5, 
     left: x + 5, 
     border: '1px solid #fdd', 
     padding: '2px', 
     'background-color': '#fee', 
     'border-radius': '10px', 
     opacity: 0.80 
    }).appendTo("body").fadeIn(200).fadeOut(6000); 
} 

希望清除它一起來看看！祝你好運