在Android的WebView使用海军报的条形图突出海军、突出、条形图、Android
问题是unhighlighting它不再由海军报在Android上的WebView绘制的条形图选择吧。有没有其他问题绘制的实际图（这看起来很漂亮这么简单的事BTW）。我不是非常熟悉在javascript和网页设计/开发方面，但似乎很少应该已被需要的，如果它只是工作！ :(我相信我正确继海军报的API，如果不是有人请尖叫和呼喊我
希望有人已经这样做过，但如果不是我已经得到了最小必要code。在您的机器人捅如果好奇之心想测试。我已经在两个的Nexus问鼎（包括2.2.1）进行测试，并且已经试图用的Andriod 1.5和2.2 SDK的目标（我的本意是针对1.5如果可能的话）。我一直试图在这一步我们谬以千里的长在我自己的。
会发生什么：结果1.图形负载罚款吧。所有酒吧不再高亮度显示。结果2.选择图中的一个酒吧，被罚款突出（和工具提示放置）。结果3.在图中以不同的酒吧，老栏不再高亮度显示，老提示删除，新的酒吧突出显示，并提示放置（仍然没有问题）。结果4.单击图中，则应该unhighlight最后一棒的茫茫夜色中......但事实并非如此。
我已经试过禁用海军报的autohighlight和做手工，以及无济于事。如果填充栏选项在图启用展望海军报本身只获得到drawOverlay（）所在的问题似乎开始......一个更令人不安的bug（？）出现，但我宁愿忘掉了目前。我试着从他们的SVN（R290）最新版本的海军报的，但是从去年公开发行（V0.6）制成没有什么不同。作为一个完整的猜测我想它与WebKit的JavaScript实现（或具体的东西来的Nexus的人，这会不会如此糟糕）的问题，但如果有任何丑陋的黑客只得到它的工作，我所有的耳朵
我直接抛出的图形数据到HTML / JS，而不是处理显示所有参与Java的的code> JavaScript处理和回调。
该HTML被放置在的jquery.js和jquery.flot.js资产/ stats_graph.html（这将加载它在Firefox自己的就好了）：
＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01过渡// ENhttp://www.w3.org/TR/html4/loose！ DTD＆GT;＆LT; HTML和GT; ＆LT; HEAD＆GT; ＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8＆GT; ＆所述; SCRIPT SRC =的jquery.js＆GT;＆下; /脚本＆GT; ＆所述; SCRIPT SRC =jquery.flot.js＆GT;＆下; /脚本＆GT; ＆LT;脚本ID =源LANGUAGE =JavaScript的类型=文/ JavaScript的＆GT; VAR lastItem = NULL; VAR情节= NULL; $（文件）。就绪（函数（）{ //window.testhandler.loadGraph（）; //绑定plotclick这里 $（＃graphHolder）。绑定（plotclick功能（事件，POS，项目）{ 如果（项目）{ VAR lastPoint = NULL; 如果（lastItem！= NULL） lastPoint = lastItem.datapoint; 如果（！pointEquals（lastPoint，item.datapoint））{ //如果（lastItem！= NULL） // plot.unhighlight（lastItem.series，lastItem.datapoint）; lastItem =项目; $（＃提示），删除（）。 //plot.highlight(item.series，item.datapoint）; showTooltip（item.pageX，item.pageY，item.datapoint [1]）; } }否则如果（lastItem！= NULL）{ plot.unhighlight（lastItem.series，lastItem.datapoint）; //没有任何unhighlighting //plot.unhighlight（）; //无法正常工作或，应该unhighlight一切 lastItem = NULL; $（＃提示），删除（）。 } }）; GotGraph（）; }）; / ** *上面显示在图巴的工具提示 * @参数{} INT X左格的坐标 DIV的* @参数{} INT Y顶坐标 * @参数{}字符串文本内容中放置DIV * / 函数showTooltip（X，Y，内容）{ $（'＆LT; DIV ID =工具提示＆GT;'+内容+'＆LT; / DIV＆GT;'）。CSS（{ 位置：绝对， 显示：'无'， 顶部：Y， 左：X， 边框：1px的固体#fdd'， 填充：2px的， 背景颜色：#fee'， 不透明度：0.80 }）appendTo（身体）淡入（200）。 } / ** *绘制图形。这是一个将被Java调用回调 * * @参数{}对象seriesData * @参数{}对象seriesOptions * / 功能GotGraph（）{// seriesData，seriesOptions）{ 变种seriesData = [{ 吧：{的lineWidth：2，秀：真的，barWidth：86400000，调整：中心，补：虚假}， \"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\"}, Y轴：{分：0}， 网格：{点击：真的，autoHighlight：真的，hoverable：虚假}}; 剧情= $ .plot（$（＃graphHolder），seriesData，seriesOptions）; } 功能pointEquals（点1，点2）{ 如果（点1 = NULL＆放大器;！＆放大器;点2 = NULL＆放大器;！＆安培; typeof运算（点1）== typeof运算（点2）及和放大器; point1.length == point2.length）{ VAR我; 对于（i = 0; I＆LT; point1.length;我++）{ 如果（点1 [I]！=点2 [I]） 返回false; } 返回true; } 返回false; } ＆LT; / SCRIPT＆GT; ＆LT; /头＆GT; ＆LT;身体GT; ＆LT; DIV ID =graphHolderSTYLE =高度：200像素;宽度：400像素＆GT;＆LT; / DIV＆GT; ＆LT; /身体GT;＆LT; / HTML＆GT; 必要的onCreate的最小金额code在启动活动：
@覆盖公共无效的onCreate（捆绑savedInstanceState）{ super.onCreate（savedInstanceState）; 的WebView mytestView =新的WebView（本）; mytestView.setLayoutParams（新的LayoutParams（LayoutParams.FILL_PARENT，LayoutParams.FILL_PARENT））; 的setContentView（mytestView）; mytestView.setBackgroundColor（0）; mytestView.getSettings（）setJavaScriptEnabled（真）。 mytestView.setClickable（真）; mytestView.setFocusable（假）; mytestView.setFocusableInTouchMode（假）; mytestView.loadUrl（文件：///android_asset/stats_graph.html）;} 解决方案
没试过，不过看code，调用unhighlight（）不ARGS应该做的。
我的版本的源$ C $ C，以供参考：
函数unhighlight（S，点）{ 如果（S == NULL和放大器;＆放大器;点== NULL）{ 亮点= []; triggerRedrawOverlay（）; } 如果（typeof运算小号==数字） S =系列[S]。 如果（typeof运算点==数字） 点= s.data [要点]; VAR I = indexOfHighlight（S，点）; 如果（ⅰ！= -1）{ highlights.splice（I，1）; triggerRedrawOverlay（）; } } 
The issue is unhighlighting bars which are no longer selected in a bar graph plotted by flot in a WebView on Android. Got no other issues drawing the actual graphs (which look beautiful for something so simple btw). I am not extremely knowledgeable in terms of javascript and web design/development but it seems little should have been needed, if it would just work!! :( I believe I'm following the Flot API correctly, if not someone please scream and yell at me.
Hoping someone has done this before, but if not I've got the minimal necessary code to poke at your droids if inquiring minds would like to test. I've tested on two Nexus Ones (both 2.2.1), and have tried targeting with Andriod 1.5 and 2.2 SDKs (my intention is to target 1.5 if possible). I've been attempting to hack away at this for far to long on my own now.
What happens: 1. Graph loads fine with bars. All bars unhighlighted. 2. Select a bar in graph, gets highlighted fine (and a tooltip is placed). 3. Select a different bar in graph, old bar is unhighlighted, old tooltip removed, new bar highlighted and tooltip placed (still no problems). 4. Click in the vast darkness of the graph which should then unhighlight the last bar... but it doesn't.
I've tried disabling flot's autohighlight and manually doing it as well to no avail. Looking into flot itself and only getting down to drawOverlay() where the issue seems to begin... An even more disturbing bug(?) appears if the fill bar option is enabled in the graph, but I'd rather just forget about that for now. I've tried with the latest version of flot from their svn (r290), but made no different from last public release (v0.6). As a complete guess I'm thinking it's an issue with WebKit's javascript implementation (or something specific to Nexus Ones, which wouldn't be so bad), but if there is any ugly hack to just get it to work I'm all ears.
I've thrown the graph data directly into the html/js, rather than deal with showing all the code involved in the Java->javascript handler and callbacks.
The html is placed in 'assets/stats_graph.html' with jquery.js and jquery.flot.js (this will load just fine on its own in firefox):
<!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>
The minimal amount of code necessary in onCreate in startup activity:
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
WebView mytestView = new WebView(this);
mytestView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
setContentView(mytestView);
mytestView.setBackgroundColor(0);
mytestView.getSettings().setJavaScriptEnabled(true);
mytestView.setClickable(true);
mytestView.setFocusable(false);
mytestView.setFocusableInTouchMode(false);
mytestView.loadUrl("file:///android_asset/stats_graph.html");
}解决方案
Didn't tried, but looking at the code, calling unhighlight() without args should do.
The source code of my version, for reference:
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();
}
}
