javascript - 将工具提示添加到流程图

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

希望能解决这个问题!祝你好运