Javascript 放大flot图形后,如何重新定位用于显示高亮显示点信息的工具提示?
目前,我有一个系统,通过使用flot plotclick事件和该事件创建的项来创建可锁定点。我将每个项目存储在一个数组中,初始化如下:Javascript 放大flot图形后,如何重新定位用于显示高亮显示点信息的工具提示?,javascript,jquery,tooltip,selection,flot,Javascript,Jquery,Tooltip,Selection,Flot,目前,我有一个系统,通过使用flot plotclick事件和该事件创建的项来创建可锁定点。我将每个项目存储在一个数组中,初始化如下: for (var i = 1; i < 5; i++){ lockedPoints["Series " + i] = []; } 是否有一种方法可以在缩放后更新锁定点数组,以便使用pageX和pageY重新定位工具提示?当我重新绘制绘图时,pageX和pageY都会发生变化,因此我想知道是否有某种方法可以确定是否突出显示某个点(这将允许我“重新锁定
for (var i = 1; i < 5; i++){
lockedPoints["Series " + i] = [];
}
是否有一种方法可以在缩放后更新锁定点数组,以便使用pageX和pageY重新定位工具提示?当我重新绘制绘图时,pageX和pageY都会发生变化,因此我想知道是否有某种方法可以确定是否突出显示某个点(这将允许我“重新锁定”这些点,存储新的pageX和新的pageY)。我查看了jquery.flot.js代码,发现它们将高亮显示变量存储在数组中,但存储的高亮显示与plotclick事件返回的对象类型不同
缩放前:
缩放后:
请注意缩放后工具提示是如何保持在位的
在这件事上的任何帮助都将不胜感激。谢谢 您可以这样做:
function relocateLockedTips(dataSets) {
// get coordinates from graph, replace "graph" with your id
var graphX = $('#graph').offset().left;
var graphY = $('#graph').offset().top;
// loop over all data series
for (var i = 0; i < lockedPoints.length; i++) {
// loop over locked points for this series
for (var j = lockedPoints[i].length -1; j >= 0; j--) {
var point = lockedPoints[i][j];
// if point is out of zoom range, remove it
if (point.datapoint[0] < minX ||
point.datapoint[0] > maxX ||
point.datapoint[1] < minValue ||
point.datapoint[1] > maxValue) {
$('#lockedPoint' + point.dataIndex).remove();
lockedPoints[i].splice(j);
}
else {
// move tooltip to new coordinates
var newCoords = {
left: graphX + dataSets[i].xaxis.p2c(point.datapoint[0]),
top: graphY + dataSets[i].yaxis.p2c(point.datapoint[1])
};
$('#lockedPoint' + point.dataIndex).offset(newCoords);
}
}
}
}
函数重定位锁定IP(数据集){
//从图形中获取坐标,用id替换“图形”
var graphX=$('#graph').offset().left;
var graphY=$('#graph').offset().top;
//循环所有数据系列
对于(变量i=0;i=0;j--){
var点=锁定点[i][j];
//如果点超出缩放范围,请将其删除
如果(点数据点[0]maxX||
点。数据点[1]最大值){
$('#lockedPoint'+point.dataIndex).remove();
锁定点[i]。拼接(j);
}
否则{
//将工具提示移动到新坐标
var newCoords={
左:graphX+数据集[i].xaxis.p2c(point.datapoint[0]),
顶部:Graphics+数据集[i].yaxis.p2c(point.datapoint[1])
};
$('#lockedPoint'+point.dataIndex).offset(newCoords);
}
}
}
}
PS:工具提示id不应该包括
系列索引吗?因为它现在是另一个系列中具有相同dataIndex
的点的工具提示,可能会覆盖现有的工具提示。回答得好。我唯一要添加的是删除lockedPoints
数组。让每个“工具提示”存储自己的信息更为简洁,jquery通过数据和attr
方法使这一点变得简单。这里有一个例子:谢谢!我要试一试。是,id还需要系列索引。我不久前就意识到了这一点,但我还没有做出改变。马克,我将信息存储在数组中的原因是我希望在取消缩放时保留工具提示。允许工具提示存储自己的信息是否更有益?一旦从屏幕上删除信息,我就无法访问它。正确吗?@user3735633,不是删除它们,而是将它们放在“屏幕外”:我必须使用你的两个答案的组合,但我成功地重新定位了工具提示。我按照你的建议彻底检修了我的扣分系统。它工作得很好。谢谢你们两位。
$(this).bind("plotselected", function(event, ranges){
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
minX = ranges.xaxis.from;
maxX = ranges.xaxis.to;
dataSets = [];
dataSets = chart.getData();
var count = 0;
for (var i = 0; i < 4; i++){
var k = document.getElementById("kValue" + (i + 1));
var a0 = document.getElementById("a0Value" + (i + 1));
var onOff = document.getElementById("switch" + (i + 1));
if (onOff.name == "on"){
dataSets[count].data.push(createData(k, a0));
count++;
}
}
if (ranges.yaxis.from > ranges.yaxis.to){
maxValue = ranges.yaxis.from;
minValue = ranges.yaxis.to;
}
else{
maxValue = ranges.yaxis.to;
minValue = ranges.yaxis.from;
}
options = chart.getOptions();
options.xaxes[0].min = minX;
options.xaxes[0].max = maxX;
options.yaxes[0].min = minValue;
options.yaxes[0].max = maxValue;
if ($("#xAxisLabel").html() == "time (hours)"){ //adjust tickFormatter for different labels
options.xaxis.tickFormatter = function (value) {
return (value / 3600).toFixed(2);
};
}
else if ($("#xAxisLabel").html() == "time (minutes)"){
options.xaxis.tickFormatter = function (value) {
return (value / 60).toFixed(2);
};
}
else{
options.xaxis.tickFormatter = function (value) {
return (value).toFixed(2);
};
}
chart.setData(dataSets);
chart.setupGrid();
chart.draw();
chart.clearSelection(true);
relocateLockedTips(); //not functional. Goal is to make a function that can move tooltips accordingly
});
Math.abs(lockedPoints[item.series.label][i].pageX - item.pageX) < 10
&& Math.abs(lockedPoints[item.series.label][i].pageY - item.pageY) < 10
function relocateLockedTips(dataSets) {
// get coordinates from graph, replace "graph" with your id
var graphX = $('#graph').offset().left;
var graphY = $('#graph').offset().top;
// loop over all data series
for (var i = 0; i < lockedPoints.length; i++) {
// loop over locked points for this series
for (var j = lockedPoints[i].length -1; j >= 0; j--) {
var point = lockedPoints[i][j];
// if point is out of zoom range, remove it
if (point.datapoint[0] < minX ||
point.datapoint[0] > maxX ||
point.datapoint[1] < minValue ||
point.datapoint[1] > maxValue) {
$('#lockedPoint' + point.dataIndex).remove();
lockedPoints[i].splice(j);
}
else {
// move tooltip to new coordinates
var newCoords = {
left: graphX + dataSets[i].xaxis.p2c(point.datapoint[0]),
top: graphY + dataSets[i].yaxis.p2c(point.datapoint[1])
};
$('#lockedPoint' + point.dataIndex).offset(newCoords);
}
}
}
}