Antworten zum Thema „Kreisdiagramme mit as“

kleeaar · 15.06.2009

Hi Folks

Ich hab mal aus Eigeninteresse versucht ein Kreisdiagramm komplett dynamisch mit ActionScript2.0 zu erstellen.
War mehrere Tage verdammt harte arbeit, aber es ist etwas dabei rausgekommen.

Jetzt überlege ich mir ob ich ein Tutorial dafür schreiben soll...

Schaut euch doch mal das Diagramm an und sagt mir, ob ihr Interesse habt

Vielleicht gibt´s noch Änderungsvorschläge?!

Grüße

kleeaar · 18.07.2009

AW: Kreisdiagramme mit as

So!
Ich habe jetzt endlich mal ein kleines Tutorial geschrieben:
)

Grüße

h_seldon · 20.07.2009

AW: Kreisdiagramme mit as

wow, sehr schön gemacht! Schon das frühere Beispiel mit den Balkendiagrammen hat mir sehr gut gefallen.

Im Code könnte man noch kleinere Änderungen durchführen:

- der Code am Ende des Workshops funktioniert bei mir nicht (vielleicht bin ich auch nur zu blöd zum Kopieren - sorry), der in dem ersten post dagegen schon.
- es macht nicht wirklich Sinn, erst einen prototype draw einzurichten und ihn dann später zu überschreiben. Eine Prototypisierung soll die Arbeit erleichtern, indem Code, den man mehrfach benötigt, auf eine einfache Weise zur Verfügung gestellt wird (würde man heute eher mit einer entsprechenden Klasse lösen)
- gleiches gilt für die Schleife, die gleich mehrfach den Prototypen überschreibt
- das mit der Maske habe ich leider nicht verstanden (sorry)
- das enterFrame für das Einblenden wird nicht gelöscht
- es wird auch nicht der Wert von m kontrolliert

Hier eine Variante, die statt curveTo mit lineTo arbeitet (die komplizierten Berechnungen, die bei einer quadratischen Bezier nötig sind, um einen Kreis zu erstellen, gehen über meinen bescheidenen Verstand hinaus, daher lineTo):

PHP:

