Wie erstellt man ein Diagramm mit 2 komplementären Serienbildern mit DecoView lib

Question

Ich versuche ein Raddiagramm zu erstellen, das zB zwei komplementäre seriesItems anzeigt (rote Linie 80%, blaue Linie 20%), die immer 100% ergeben Graph.

In DecoView Github Repo fand ich eine example ähnlich wie ich will, aber ich bin nicht in der Lage, diese Grafik wieder zu rekonstruieren.

ist hier video dieses Beispiel in Aktion @ 1: 30

Wenn mir jemand helfen kann und brechen es für mich, weil es nicht viel Dokumentation für diese lib ist

ich nur bin in der Lage, 2 unabhängige seriesItems hinzuzufügen, aber nicht komplementär

Answer 1

Im People-Beispiel werden die Serien gleichzeitig animiert, um den Eindruck zu vermitteln, dass die zweite Serie die erste Serie entlang schiebt. Dies geschieht mithilfe einer Reihe von zeitgesteuerten Ereignissen.

Bei 3 Sekunden series1 ist auf 19% animiert, dann nach 11 Sekunden animiert series2 zu 45% und gleichzeitig animiert series1 zu 64%. Das bedeutet, dass series1 mitgeschoben wird und die gleichen 19% des sichtbaren Diagramms belegt. Die anderen 45% von series1 sind jetzt von series2 abgedeckt.

Hier ist der Code von SamplePeopleFragment.java, die diese Ereignisse aufstellt:

addAnimation(arcView, mSeries1Index, 19, 3000, imgView, R.drawable.ic_avatar_man, COLOR_BLUE); 
addAnimation(arcView, mSeries2Index, 45, 11000, imgView, R.drawable.ic_avatar_woman, COLOR_PINK); 

arcView.addEvent(new DecoEvent.Builder(64) 
     .setIndex(mSeries1Index) 
     .setDelay(11000) 
     .setDuration(5000) 
     .build()); 

Die addAnimation Funktion hat ein paar Dinge wie Überblendungen Bild Animieren, sind Sie im folgenden Teil der Funktion nur daran interessiert, die Sets up der animierten Serie bewegen:

arcView.addEvent(new DecoEvent.Builder(moveTo) 
     .setIndex(series) 
     .setDelay(delay) 
     .setDuration(5000) 
     .setListener(listener) 
     .build());