在浮动图表中添加工具提示

Question

我是图表新手，但最近几个小时我一直在尝试向图表添加工具提示，而我一直想让我做的就是在文本上悬停点上添加工具提示-point_number +“ rating”

$(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);
}

希望它能清除它！ 祝好运