Comment afficher un popup avec les données d'un point de données dans le graphique Flot?

Question

J'ai obtenu le graphe créé par Flot. Ce que je voulais accomplir, c'est obtenir une sorte d'information lorsque l'utilisateur déplace la souris dessus - le mieux serait de montrer les données (de l'axe x et y) dans une sorte de popup javascript.

Il est probablement question triviale, mais je ne peux pas le comprendre ...

En ce moment, mon javascript ressemble à ceci:

<script id="source" language="javascript" type="text/javascript"> 
$(function() { 
    var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]] 
    $.plot($("#graph_placeholder"), [ data ], { 
     xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", }, 
     lines: { show: true }, 
     points: { show: false }, 
    }); 
}); 
</script> 

donc mieux serait d'obtenir le x: 1251756000000 y: 122.68 en survolant la point (x: 1251756000000, y: tout). Ou même avoir la valeur x formatée comme défini dans le timeformat (2009/11/14).

Answer 1

This example montre comment activer une info-bulle (si vous cliquez sur la case à cocher Activer l'info-bulle). Voici un point de départ en utilisant votre exemple de code:

<script id="source" language="javascript" type="text/javascript"> 
$(function() { 
var data = [[1251756000000, 122.68],[1251842400000, 122.68],[1251928800000, 125.13],[1252015200000, 112.62],[1252101600000, 122.76]] 
$.plot($("#graph_placeholder"), [ data ], { 
    xaxis: { mode: "time", minTickSize: [1, "day"], timeformat : "%y/%m/%d", }, 
    lines: { show: true }, 
    points: { show: true }, 
    grid: { hoverable: true }, 
}); 
}); 

var previousPoint = null; 
$("#graph_placeholder").bind("plothover", function (event, pos, item) { 
if (item) { 
    if (previousPoint != item.datapoint) { 
     previousPoint = item.datapoint; 
     $("#tooltip").remove(); 
     showTooltip(item.pageX, item.pageY, '(' + item.datapoint[0] + ', ' + item.datapoint[1]+')'); 
    } 
} else { 
    $("#tooltip").remove(); 
    previousPoint = null; 
} 
}); 

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', 
     opacity: 0.80 
    }).appendTo("body").fadeIn(200); 
} 
</script>