Проблема заключается в невыделенных столбцах, которые больше не выделяются на гистограмме, отображаемой с помощью flot в WebView на Android.У меня не возникло никаких других проблем при рисовании реальных графиков (которые, между прочим, выглядят красиво для чего-то такого простого).Я не очень хорошо осведомлен с точки зрения javascript и веб-дизайна / разработки, но, кажется, мало что нужно было, если бы это просто сработало !!:( Полагаю, я правильно следую API Flot, если не кто-то, пожалуйста, кричите и кричите на меня.
Надеюсь, что кто-то уже делал это раньше, но если нет, у меня есть минимально необходимый код, чтобы тыкатьВаши дроиды, если пытливые умы хотели бы протестировать. Я тестировал на двух Nexus One (оба 2.2.1) и пробовал нацеливаться с помощью SDK Andriod 1.5 и 2.2 (я собираюсь нацелиться на 1.5, если это возможно).пытаясь покончить с этим на долгие годы самостоятельно.
Что происходит:
1. График хорошо загружается столбцами. Все столбцы не выделены.
2. Выберите столбец на графике,хорошо подсвечивается (и помещается всплывающая подсказка).
3. Выберите другую полосу на графике, старая полоса не выделена, старая всплывающая подсказка удалена, выделена новая полоска и помещена подсказка (все еще без проблем).
4. Нажмитев бескрайней тьме графика, который затем должен отключить последнюю полосу ... но это не так.
Я пытался отключить автоматическую подсветку flot и вручную, но безрезультатно.Король в сам флот и спускается только к drawOverlay (), где проблема, кажется, начинается ... Еще более тревожная ошибка (?) появляется, если на графике включена опция заполнения панели, но я бы просто забыл об этомтеперь.Я пробовал использовать последнюю версию flot из svn (r290), но не отличался от последнего публичного выпуска (v0.6).Как полное предположение, я думаю, что это проблема с реализацией javascript WebKit (или что-то специфическое для Nexus Ones, что не так уж и плохо), но если есть какой-то уродливый взлом, чтобы просто заставить его работать, я весь слух.
Я бросил данные графика непосредственно в html / js, вместо того, чтобы разобраться с отображением всего кода, задействованного в обработчике Java-> javascript и обратных вызовах.
HTML размещенв 'assets / stats_graph.html' с jquery.js и jquery.flot.js (в 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>
Минимальное количество кода, необходимого в onCreate при запускеактивность:
@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");
}