neues Diagramm

ali-gator

ali-gator

Erfahrenes Mitglied
Hi,

ich bräuchte nochmal eure Hilfe. Und zwar will ich ein dymanisches Diagramm machen (nein diesmal kein Tortendiagramm) sondern ein "punktdiagramm" ich weiß nicht genau wie das heißt. Ein Bild wie es aussehen könnte, hab ich angehängt.
Das Ding braucht keine Animationen oder sowas, es soll einfach dynamisch aus einer Datei ausgelesen Werte anzeigen. Irgendwie hab ichs bis jetzt noch nicht auf die Reihe bekommen so ein Teil zu machen. Wäre also für jede Hilfe dankbar. Was noch richtig geil wäre, wäre, dass man das so dynamische machen kann, dass er je nach Werten eine anzeige für 1 Jahr, eine Woche, einen Tag etc. machen könnte...Wie das gehen soll weiß ich aber nicht so wirklich... Also wie gesagt, bin für jede Hilfe dankbar!
mfg

ali-gator
 

Anhänge

  • diagramm.jpg
    diagramm.jpg
    5,5 KB · Aufrufe: 84
Hi,

eigentlich solltest Du mit dem Wissen aus dem "Tortendiagramm" in der Lage sein, die Grundprinzipien zumindest zum Teil auf ein Balkendiagramm oder Graphen zu übertragen.

Hast Du es denn schon einmal probiert?

Gruß
.
 
Also erstmal muss ich sagen dass ich durch das Tortendiagramm ne Menge dazugelernt habe! Ich hab den Script inzwischen auch auf ein Balkendiagramm umgeschrieben.

Mit dem Graphen wills allerdings nicht so richtig, das Problem vor dem ich im Moment stehe, ist dass er mir einfach einen Balken zeichnet, kann auch sein dass ich heute voll aufm Schlauch stehe... Keine Ahnung. Ich hab das .fla mal angehängt...
 

Anhänge

Hi,

schau Dir mal Deine Funktion "pCirc" an (Circ kommt übrigens von "Cicle" - das würde ich für einen anderen Plot umbenennen ;)):
Code: 
function pCirc(idx, offset) {
	var ang = _data[idx]._perc;
	body.lineStyle(1, 0x666666, 100);
	body.moveTo(25,idx);
	body.lineTo(66,idx);
	body.lineTo(108,idx);
	body.lineTo(150,idx);
	body.lineTo(191,idx);
	body.lineTo(233,idx);
	body.lineTo(275,idx);
...
Du zeichnest diverse Linien mit festen horizontalen Koordinaten und dem Indexwert als vertikaler Koordinate. ... der Prozentwert fließt hier gar nicht ein.

Was Du machen musst, ist folgendes:
  • Wenn idx 0 ist, mit moveTo an folgende Position springen:
Code: 
x = "linke Kante" + idx * "Abstand der Balken"
y = "untere Kante" - _data[idx]._perc * "Höhe pro Prozentwert"
  • ist idx größer 0, so nimmst Du statt moveTo einfach lineTo. ;)

Gruß
.
 
hi,

also habs jetzt mal gemacht wie du gesagt hast aber irgendwie zeichnet er jetzt gar nix mehr...

Code: 
	if(idx == 0) {
		body.moveTo(25 + idx * 41, 201 - ang * 20)
	}
	if(idx > 0) {
		body.lineTo(25 + idx * 41, 201 - ang * 20)
	}

cu
 

Anhänge

Wie ich es machen würde:

1. Wir nehmen uns eine Liste (ein Array) mit sämtlichen Werten. Das sähe dann z.B. so aus:

werte[0] = 67;
werte[1] = 45;
werte[2] = 98;

Der Vorteil daran ist, dass wir per array.length die Anzahl der Werte auslesen können.

2. Wir rechnen das ganze in Y-Koordinaten um. Das hängt ganz vom "Maßstab" deines Diagrammes ab. Sagen wir einfach, die horizontalen Unterteilungen sind alle 100 Pixel voneinander entfernt.

3. Jetzt zeichnen wir die Liste. Das sieht ungefähr so aus:


Code: 
function draw_diagram() {
lineStyle (1, 0xFFFFFF, 0);
x = 100; // Startwert für X
moveTo (x, werte[0]); // Wir stearten bei x = 100. werte[0] haben wir schon umgerechnet
for(i = 1; i < werte.lentgh-1; i++) {
x += 100; // X hochsetzen
lineTo (x, werte[i]); 
}
}

Sollte . Tut mir leid wenn nicht, hab halt seit 3 Monaten kein Flash mehr gesehen.

Liebe Grüße aus den USA,
Jens
 
Hi,

Du hast den lineStyle für den body vergessen, z.B.::
Code: 
body.lineStyle(1, 0xFF0000, 100);
vor dem moveTo bzw. lineTo.

Übrigens scheint 20 Pixel als Multiplikator für "ang" zu viel zu sein - 5 sollte Dir eher entgegenkommen:
Code: 
body.lineTo(25 + idx * 41, 201 - ang * 5);

Gruß

P.S. @Jens: Das ist im Prinzip genau das, was ich auch gepostet habe ...
.
 
Ah gut, dass mit dem Line-Style wars....
@datic: Kannst du mir mal erklären wie dieser Indexwert (idx) ist und wie der definiert wird usw?! Ich hab das noch nicht so gerafft und im ActionScript auch nicht nachvollziehen können wie das aufgebaut ist...
Achja, das mit dem "offset" und das hier
Code: 
var ang = _data[idx]._perc;
hab ich auch noch ned ganz verstanden... ;)
Wär echt nett!
Bis dann
 
Zuletzt bearbeitet:
Hi,

Du hast eine Anzahl "Messwerte", die in dem Array _data gespeichert sind. Nun gehst Du in einer for-Schleife alle Elemente dieses Arrays durch (die jeweilige Nummer des Messwerts steht also in "i"). Du rufst von da aus für jeden Durchlauf die Funktion pCirc auf, der Du diese Nummer (i) übergibst. Diese Funktion bekommt den Wert in dem Parameter "idx" übergeben - in idx steht also nichts weiter als die Nummer des aktuellen Balkens (von 0 bis Anzahl - 1).

Den Offset benötigst Du nur für das Kreisdiagramm, da sonst alle "Tortenstückchen" bei 0 beginnen würden. Um einen vollen Kreis zu erhalten, musst Du also zu jedem Teilwinkel den Startwinkel des letzten Abschnitts plus seinen Winkelanteil addieren.

_data ist kein Array, in dem einfach nur die Werte stehen, sondern vielmehr ein Array aus Objekten mit mehreren Eigenschaften. In dem Member "_perc" steht z.B. der jeweilige Prozentwert. ;)

Im großen und Ganzen wäre es einfacher und übersichtlicher, das Ding für ein Balkendiagramm neu zu schreiben, statt einfach das Tortendiagramm umzumodeln, da vieles spezifisch dafür implementiert wurde (am besten wäre es, ein Framework zu schreiben, mit dem Du Deine Daten auf ganz unterschiedliche Weise visualisieren kannst) - ich hätte Dir dabei auch gerne geholfen, aber mit meiner Zeit sieht es im Moment leider recht schlecht aus ...

Gruß
.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück