2011-01-10 7 views
1

Ich habe ein Diagramm mit einer DateTime Achse als meine horizontale und eine lineare Achse für meine vertikale innerhalb eines Adobe Flex Liniendiagramms. Ich möchte ein kartesisches Data Canvas als Hintergrundelement verwenden und benutzerdefinierte Hintergrundgrafiken hauptsächlich Rechtecke zeichnen. Wenn ich mehr als einen einzelnen Datenpunkt habe, funktionieren die Grafiken perfekt, da sie die Breite des gesamten Diagramms überspannen sollen.Flex-Diagramme: Können Sie einen minimalen/maximalen Punkt aus einer IAxis für kartesischen Daten-Canvas verwenden, um die gesamte Breite des Diagramms zu zeichnen?

Wenn ich nur einen einzigen Datenpunkt habe, kann ich die Rechtecke nicht zeichnen. Da ich möchte, dass sich meine Rechtecke über die gesamte Breite des Diagramms erstrecken, dachte ich, dass ich die X-Koordinaten von meiner Achse bekommen könnte, aber das funktioniert nicht.

var canvasWidth:Number = chtCanvas.width; 
var canvasHeight:Number = chtCanvas.height; 
var minPt:Array; 
var maxPt:Array; 
var minPtDate:Date; 
var maxPtDate:Date; 
var minPtComplete:Point; 
var maxPtComplete:Point; 

// This works fine when there is more than 1 data point 
minPt = chtCanvas.localToData(new Point(0, 0)); 
maxPt = chtCanvas.localToData(new Point(canvasWidth,canvasHeight)); 

//This does return a date object, but wont draw below 
minPtDate = axisDate.minimum; 
maxPtDate = axisDate.maximum; 

//This returns NaN for the x 
minPtComplete = chtCanvas.dataToLocal(minPtDate, axisSalary.minimum); 
maxPtComplete = chtCanvas.dataToLocal(maxPtDate, axisSalary.maximum); 

// Also tried this. Also returns NaN for the x value 
//minPtComplete = chtCanvas.dataToLocal(axisDate.minimum, axisSalary.minumum); 
//maxPtComplete = chtCanvas.dataToLocal(axisDate.maximum, axisSalary.maximum); 

Mys tatsächliche Ziehverfahren sind wie folgt:

// Tried this, works with points >2, does not draw with single data point 
chtCanvas.drawRect(minPt[0], detail[i].MaxValue, maxPt[0], detail[i].MinValue); 

//tried this, no effect with single point 
//chtCanvas.drawRect(minPtDate, detail[i].MaxValue, maxPtDate, detail[i].MinValue); 

// Tried this, no effect with single point 
//chtCanvas.drawRect(minPtDate, minPt[1], maxPtDate, detail[i].MinValue); 

// Tried this also 
//chtCanvas.drawRect(minPtComplete.x, detail[i].MaxValue, maxPtComplete.x, detail[i].MinValue); 

In diesem Beispiel Detail ist eine Array Sammlung von Gehaltswerten und Im den Datenwert in dem Feld mit den vertikalen Grenzen meines zu bestimmen, Rechtecke.

Ich muss die Rechtecke über die gesamte Breite des Diagramms zeichnen (auch wenn es nur einen einzigen Datenpunkt gibt). Danke

+0

Erstellt ein minimales Beispiel, das etwas basierend auf Achsenwerten zeichnet: http://pastebin.com/5EJC21wT – Heikki

+0

Ich bemerkte, dass rectange nicht sichtbar ist, bis 'includeInRanges' wahr ist. – Heikki

+0

Das "as Date" half einem Haufen. Ich erhalte jetzt meine Rechtecke sowohl auf mehreren Datenpunkten als auch auf einzelnen Datenpunkten.Das Problem ist, dass bei einzelnen Datenpunkten nicht die gesamte Breite des Diagramms angezeigt wird. – Shawn

Antwort

1

Danke an Heikki für seine Hilfe. Der folgende Code arbeitet, um die Achsenwerte zu verwenden, um auf Ihre Daten cartesianischen Leinwand zu zeichnen:

chtCanvas.drawRect(axisDate.minimum as Date, axisSalary.maximum, axisDate.maximum as Date, axisSalary.minimum); 

Casting die Werte als Datum wirklich geholfen. Der Rest des oben verwendeten Codes ist nicht erforderlich.

Eine Sache zu beachten, habe ich einen DateFormatter verwendet, um die Datumswerte aus meinen Daten zu formatieren. Was ich nicht berücksichtigt habe, war, dass Flex bei der Verwendung einer DateTimeAxis automatisch zusätzliche Daten hinzufügt, die auf der Achse angezeigt werden. In meinem Fall habe ich eine benutzerdefinierte Analysefunktion verwendet, um MY-Punkte zu erstellen, habe aber nicht die Punkte berücksichtigt, die Flex erstellt hat, und auch meine Parse-Funktion übergeben (daher wurden sie nicht korrekt analysiert). Nachdem ich das korrigiert habe, sind die Werte bei mehreren Datenpunkten korrekt ausgelegt. Ich habe immer noch ein kleines Problem mit einzelnen Datenpunkten und sie füllen das Diagramm nicht vollständig aus, aber sie zeichnen jetzt.

UPDATE: Obwohl es Zeichen des Lebens sind, sind die Minimal- und Maximal noch nicht über die gesamte Breite des Diagramms in einigen Fällen auf der dataunits und labelunits Kombination abhängig zeichnen.

AKTUALISIEREN # 2: Gelöst Ok, die Achse funktioniert also als Minimum/Maximum-Werte für das kartesische Data Canvas, aber es gibt etwas Wichtiges zu beachten. Für einen einzigen Punkt (und wahrscheinlich für mehrere Punkte als gut, ich könnte nicht nur visuell sehen den Unterschied), wenn eine benutzerdefinierte mit DateTimeAxis Funktion analysieren, wie, was in den Adobe Flex ASDoc Tutorials war:

private function axisDateParseFunction(item:String):Date 
{ 
    var inputDate:String = item; 
    inputDate = fmtDate.format(inputDate); 

    var newDate:Date = new Date(); 
    if(inputDate) 
    { 
     var a:Array = inputDate.split('/'); 
     newDate.fullYear = a[2]; 
     newDate.month = a[0] - 1; 
     newDate.date = a[1]; 
     newDate.hours = 0; 
     newDate.hoursUTC = 0; 
     newDate.minutes = 0; 
     newDate.minutesUTC = 0; 
     newDate.seconds = 0; 
     newDate.secondsUTC = 0; 
     newDate.milliseconds = 0; 
     newDate.millisecondsUTC = 0; 

    } 
    return newDate; 

} 

Sie dürfen nicht vergessen um die UTC-Werte auch wie oben gezeigt einzustellen. Da die DateTimeAxis Datum und Uhrzeit verwendet, werden beim Erstellen neuer Date-Objekte auch ihre Zeitwerte auf die lokale Systemzeit gesetzt. Denken Sie daran, diese Werte auch auf Null zu setzen, oder Sie erhalten Punkte, die nicht exakt mit Ihren Achsenbeschriftungen übereinstimmen.