I'm finalizing a new chart that uses a Category Axis as my horizontal, and a Linear Axis as my vertical. Points are being plotted correctly and I have a Cartesian Data Canvas as a background element and I want the Canvas to be used to draw some horizontal rectangular "bands" that fill the entire chart (but not the standard GridLines banding). I need to draw full (and dynamic) rectangles at runtime based upon the data and independent of the tick mark axis.
I have verified that my Cartesian Data Canvas is being added as a child element, however, all attempts to actually draw on this using the drawing API have been unsuccessful. I found a post on another site and have read and re-read the asdocs extensively trying to figure out what I'm missing (please dont respond with links to the "connecting two columns with a line" post).
As a test, I tried just getting the Cartesian Data Canvas to draw just a basic rectangle, however I'm not getting anything on screen. This is the code for that little exercise:
protected function drawChartCanvas():void
{
chtCanvas.clear();
chtCanvas.beginFill(0x000000);
var canvasWidth:Number = chtCanvas.width;
var canvasHeight:Number = chtCanvas.height;
var minPt:Array = chtCanvas.l开发者_如何学CocalToData(new Point(0, 0)); //
var maxPt:Array = chtCanvas.localToData(new Point(canvasWidth,canvasHeight));
// Tried this
chtCanvas.drawRect(minPt[0]-1, maxPt[1], maxPt[0]-1, minPt[1]);
// Tried using data coordinates
//chtCanvas.drawRect(0, someChartData, chart.width, 0);
// Tried something random like this
// chtCanvas.drawRect(0,10000, 10000, 0);
chtCanvas.endFill();
}
But Im not seeing anything on screen. I'm wondering if the coordinates I'm using with the Cartesian Data Canvas work/translate when using a Category Axis? My Plot Chart axis and background elements properties:
<mx:backgroundElements>
<mx:CartesianDataCanvas id="chtCanvas" includeInRanges="true" includeInLayout="true" visible="true"/>
<mx:GridLines gridDirection="horizontal"/>
</mx:backgroundElements>
<mx:verticalAxis>
<mx:LinearAxis id="axisSalary" baseAtZero="true" autoAdjust="true" title="Salary"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis id="axisDate" categoryField="Date" title="Date" dataFunction="formatChartDates"/>
</mx:horizontalAxis>
I would think the Cartesian Data Canvas would be able to take the point of the vertical axis (here salary value) as a point and then pass the chart width to complete my "banding," but I can't get ANYTHING to draw on the canvas. I would think since the canvas uses data points and not screen coordinates that I should still be able to use my salary to determine the height of the background element, but still use the chart width to make sure the rectangle goes all the way cross screen. Any help would be greatly appreciated.
UPDATE: Additional information
So I think I discovered what the issue is here and it has to do with data coordinates. I was able to get the rectangle to draw. Originally, I wanted to use a Plot Chart with a Line Series so that my values would be laid out in the center of the chart rather than starting at the origin. I modified this to a Line Chart with a Line Series and got my Cartesian Data Canvas to render my bandings, but now the problem is that there arent always multiple data values that stretch the entire width of the chart.
So this question is now how do I get the origin of the chart in data coordinates when there is no actual data value at a given point? For example, using a Plot Chart with a Line Series centers all of the data values, but in order to draw, I need to figure out how to represent the x-coordinate of the graph origin when there is no data value associates with it.
Thanks!
So I ended up having to re-think the actual problem for this question and ended up figuring a way around it. this post Flex Charts: Can you use a minimum/maximum point from an IAxis for Cartesian Data Canvas to draw the entire width of the chart? answers this question.
精彩评论