放大浮动图后，如何重新定位用于显示有关突出显示的点的信息的工具提示? [英] How can I reposition tooltips used to display information about highlighted points after zooming in on a flot graph?
问题描述
当前，我有一个系统，该系统通过使用flot plotclick事件和该事件创建的项目来创建可锁定的点.我将每个项目存储在初始化为这样的数组中:
Currently, I have a system that creates lockable points by using the flot plotclick event and the item that is created by the event. I store each item in an array initialized like so:
for (var i = 1; i < 5; i++){
lockedPoints["Series " + i] = [];
}
该图每个系列支持三个锁定点.我正在使用jquery.flot.selection.js充当缩放功能.我在缩放时会修改数据，以便可见点的数量是无限的.
The graph supports three locked points per series. I am using jquery.flot.selection.js to work as a zooming feature. I modify the data when zooming so that the amount of visible points is infinite.
这是用于确定图形数据点的功能:
This is the function used to determine the data points to graph:
function createData(kElement, a0Element){
var data = [];
var k;
var a0;
var result;
k = kElement.value;
a0 = a0Element.value;
if (document.getElementById("logCheck").value == "On"){
logarithmic = true;
}
else{
logarithmic = false;
}
for (var i = minX; i <= maxX; i += (maxX - minX) / 1000){
result = a0 * Math.pow(Math.E, (-k * i));
if (logarithmic){
result = Math.log(result);
data.push([i, result]);
}
else{
data.push([i, result]);
}
if (result > maxValue){
maxValue = result;
}
if (result < minValue && result > -400){
minValue = result;
}
}
return data;
}
我使用此功能执行缩放效果:
I use this function to perform the zoom effect:
$(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
});
我将id为"lockedPoint" + item.dataIndex的工具提示附加到文档主体，并且如果plotclick事件符合以下条件，我允许用户删除锁定点:
I append tooltips to the document body with the id of "lockedPoint" + item.dataIndex, and I allow the user to remove a locked point if the plotclick event fits these qualifications:
我检查i的所有值，直到每个序列中的锁点数量.
I check all values of i up to the amount of locked points in each series.
Math.abs(lockedPoints[item.series.label][i].pageX - item.pageX) < 10
&& Math.abs(lockedPoints[item.series.label][i].pageY - item.pageY) < 10
有没有一种方法可以在缩放后更新我的lockedPoints数组，以便可以使用pageX和pageY重新定位工具提示?重新绘制绘图时，pageX和pageY都发生了变化，因此我想知道是否存在某种方法来确定某个点是否突出显示(这将允许我重新锁定"这些点，从而存储新的pageX和新的pageY).我查看了jquery.flot.js代码，发现它们将高亮变量存储在数组中，但是存储的高亮变量与plotclick事件返回的对象类型不同.
Is there a way that I can update my array of lockedPoints after zooming, so I can reposition my tooltips using pageX and pageY? The pageX and pageY both change when I redraw the plot, so I was wondering if there is some sort of method to determine if a point is highlighted (this would allow me to "relock" the points, storing new pageX and new pageY). I looked into the jquery.flot.js code, and I see they store highlight variables in an array, but the highlights stored are not the same type of object returned by a plotclick event.
缩放前:
缩放后:
请注意缩放后工具提示如何保留在位置.
Notice how the tooltip remains in place after zoom.
在此问题上的任何帮助将不胜感激.谢谢！
Any help on this matter would be greatly appreciated. Thanks!
推荐答案
您可以执行以下操作:
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);
}
}
}
}
PS:工具提示ID是否还应包含seriesIndex?由于现在是来自另一个具有相同dataIndex系列的点的工具提示，因此可能会覆盖现有的工具提示.
PS: Shouldn't the tooltip id also include the seriesIndex? As it is now the tooltip for a point from another series with the same dataIndex could overwrite an existing tooltip.
这篇关于放大浮动图后，如何重新定位用于显示有关突出显示的点的信息的工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
