目前,我有使用海军报plotclick事件和由该事件所创建的项目创建可锁定点的系统。 余的每个项目存储在像这样初始化一个数组:
for (var i = 1; i < 5; i++){
lockedPoints["Series " + i] = [];
}
图表支持每个系列三个锁定点。 我使用jquery.flot.selection.js作为变焦功能正常工作。 变焦时使可见点的数量是无限的我修改数据。
这是用于确定数据点绘制图形的函数:
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;
}
我用这个功能来执行变焦效果:
$(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事件符合这些资格删除锁定点:
我检查我的所有值达到锁定点的每个系列的金额。
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事件返回同一类型的对象。
缩放之前:
变焦后:
请注意提示变焦后如何保持在原位。
在这个问题上的任何帮助,将不胜感激。 谢谢!