Javascript 在Android WebView中使用Flot的条形图并突出显示
问题是，在Android上的WebView中，flot绘制的条形图中不再选择高亮的条形图。对于如此简单的东西，没有其他问题来绘制看起来很漂亮的实际图形。顺便说一句，我对javascript和web设计/开发不是非常了解，但如果它能正常工作的话，似乎不需要什么！！：我相信我正确地遵循了Flot API，如果没有人请对我大喊大叫 希望以前有人这样做过，但如果没有的话，如果好奇的人想测试的话，我有最基本的必要代码来戳你的机器人。我已经在两个Nexus One上进行了测试，都是2.2.1版本，并尝试使用Andriod 1.5和2.2 SDK作为目标。如果可能的话，我的目标是1.5版本。我已经独自尝试破解这个问题很久了 发生了什么： 1.图形加载可以很好地使用条形图。所有的酒吧都不亮。 2.在图形中选择一个条形图，将精细高亮显示，并放置工具提示。 3.在图形中选择另一个条形图，旧条形图未高亮显示，旧工具提示已删除，新条形图高亮显示，工具提示已放置，但仍然没有问题。 4.点击巨大的黑暗的图形，然后应该取消高亮显示最后一个栏。。。但事实并非如此 我尝试过禁用flot的自动高亮显示，并手动执行，但没有效果。审视弗洛特本身，只关注问题似乎开始的地方。。。如果在图形中启用了填充栏选项，则会出现一个更令人不安的错误，但我现在宁愿忘记这一点。我试过使用SVNR290中最新版本的flot，但与上一次公开发布的v0.6没有什么不同。作为一个完整的猜测，我认为这是WebKit的javascript实现或NexusOnes特有的问题，这不会太糟糕，但如果有任何丑陋的黑客让它工作起来，我会洗耳恭听 我将图形数据直接抛出到html/js中，而不是显示Java->javascript处理程序和回调中涉及的所有代码 html与jquery.js和jquery.flot.js一起放置在“assets/stats_graph.html”中，这将在firefox中自行加载：Javascript 在Android WebView中使用Flot的条形图并突出显示,javascript,android,charts,webview,flot,Javascript,Android,Charts,Webview,Flot,问题是，在Android上的WebView中，flot绘制的条形图中不再选择高亮的条形图。对于如此简单的东西，没有其他问题来绘制看起来很漂亮的实际图形。顺便说一句，我对javascript和web设计/开发不是非常了解，但如果它能正常工作的话，似乎不需要什么！！：我相信我正确地遵循了Flot API，如果没有人请对我大喊大叫 希望以前有人这样做过，但如果没有的话，如果好奇的人想测试的话，我有最基本的必要代码来戳你的机器人。我已经在两个Nexus One上进行了测试，都是2.2.1版本，并尝试使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script src="jquery.flot.js"></script>
<script id="source" language="javascript" type="text/javascript">
var lastItem = null;
var plot = null;
$(document).ready(function () {
//window.testhandler.loadGraph();
// bind plotclick here
$("#graphHolder").bind("plotclick", function (event, pos, item) {
if (item) {
var lastPoint = null;
if (lastItem != null)
lastPoint = lastItem.datapoint;
if (!pointEquals(lastPoint, item.datapoint)) {
//if (lastItem != null)
// plot.unhighlight(lastItem.series, lastItem.datapoint);
lastItem = item;
$("#tooltip").remove();
//plot.highlight(item.series, item.datapoint);
showTooltip(item.pageX, item.pageY, item.datapoint[1]);
}
} else if (lastItem != null) {
plot.unhighlight(lastItem.series, lastItem.datapoint); // not unhighlighting anything
//plot.unhighlight(); // doesn't work either, supposed to unhighlight everything
lastItem = null;
$("#tooltip").remove();
}
});
GotGraph();
});
/**
* Show a tooltip above bar in graph
* @param {int} x Left coordinate of div
* @param {int} y Top coordinate of div
* @param {String} contents text to place in div
*/
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y,
left: x,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
/**
* Draw the graph. This is a callback which will be called by Java
*
* @param {Object} seriesData
* @param {Object} seriesOptions
*/
function GotGraph() { //seriesData, seriesOptions) {
var seriesData = [{
"bars":{"lineWidth":2,"show":true,"barWidth":86400000,"align":"center","fill":false},
"data":[[1288569600000,10],[1288656000000,5],[1288742400000,12],[1288828800000,20],[1288915200000,14],[1289001600000,3],[1289174400000,22],[1289260800000,20],[1289347200000,10],[1289433600000,5],[1289520000000,12],[1289606400000,20],[1289692800000,14],[1289779200000,35]]}];
var seriesOptions = {
"xaxis":{"twelveHourClock":false,"minTickSize":[1,"day"],"tickSize":[1,"day"],"timeformat":"%d","mode":"time"},
"yaxis":{"min":0},
"grid":{"clickable":true,"autoHighlight":true,"hoverable":false}};
plot = $.plot($("#graphHolder"), seriesData, seriesOptions);
}
function pointEquals(point1, point2) {
if (point1 != null && point2 != null &&
typeof(point1) == typeof(point2) &&
point1.length == point2.length) {
var i;
for (i=0;i<point1.length;i++) {
if (point1[i] != point2[i])
return false;
}
return true;
}
return false;
}
</script>
</head>
<body>
<div id="graphHolder" STYLE="height:200px;width:400px"></div>
</body>
</html>
没有尝试，但是查看代码，在没有args的情况下调用unhighlight应该可以 我的版本的源代码，供参考：
function unhighlight(s, point) {
if (s == null && point == null) {
highlights = [];
triggerRedrawOverlay();
}
if (typeof s == "number")
s = series[s];
if (typeof point == "number")
point = s.data[point];
var i = indexOfHighlight(s, point);
if (i != -1) {
highlights.splice(i, 1);
triggerRedrawOverlay();
}
}
嘿，我试过运行你的代码，它运行得很好。。你提到的一点是：如果你在黑暗的空间中点击，最后一个栏就会被取消高亮显示，这对我来说非常好。仅供参考：我正在使用flot0.6库。另外，有没有一种方法可以从java代码中设置图形值？有趣的是，你有什么手机，它运行的是什么操作系统版本？如果它只是我的Nexus，我觉得还不错，那么我想我就不做了。是的，你可以很容易地从Java修改整个graph data+选项。基本上，您需要做的就是创建一个新的类/接口来充当处理程序，并使用addJavascriptInterface将其链接到WebView。然后，您可以使用该接口从js调用Java代码，并且可以在加载URLjavascript:functionNameparams后使用WebView调用特定的js函数，并将所有内容作为JSONObject/Array传递。这篇文章有其余的细节：rapidandroid.org/wiki/GraphingI我想我已经找到了问题的答案可能是mudit在emu上进行了测试，在某些情况下，这与手机的实际功能完全不同。Flot使用两个画布绘制，我猜当使用jquery的appendTo/remove特性时，会使用第三个画布，当画布上没有任何元素时，工具提示会被删除，并以某种方式将绘制其他所有内容弄得一团糟。我的快速修复方法是使用flot的OverlyDraw钩子并删除计时器上的工具提示。真正的解决方案是使用flot的覆盖画布添加所有带有挂钩的工具提示图形。当我尝试时会发回。是的，调用unhighlight不起作用，这是在示例代码中，尽管注释掉了。调用unhighlight并指定元素也不起作用。从2.3版开始，我就再也没有尝试过，也没有发现它是否只是Nexus One。我很想知道unlight是否能在你的电脑浏览器中工作。如果它真的是NexusOne bug，我会非常生气。
function unhighlight(s, point) {
if (s == null && point == null) {
highlights = [];
triggerRedrawOverlay();
}
if (typeof s == "number")
s = series[s];
if (typeof point == "number")
point = s.data[point];
var i = indexOfHighlight(s, point);
if (i != -1) {
highlights.splice(i, 1);
triggerRedrawOverlay();
}
}