我在图形下方有一个带有过滤按钮的jquery flot，使用户能够以每周方式或每日方式显示值等。 问题发生在用户点击过滤按钮时，突然创建了第一个图表上方的另一个flot图表并且它一直停留在那里，直到我离开页面并返回页面。
我有以下代码，一旦用户访问该页面就会显示图表; 并且过滤按钮调用具有相同代码但具有不同刻度尺寸的函数（例如，以周为单位）。
PS：我正在使用Phonegap为正常的Android webview准备应用程序。使用的引擎取决于Android版本。
WebKit版本; Ref
代码：
var plot = $.plot("#placeholder", [{
data: dAlle
}], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
markings: [{
yaxis: {
from: 0,
to: 12
},
color: "#F2CDEA"
}, {
yaxis: {
from: rangeMin,
to: rangeMax
},
color: "#D7EEE1"
}]
},
xaxis: {
mode: "time",
minTickSize: [1, "month"],
/*min: theVeryFirstPoint,
max: theVeryLastPoint*/
},
yaxis: {
min: 0,
max: 12
}
});
奇怪的是，同样的逻辑适用于Android的LG G2 API级别19（4.4.2），但是当我将应用程序安装到具有API级别16（4.2.2）的Samsung S2时，会出现此问题。有没有办法防止它发生？
CSS + JS导入如下;
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<link href="css/examples.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.threshold.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.areamarkings.js"></script>
调用的过滤函数;
$("#a-uke").click(function() {
console.log("a dag filtering will be applied...");
var newDataSer = window.localStorage.getItem("storedData");
if (newDataSer != null) {
newDataSer = JSON.parse(newDataSer);
// Just convert into a new array object for the FIRST time
//if (dagButtonClicked == false) {
$.each(newDataSer, function(index, datapoint) {
datapoint[2] = datapoint[0];
datapoint[0] = (new Date(datapoint[0])).getHours();
console.log("hours created : " + datapoint[0]);
dagButtonClicked = true;
});
//}
if (newDataSer != null && newDataSer.length > 0) {
newDataSer.sort(function(x, y) {
console.log("sorting..");
return x[0] - y[0];
})
}
} else
newDataSer = [];
$.plot("#placeholder", [newDataSer], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
areaMarkings: [{
points: [
[7, 12],
[24, 12],
[24, 0],
[7, 0]
],
lineWidth: 0,
fillColor: "#F2CDEA"
}, {
points: [
[7, rangeBr1],
[7, rangeBr2],
[10, rangeBr2],
[10, rangeBr1]
], // Green for breakfast
lineWidth: 0,
fillColor: "#D7EEE1"
}, {
points: [
[7, rangeBr2],
[7, rangeBr3],
[10, rangeBr3],
[10, rangeBr2]
], // Gradient1 Top for breakfast
lineWidth: 0,
fillColor: "#DFE4E3"
}, {
points: [
[7, rangeBr3],
[7, rangeBr4],
[10, rangeBr4],
[10, rangeBr3]
], // Gradient2 Top for breakfast
lineWidth: 0,
fillColor: "#E7DAE6"
}, {
points: [
[7, rangeBrBot2],
[7, rangeBrBot3],
[10, rangeBrBot3],
[10, rangeBrBot2]
], // Gradient1 Bottom for breakfast
lineWidth: 0,
fillColor: "#DFE4E3"
}, {
points: [
[7, rangeBrBot1],
[7, rangeBrBot2],
[10, rangeBrBot2],
[10, rangeBrBot1]
], // Gradient2 Bottom for breakfast
lineWidth: 0,
fillColor: "#E7DAE6"
}, {
points: [
[10, rangeMin],
[10, rangeMaxGrad],
[24, rangeMaxGrad],
[24, rangeMin]
], // Green for the rest
lineWidth: 0,
fillColor: "#D7EEE1"
}, {
points: [
[10, rangeMaxGrad],
[10, rangeMaxGrad2],
[24, rangeMaxGrad2],
[24, rangeMaxGrad]
], // Gradient1 top for the rest
lineWidth: 0,
fillColor: "#DFE4E3"
}, {
points: [
[10, rangeMaxGrad2],
[10, rangeMaxGrad3],
[24, rangeMaxGrad3],
[24, rangeMaxGrad2]
], // Gradient2 top for the rest
lineWidth: 0,
fillColor: "#E7DAE6"
}, {
points: [
[10, rangeMinGrad2],
[10, rangeMin],
[24, rangeMin],
[24, rangeMinGrad2]
], // Gradient1 bottom for the rest
lineWidth: 0,
fillColor: "#DFE4E3"
}, {
points: [
[10, rangeMinGrad3],
[10, rangeMinGrad2],
[24, rangeMinGrad2],
[24, rangeMinGrad3]
], // Gradient2 bottom for the rest
lineWidth: 0,
fillColor: "#E7DAE6"
}]
},
xaxis: {
tickFormatter: getAmPmHour,
min: 7,
max: 24
},
yaxis: {
min: 0,
max: 12
}
});
});
答案 0 :(得分：0)
不确定导致该错误的原因，但您可以尝试两种可能的解决方案：
1）您可以在创建新图之前清除旧图：
$('#placeholder').empty();
$.plot("#placeholder", [newDataSer], { /* your new options */ });
2）您可以使用现有的绘图而不是创建新的绘图（这是推荐的方式）：
plot.setData([newDataSer]);
plot.getOptions().grid.areaMarkings = [ /* your new markings / options */ ];
plot.getOptions().xaxis = { /* your new options */ };
plot.setupGrid();
plot.draw();