2012-07-03 5 views
7

Ich denke, der Titel gibt die meisten meiner Fragen weg, aber wir Detail ist und ein wenig Hintergrund geben:Meine Android AChartEngine funktioniert bereits, aber wie sieht es gut aus?

ich eine Android-App haben konzentrierte sich vor allem für Tabletten, die ein paar verschiedene Echtzeitdaten in Zeitdiagramme Anzeige erscheint. So habe ich bereits einen Dienst, um mit der Datenquelle zu kommunizieren, die die Daten erfasst, analysiert und die Werte zu den Singletons TimeSeries hinzufügt. Wenn der Benutzer navigiert in und aus Fragmenten fügt das Fragment einfach die richtigen Timeseries und hält mChartView.repaint(); ruft alle 500ms

, dass die operative All ist und arbeiten gut über Registerkarten, Rotation, Benachrichtigung usw.

Da es sich um eine Tablette ist App Ich möchte zwei Dinge erreichen: 1) Maximierung der Sichtfläche; 2) es gut aussehen lassen.

1) Ich habe bereits die Zoom-Tasten entfernt (aus irgendeinem Grund, wenn ich versuche, sie hinzuzufügen, gibt es NullException) mit mRenderer.setZoomButtonsVisible(false); aber es gibt immer noch einen riesigen unteren Rand, der viel Platz auf dem Bildschirm einnimmt. Ich habe versucht, eine negative Grenze zu setzen, und es funktioniert, aber die Etiketten bewegen sich nicht mit dieser Grenze und ich lande damit, dass die X-Achse die Etiketten kreuzt oder sie sogar passiert. Wie kann ich die Beschriftungen mit der Umrandung verschieben oder sie oben auf der Grafik platzieren?

2) a) Die App kann vom Benutzer konfiguriert werden, um entweder Holo_Dark oder Holo_light zu verwenden. Also verwende ich einen transparenten Hintergrund auf dem Renderer (siehe Ausschnitt unten), um die schöne Hintergrundschattierung zu zeigen, die holo macht. Wie ändere ich die Achsenfarbe? Ich habe die mRenderer.setAxesColor(color) gefunden, aber es ändert nur die Zeile, nicht den Text.

int color = Color.argb(0, 255, 255, 255); // Transparent colour 
    mRenderer.setBackgroundColor(color); 
    mRenderer.setMarginsColor(color); 

b) die Y-Achse auf ihm die Etiketten kreuzt, wie kann ich versetzt sie ein wenig nach links, so dass der Text lesbar ist,? (es ist nicht mit setMargins())

c) wenn der Benutzer zoomen und schwenken um das Diagramm, stoppt das Diagramm aktualisieren/erneut zoomen die neuesten Werte auf dem Bildschirm und der Benutzer müssen schwenken, um die neuesten Werte zu sehen. Ich habe eine Schaltfläche "Zoom zurücksetzen" auf der ActionBar hinzugefügt, aber ich kann es nicht funktionieren lassen. Was wäre der Code, um die Werte wieder zu aktualisieren?

d) Wenn meine TimeSeires einen Bereich von 10min (2 Werte pro Sekunde) haben, wie kann ich nur die letzten 1min anzeigen lassen (zum Beispiel) und wenn der Benutzer die vorherigen Werte möchte, kann er zurückschwenken? (Und die Verwendung Taste auf c) Wiederanlauf)

im Moment ist mein gemacht Setup als:

int color = Color.argb(0, 255, 255, 255); // Transparent colour 
    mRenderer.setBackgroundColor(color); 
    mRenderer.setMarginsColor(color); 
    mRenderer.setAxisTitleTextSize(16); // 16 
    mRenderer.setChartTitleTextSize(20); // 20 
    mRenderer.setLabelsTextSize(15); // 15 
    mRenderer.setLegendTextSize(15); // 15 
    mRenderer.setPointSize(0); // 10 
    mRenderer.setMargins(new int[] { 20, 30, 15, 0 });  
    mRenderer.setZoomButtonsVisible(false); 
    mRenderer.setShowAxes(true); 
    mRenderer.setShowLegend(true); 
    mRenderer.setShowGridX(true); 
    mRenderer.setShowLabels(true); 

und jede gerenderte hinzugefügt, um die Multiple-Renderer geht so:

renderer.setDisplayChartValues(false); 
    mRenderer.addSeriesRenderer(renderer); 

Vielen Dank für die Hilfe!

Schnitt nur meinen letzten Code enthält, für andere zu sehen:

Ich habe völlig die Legende Notwasserung landet und meine eigene Legende Implementierung über dem Diagramm schweben, so dass das Layout ist ein FrameLayout mit einem Chartview und ein TableLayout.

Ich habe eine abstrakte CurvesFragment-Klasse implementiert, die um einige Klassen erweitert wurde.

konfiguriere ich das Diagramm während meines Fragments OnCreateView wie:

mChartView = ChartFactory.getTimeChartView(getActivity().getApplicationContext(), mDataset, mRenderer, "HH:mm:ss"); // X axis in a time scale 
    // Setup chart renderer ============================= 
    mRenderer.setLabelsTextSize(15); // Text size 
    mRenderer.setMargins(new int[] { 0, Utils.convertToPx(5, getActivity().getApplicationContext()), 0, 0 }); // 5dp on the left to show that little line 
    mRenderer.setZoomButtonsVisible(false); // bye bye zoom 
    mRenderer.setShowAxes(true); // show both axes 
    mRenderer.setShowLegend(false); // bye bye legend 
    mRenderer.setShowGridX(true); // X grid helps identify values 
    mRenderer.setShowLabels(true); // See the values 
    mRenderer.setYLabelsAlign(Align.LEFT); // put the Y labels on the left of the axis 
    if (Utils.getCurrentTheme(getActivity().getApplicationContext()) == android.R.style.Theme_Holo) { 
     mRenderer.setXLabelsColor(getResources().getColor(android.R.color.primary_text_dark)); 
     mRenderer.setYLabelsColor(0, getResources().getColor(android.R.color.primary_text_dark)); 
     mRenderer.setMarginsColor(getResources().getColor(android.R.color.background_dark)); 
     legend.setBackgroundResource(R.drawable.border_dark); 
    } else { 
     // same as above but for Holo_light 
    } 
    // And from here proceed to add the TimeCharts with using 
    renderer.setDisplayChartValues(false); 

Auf meiner Aktionsleiste I die Tasten für Pause/Resume und ResetZoom. die Reset-Zoom ist einfach:

 mRenderer.setXAxisMax(-Double.MAX_VALUE); 
     mRenderer.setXAxisMin(Double.MAX_VALUE); 
     mRenderer.setYAxisMax(-Double.MAX_VALUE); 
     mRenderer.setYAxisMin(Double.MAX_VALUE); 
     mChartView.repaint(); 

Es gibt einen Hintergrunddienst, Verweise auf die Timeseries hält, die immer frische Daten aus dem WiFi liest und sie in die Serie hinzufügen. Auf diese Weise in dem Fragment gibt es eine runnable alle 700ms ausgeführt werden, die repaint() aufruft, wie:

// Chart rendering control ======================== 
private Runnable updateDataSet = new Runnable() { 

    public void run() { 
     if (!chartPaused) { 

      double max = mRenderer.getXAxisMax(); // get renderer maximum value 
      double min = mRenderer.getXAxisMin(); // get renderer minimum value 

      // Check if the user scrolled/zoomed/panned the graph or if it's on 'auto' 
      if (!((max == Double.MAX_VALUE || max == -Double.MAX_VALUE) && (min == Double.MAX_VALUE || min == -Double.MAX_VALUE))) { 

       double newMax = mDataset.getSeriesAt(0).getMaxX(); // new max is the latest value from our series 
       double newMin = newMax - Math.abs(max - min); // new min value is the X range the user zoomed into 
       mRenderer.setXAxisMax(newMax); // set the new values 
       mRenderer.setXAxisMin(newMin); 
      } 

      // Logic that updates the TableLayout with the legend is placed here 

      mChartView.repaint(); 
     } 

     getView().postDelayed(updateDataSet, 700); 
    } 
}; 

und es gibt eine ZoomListener und ein PanListener, dass das Diagramm der Benutzer jedes Mal, pausiert sie berührt. Auf diese Weise kann der Benutzer zoomen und schwenken, aber wenn die Diagrammaktualisierung fortgesetzt wird, wird nur nach den frühesten Daten geblättert, ohne die Zoomstufe zu ändern.

Ich denke, das Endergebnis ist ziemlich solide und sieht sowohl Holo_Light als auch Holo_Dark gut aus.

Dank ein LOT für Dan für die Antworten und für alle anderen Entwickler, die die Engine erstellt.

happy coding!

Antwort

14

Frage 1. Sie können versuchen, mit diesen API-Aufrufe zu spielen:

mRenderer.setShowLegend(false); 

oder

mRenderer.setMargins(new int[] {top, left, bottom, right}); 

Vielleicht den unteren Wert verringern?

Frage 2. a)

mRenderer.setXLabelsColor(); 
mRenderer.setYLabelsColor(); 

b)

mRenderer.setXLabelsAlign(); 

c)

Ich glaube, Sie folgendes tun können, wenn die Serie neue Werte erhalten:

mRenderer.setXAxisMin(); 
mRenderer.setXAxisMax(); 

Geben Sie die Werte x min und x max als den darzustellenden Bereich an und rufen Sie mChartView.repaint(); danach.

d) Das gleiche wie für c)

Als Vorschlag, versuchen Sie es so lange Fragen in mehrere kleinere aufteilen und Sie können Antworten schneller. Es gibt nicht viele ACE-Benutzer, die wissen, wie man alle Fragen beantwortet. Selbst der Autor dieser Bibliothek muss über einige Antworten nachdenken :)

+1

Hallo Dan. Danke für die Information. Das ist Teil eines Engineering-Projekts und die Diagramme sind Echtzeitdaten von der Maschine, die wir entwickeln. Im Moment musste ich die Android App unterbrechen, um mit dringenderen Dingen fertig zu werden, aber ich werde in ein paar Tagen wieder da sein und alle deine Vorschläge testen. ps.: "Selbst der Autor dieser Bibliothek muss über einige Antworten nachdenken:)" Ich habe dein Profil überprüft, also bist du der Autor. Vielen Dank für die Achartechnik selbst und für die Antworten. – Budius

+0

e) Zum Entfernen des Scrollens dieses Diagramms: mRenderer.setZoomEnabled (false); mRenderer.setPanEnabled (false); – ViJay

1

Zum Entfernen des Scrollens dieses Diagramms: mRenderer.setZoomEnabled (false); mRenderer.setPanEnabled (false);

Verwandte Themen