Flex图表:您是否可以使用IAxis for Cartesian Data Canvas中的最小/最大点来绘制图表的整个宽度?

时间:2011-01-10 14:49:34

标签: flex flex4 flex-charting flex-charts

我有一个图表,其中DateTime轴作为我的水平线,而我的垂直线在Adobe Flex折线图中是一个线性轴。我想使用笛卡尔数据画布作为背景元素,并绘制自定义的背景图形集,主要是矩形。当我有多个数据点时,图形可以完美地工作,因为它们应该跨越整个图表的宽度。

但是,当我只有一个数据点时,我似乎无法绘制矩形。因为我希望我的矩形跨越图表的整个宽度,我想我可以从我的轴获得x坐标,但这不起作用。

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);

我的实际绘图方法如下:

// 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);

在此示例中,detail是工资值的数组集合,Im使用数组中的数据值来确定矩形的垂直边界。

我需要在图表的整个宽度上绘制矩形(即使只有一个数据点)。感谢

1 个答案:

答案 0 :(得分:1)

感谢Heikki的帮助。以下代码用于使用轴值在笛卡尔数据画布上绘制:

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

将值转换为Date确实有帮助。上面使用的其余代码是不必要的。

有一点需要注意,我使用DateFormatter来格式化数据中的日期值。我没有考虑的是,当使用DateTimeAxis时,Flex会自动添加额外的日期以显示在轴上。在我的情况下,我使用自定义解析函数来创建我的点,但没有考虑Flex正在创建的点,也传递给我的解析函数(因此,他们没有被正确解析)。一旦我纠正了这一点,在多个数据点的情况下正确地布置了值。我对单个数据点仍然存在一些问题,并且它们没有完全填充图表,但它们现在正在绘制。

<强>更新: 尽管存在生命迹象,但在某些情况下,最小值和最大值仍未绘制图表的整个宽度,具体取决于dataUnits和labelUnits组合。

更新#2:已解决 好吧,所以轴确实作为笛卡尔数据画布的最小值/最大值,但有一些重要的事情需要记住。在使用自定义DateTimeAxis解析函数(例如Adobe Flex ASDoc教程中的内容)时,对于单个点(也可能是多个点,我只是无法直观地看到差异):

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;

}

您必须记住如上所示设置UTC值。由于DateTimeAxis使用日期和时间,因此在创建新的Date对象时,它们的时间值也会设置为本地系统时间。请记住将这些值设置为零,否则您将获得与轴标签不完全对齐的点。