Flot 그래프에서 데이터 포인트의 데이터로 팝업을 표시하는 방법은 무엇입니까?

Question

Flot으로 만든 그래프가 있습니다. 내가 성취하고자했던 것은 사용자가 마우스를 움직일 때 일종의 정보를 얻는 것입니다. 가장 좋은 방법은 자바 스크립트 팝업에서 (x 축과 y 축에서) 데이터를 보여주는 것입니다.

그것은 아마 사소한 질문입니다,하지만 난 그것을 알아낼 수 없습니다 ...

는 지금 내 자바 스크립트는 다음과 같습니다

<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> 

그래서 최고의 얻을 수있을 것 x: 1251756000000 y: 122.68 유혹 할 때 포인트 (x : 1251756000000, y : 모두). 또는 timeformat (2009/11/14)에 정의 된대로 x 값의 형식을 지정하십시오.

Answer 1

This example은 도구 설명 활성화 방법을 보여줍니다 (도구 설명 사용 확인란을 클릭 한 경우). 다음은 예제 코드를 사용하는 출발점입니다.

<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>