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

希望它能够清除它！祝你好运

将工具提示添加到flot图表

1 个答案: