Die Frage Hervorhebungen ist unhighlighting Bars, die nicht mehr in einem Balkendiagramm von flechten in einem WebView auf Android aufgetragen wird ausgewählt. Es gab keine anderen Probleme beim Zeichnen der tatsächlichen Grafiken (die für etwas so einfach aussehen btw). Ich bin nicht sehr gut in Bezug auf Javascript und Webdesign/Entwicklung, aber es scheint, dass wenig hätte gebraucht werden müssen, wenn es nur funktionieren würde !! :(Ich glaube, dass ich die Flot API richtig befolge, wenn nicht jemand bitte schreie und schreie mich an.Mit Flot der Bar Graph in einem Android WebView mit
Ich hoffe, jemand hat das schon mal gemacht, aber wenn nicht, habe ich den minimal notwendigen Code, um deine Droiden anzupinkeln Wenn anfragende Köpfe gerne testen würden, habe ich zwei Nexus Ones (beide 2.2.1) getestet und versucht, mit Andriod 1.5 und 2.2 SDKs zu targetieren (meine Absicht ist es, wenn möglich 1.5 zu erreichen) auf diese hacken für viel zu lange auf meiner eigenen jetzt
Was geschieht:...
1. graph Lasten mit Bars feinen Alle Bars nicht markierten
2. Bar Wählen Sie im Diagramm, wird fein hervorgehoben (und ein Tooltip wird platziert.)
3. Wählen Sie eine andere Leiste in der Grafik aus, die alte Leiste ist nicht hervorgehoben, die alte Werkzeugspitze wurde entfernt, die neue Leiste hervorgehoben und die Tooltip platziert (immer noch keine Probleme).
4. Klicken Sie in der großen Dunkelheit des Graphen, die dann den letzten Takt hebt sie soll ... aber es funktioniert nicht.
Ich habe versucht, flicht der autohighlight deaktivieren und manuell als auch ohne Erfolg zu tun. Blicken Sie in floot selbst und kommen Sie nur zu drawOverlay(), wo das Problem zu beginnen scheint ... Ein noch beunruhigenderer Bug (?) Erscheint, wenn die Füllbalken-Option in der Grafik aktiviert ist, aber ich würde das lieber einfach vergessen zur Zeit. Ich habe versucht, mit der neuesten Version von Flot aus ihrer Svn (R290), aber nicht anders als letzte öffentliche Veröffentlichung (v0.6). Als eine ganze Vermutung denke ich, es ist ein Problem mit WebKit Javascript-Implementierung (oder etwas speziell für Nexus Ones, die nicht so schlimm wäre), aber wenn es einen hässlichen Hack, nur um es zur Arbeit zu bekommen, bin ich ganz Ohr .
Ich habe die Grafikdaten direkt in die HTML/Js geworfen, anstatt mich damit zu beschäftigen, den gesamten Code zu zeigen, der in den Java-> JavaScript-Handlern und Callbacks enthalten ist.
Die html platziert in dem Vermögen/stats_graph.html 'mit jquery.js und jquery.flot.js (dies wird laden ganz gut auf seinem eigenen 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>
Die minimale Menge an Code notwendig in onCreate in Start Aktivität:
@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");
}
Hey, habe ich versucht, den Code ausgeführt wird, und es ist ziemlich gut funktioniert .. Ein Punkt von Ihnen genannten: Wenn Sie in den dunklen Raum klicken das sollte dann heben Sie den letzten Balken auf, es funktioniert vollkommen in Ordnung für mich. Zu Ihrer Information: Ich benutze flot0.6 lib. Und gibt es eine Möglichkeit, den Graphenwert aus Java-Code zu setzen? – mudit
Interessant, welches Telefon hast du und welche OS Version läuft es? Wenn es sich herausstellt, dass es nur meine Nexus-Ones sind, dann fühle ich mich nicht so schlecht, denke, ich werde es einfach lassen. – Nicholi
Und ja, Sie können einfach die gesamte Grafik Daten + Optionen von Java ändern. Im Wesentlichen müssen Sie nur eine neue Klasse/Schnittstelle erstellen, die als Handler fungiert und diese mit addJavascriptInterface() mit dem WebView verknüpfen.Sie können dann von js mit der Schnittstelle zum Java-Code von js zurückrufen, und Sie können spezifische js-Funktionen aufrufen, indem Sie die WebViews (nachdem sie einmal geladen wurden) loadUrl ("javascript: functionName (params)") übergeben und alles als JSONObjects/Arrays übergeben . Dieser Artikel hat den Rest der Details: rapidandroid.org/wiki/Graphing – Nicholi