//----------------------- import -----------------------
import flash.filters.*;
//----------------------- prototypes -----------------------
MovieClip.prototype.kreis = function(pZentrum:Array, pWinkel:Number, pAusschnitt:Number, pStil:Array, pFuell:Array) {
	this.lineStyle(pStil[0],pStil[1],pStil[2]);
	this.beginFill(pFuell[0],pFuell[1]);
	this.moveTo(pZentrum[0],pZentrum[1]);
	var nPosX:Number = Math.cos(pWinkel*(Math.PI/180))*nRadius;
	var nPosY:Number = Math.sin(pWinkel*(Math.PI/180))*nRadius;
	this.lineTo(nPosX,nPosY);
	for (var i:Number = 0; i<pAusschnitt; i++) {
		pWinkel += nWinkelAdd;
		nPosX = Math.cos(pWinkel*(Math.PI/180))*nRadius;
		nPosY = Math.sin(pWinkel*(Math.PI/180))*nRadius;
		this.lineTo(nPosX,nPosY);
	}
	this.lineTo(pZentrum[0],pZentrum[1]);
	nWinkel = pWinkel;
	this._alpha = 0;
	this.filters = [fGlowFilter];
	this._parent.aAusschnitte.push(this);
	tBeschriftung = mDiagrammTxt.createTextField("txt"+mDiagrammTxt.getNextHighestDepth(), mDiagrammTxt.getNextHighestDepth(), 0, 0, 1, 1);
	tBeschriftung.autoSize = "left";	
	tBeschriftung.text = aBeschriftungen[nIndexWerte]+": "+prozent(pAusschnitt,2)+" %";
	tfFormat.color = aFarben[nIndexFarben];
	tBeschriftung.setTextFormat(tfFormat);
	tBeschriftung._x = nRadiusText;
	tBeschriftung._y = nIndexWerte*tBeschriftung._height-nRadius;
	updateAfterEvent();
};
//----------------------- vars -----------------------
var mDiagramm:MovieClip, mAusschnitt:MovieClip, mDiagrammTxt:MovieClip;
var nSumme:Number = 0;
var nAlpha:Number = 10;
var nRadius:Number = 100;
var nRadiusText:Number = 130;
var nWinkel:Number = -90;
var nWinkelAdd:Number;
var nIndexWerte:Number = 0;
var nIndexFarben:Number = 0;
var nInterval:Number;
var nDauer:Number = 1000;
var aWerte:Array = new Array(30, 65, 47, 19, 34, 59, 30, 52);
var aBeschriftungen:Array = new Array("Frage 1", "Frage 2", "Frage 3", "Frage 4", "Frage 5", "Frage 6", "Frage 7", "Frage 8");
var aFarben:Array = new Array(0xD62118, 0xF79431, 0xFFDE29, 0x528C73, 0x5A8CD6, 0x393984, 0x631039, 0x000000);
var fDropFilter1 = new DropShadowFilter(7, 120, 0x000000, 0.7, 8, 8, 1, 3, false, false, false);
var fDropFilter2 = new DropShadowFilter(10, 120, 0xFFFFFF, 0.5, 20, 20, 1, 3, true, false, false);
var fGlowFilter = new GlowFilter(0xE7E7E7, 0.4, 3, 3, 3, 3, true, false);
var tBeschriftung:TextField;
var tfFormat:TextFormat = new TextFormat();
//----------------------- functions -----------------------
function prozent(pZahl:Number, pStellen:Number) {
	var nProzent:Number = (pZahl * 100)/nSumme;
	nProzent = Math.floor(nProzent * Math.pow(10,pStellen))/Math.pow(10,pStellen);
	return nProzent;
};
function zeichnen(pWo:MovieClip) {
	mAusschnitt = pWo.createEmptyMovieClip("aus", mDiagramm.getNextHighestDepth());
	mAusschnitt.kreis([0, 0],nWinkel,aWerte[nIndexWerte],[1, 0x000000, 100],[aFarben[nIndexFarben], 100]);
	nIndexWerte++;
	if (nIndexWerte == aWerte.length) {
		clearInterval(nInterval);
	}
	nIndexFarben++;
	if (nIndexFarben == aFarben.length) {
		nIndexFarben = 0;
	}
}
function einblenden() {
	for (var i:Number = 0; i<this.aAusschnitte.length; i++) {
		this.aAusschnitte[i]._alpha += nAlpha;
		if (this.aAusschnitte[i]._alpha>=100) {
			this.aAusschnitte[i]._alpha = 100;
			this.aAusschnitte.splice(i,1);
			this.nEingeblendet++;			
			if (this.nEingeblendet == aWerte.length) {
				delete this.onEnterFrame;
			}
		}
	}
}
function initDiagramm() {
	tfFormat.size = 12;
	tfFormat.font = "Arial";
	tfFormat.bold = true;
	for (a in aWerte) {
		nSumme += aWerte[a];
	}
	nWinkelAdd = 360/nSumme;
	mDiagramm = this.createEmptyMovieClip("behDiagramm", this.getNextHighestDepth());
	mDiagramm._x = Stage.width/2;
	mDiagramm._y = Stage.height/2;
	mDiagramm.aAusschnitte = [];
	mDiagramm.nEingeblendet = 0;
	mDiagramm.filters = [fDropFilter1, fDropFilter2];
	mDiagrammTxt = this.createEmptyMovieClip("behDiagrammTexte", this.getNextHighestDepth());
	mDiagrammTxt._x = mDiagramm._x;
	mDiagrammTxt._y = mDiagramm._y;
	zeichnen(mDiagramm);
	nInterval = setInterval(this, "zeichnen", nDauer, mDiagramm);
	mDiagramm.onEnterFrame = einblenden;
}
//----------------------- start -----------------------
initDiagramm();

kleeaar · 20.07.2009

AW: Kreisdiagramme mit as

woha...
du hast da aber ordentlich aufgeräumt!
Hast du jetz mal so kurzer Hand umgeschrieben?
Du bist gelernter Programmierer?
ich habs mir nämlich nur selber beigebracht, und kenne deshalb gar nicht alle Befehle und Regeln an die man sich halten sollte...

Ich werde mir mal deinen Code genauer unter die Lupe nehmen!
Vielen Dank für die aufschlussreiche Kritik!

Grüße

ps: ich glaube du hast den Code bei mir nur falsch copiert, denn bei mir geht er!

NGangsta · 20.07.2009

AW: Kreisdiagramme mit as

Ich bin begeistert ich probiere es gleich aus !

Danke :-*

h_seldon · 21.07.2009

AW: Kreisdiagramme mit as

@ kleeaar,

nein, kein Programmierer, sondern ebenfalls Quereinsteiger, aber immerhin mit - großzügig gerundet - 10 Jahren Programmier- und Lehrerfahrung in diversen Sprachen. Und nicht zuletzt durch die Arbeit an meinem Actionscript-Lehrbuch bin ich genötigt, etwas saubereren Code zu schreiben, schließlich sollen andere das auch noch lesen

