Jquery.flot - Android 4.2.2 WebKit 534.30 在页面上创建第二个图形
Jquery.flot - Android 4.2.2 WebKit 534.30 creates a second graph on the page
我有一个 jquery 图形下方带有过滤按钮的图形，它使用户能够按每周或每天等方式显示值。
问题发生在用户单击过滤按钮时，突然在第一个图表上方创建了另一个浮动图表，并且它一直停留在那里，直到我离开页面并返回页面。
我有以下代码来在用户到达页面时立即显示图表；
过滤按钮调用一个具有相同代码但刻度大小不同（例如周）的函数。
PS：我正在使用 Phonegap 为正常的 Android webview 准备应用程序。使用的引擎取决于 Android 版本。
WebKit 版本； Ref
- Android 4.2.2 534.30（创建了另一个图表）
- Android 4.4.x 537.36（按预期工作）
代码：
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 将应用程序安装到三星 S2 时16级（4.2.2），出现这个问题。有什么方法可以防止它发生吗？
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
}
});
});
不确定是什么导致了该错误，但您可以尝试两种可能的解决方案：
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();
我有一个 jquery 图形下方带有过滤按钮的图形，它使用户能够按每周或每天等方式显示值。 问题发生在用户单击过滤按钮时，突然在第一个图表上方创建了另一个浮动图表，并且它一直停留在那里，直到我离开页面并返回页面。
我有以下代码来在用户到达页面时立即显示图表； 过滤按钮调用一个具有相同代码但刻度大小不同（例如周）的函数。
PS：我正在使用 Phonegap 为正常的 Android webview 准备应用程序。使用的引擎取决于 Android 版本。
WebKit 版本； Ref
- Android 4.2.2 534.30（创建了另一个图表）
- Android 4.4.x 537.36（按预期工作）
代码：
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 将应用程序安装到三星 S2 时16级（4.2.2），出现这个问题。有什么方法可以防止它发生吗？
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
}
});
});
不确定是什么导致了该错误，但您可以尝试两种可能的解决方案：
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();