我目前正在查看
http://people.iola.dk/olau/flot/examples/interacting.html的示例,但我无法弄清楚,如何获取数据点的坐标.我不会点击剧情,所以我无法使用事件plotclick.现在我的问题是：有没有另一种方法来获取数据点的x和y坐标,而不点击？我将使用jQuery滑块突出显示图表上的不同点,并希望在数据点旁边有一个工具提示.
提前致谢 ：)
解决方法
稍晚一点,但是在绘制图形之后我运行了这个函数,作为在线图中将标签放在我的绘制数据点下面的一种方式.
$(document).ready(function(){
$(function(){
var data = [
{data: [[1,5],[2,10],[3,15],[4,[5,[6,5]],color: '#3a8df6'},{data: [[1,52],42],32],52]],color: '#ff0000'}
];
var options = {
lines: {show: true},yaxis: {tickDecimals: 0,min: 0,max: 100,autoscaleMargin: null}
};
var graph = $.plot($('#graph'),data,options);
var points = graph.getData();
var graphx = $('#graph').offset().left;
graphx = graphx + 30; // replace with offset of canvas on graph
var graphy = $('#graph').offset().top;
graphy = graphy + 10; // how low you want the label to hang underneath the point
for(var k = 0; k < points.length; k++){
for(var m = 0; m < points[k].data.length; m++){
showTooltip(graphx + points[k].xaxis.p2c(points[k].data[m][0]),graphy + points[k].yaxis.p2c(points[k].data[m][1]),points[k].data[m][1])
}
}
});
});
function showTooltip(x,y,contents){
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',display: 'none',top: y,left: x
}).appendTo("body").fadeIn(200);
}
这不是我的头脑,但基本上,这个函数遍历所有的数据点并使用轴中的p2c函数,然后它将这个(带有一些填充)添加到图形本身的偏移量.然后它只使用正常的工具提示叠加.
此外,如果在条形图上使用此选项,您可以设置工具提示的宽度,给它一个文本对齐的中心,然后如果您希望所有标签都在一行中,那么只需在yaxis p2c函数中放入一个数字.然后使用图形填充将其放置在您想要的位置.
希望这有助于未来的人:)