Es hilft, wenn man sich an einem (gerne recht simplen) Framework orientiert, also z.B. den Code in einzelne Blöcke unterteilt. Dann zwingt man sich nämlich selbst, strukturierter vorzugehen und erhält einen halbwegs lesbaren und pflegbaren Code.

Wenn Du mein Beispiel anschaust, wirst Du merken, dass da noch viel Raum für Optimierung besteht, z.B.:

- cos und sin wird mehrmals berechnet; schöner wäre eine Funktion, die den betreffenden Wert zurückgibt anstatt dasselbe mehrfach auszuführen
- die initDiagramm() müsste so geschrieben werden, dass man beliebig viele Diagramme neben- und/oder nacheinander haben kann; hier ist alles nur auf ein konkretes Beispiel angelegt
- Klasse statt prototype, was mittlerweile eigentlich veraltet ist (obwohl es ja für AS2 gute Dienste geleistet hat); oder einfach parametrisierte Funktion (die aber gegenüber einer Klasse dann den Nachteil hat, dass man sie für jede App immer wieder neu schreiben muss)

Ich habe das mal so nach dem Lesen Deines Codes geschrieben und müsste noch aufräumen, aber wird ja auch so klar, was gemeint ist.

Viel Spass

h_seldon · 22.07.2009

AW: Kreisdiagramme mit as

Nachschlag:

- einen simplen rollover kann man im prototype einfügen (z.B. unmittelbar vor Erstellen der Beschriftungen):

PHP:

this.onRollOver = skalieren;
this.onRollOut = zuruecksetzen;

- Initialisierung im vars-Block:

PHP:

var nTxtAbstand:Number = 30;

- Deklaration im functions-Block:

PHP:

function skalieren() {
	this._xscale = this._yscale=nScale;
}
function zuruecksetzen() {
	this._xscale = this._yscale=100;
}

Ein Rollover skaliert den betreffenden Auschnitt nun auf 120%.

Alternativ kann man auch die Beschriftung kreisförmig um das Diagramm herum anordnen (dann obigen rollover löschen oder die Abstandswerte für die Texte anpassen). Dabei muss man überlegen, wie die Textfelder relativ zum jeweiligen Ausschnitt positioniert werden sollen. Hier soll beispielhaft folgendes gelten: von der Mitte der jeweiligen Außenkante eines Ausschnitts soll eine 30 px lange Linie auf ein Textfeld zeigen. Die Linie hält aus ästhetischen Gründen zum Kreisrand einen Abstand von 2 px ein. Befindet sich das Textfeld horizontal rechts vom Kreismittelpunkt, weist die Linie auf den linken Rand des Textes, ansonsten auf dessen rechten Rand. Befindet sich das Textfeld vertikal oben vom Kreismittelpunkt, weist die Linie auf den unteren Rand des Textes, ansonsten auf dessen oberen Rand. Klingt kompliziert und unverständlich, also professionell.

Dazu muß innerhalb des Prototypes alles zu tBeschriftung nach der Zuweisung des Textformats ersetzt werden durch:

PHP:

pWinkel -= pAusschnitt/2*nWinkelAdd;
var nPosX:Number = Math.cos(pWinkel*(Math.PI/180))*(nRadius+nTxtAbstand);
var nPosY:Number = Math.sin(pWinkel*(Math.PI/180))*(nRadius+nTxtAbstand);
tBeschriftung._x = nPosX;
tBeschriftung._y = nPosY;
if (tBeschriftung._x<this._x) {
	tBeschriftung._x -= tBeschriftung._width;
}
if (tBeschriftung._y<this._y) {
	tBeschriftung._y -= tBeschriftung._height;
}
mDiagrammTxt.lineStyle(pStil[0], aFarben[nIndexFarben], pStil[2]);
mDiagrammTxt.moveTo(Math.cos(pWinkel*(Math.PI/180))*(nRadius+2), Math.sin(pWinkel*(Math.PI/180))*(nRadius+2));
mDiagrammTxt.lineTo(nPosX,nPosY);

Last not least könnte man einen anderen Rollover einfügt, der eine alternative Wertigkeit anzeigt, nämlich den relativen Abstand aller Ausschnitte zum gewählten Ausschnitt. Wenn beispielsweise der aktuelle Ausschnitt den Wert 67, sein Nachbar dagegen nur 30 repräsentiert, würde der Rollover für den Nachbarn -37 (67 - 30) anzeigen. usw.

Viel Spass

kleeaar · 23.07.2009

AW: Kreisdiagramme mit as

WOW!
DAs mit der Verteilung rund um den Kreis ist natürlich sehr fett!

Du bist auch so ein script-Verrückter wie ich, der nicht aufhören kann, wenn es ihn einmal gepackt hat

Grüße