Flex 图表:您可以使用笛卡尔数据画布的 IAxis 的最小/最大点来绘制图表的整个宽度吗?

发布于 2024-10-11 09:34:23 字数 1767 浏览 6 评论 0原文

我在 Adob​​e 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是工资值的数组集合,我使用数组中的数据值来确定矩形的垂直边界。

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

I have a chart with a DateTime axis as my horizontal and a Linear Axis for my vertical inside a Adobe Flex Line Chart. I want to use a Cartesian Data Canvas as a background element and draw custom set of background graphics mostly rectangles. When I have more than a single data point, the graphics work perfectly since they are supposed to span the width of the entire chart.

When I have only a single data point, however, I can't seem to get the rectangles to draw. Since I want my rectangles to span the entire width of the chart, I was thinking that I could get the x-coordinates from my axis, but this isn't working.

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

My actual drawing method is as follows:

// 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 this example, detail is an array collection of salary values and Im using the data value in the array to determine the vertical bounds of my rectangles.

I need to draw the rectangles the entire width of the chart (even when there is only a single data point). Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一梦等七年七年为一梦 2024-10-18 09:34:23

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

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

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

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

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

更新#2:已解决
好的,所以轴确实可以作为笛卡尔数据画布的最小/最大值,但有一些重要的事情需要记住。对于单个点(也可能是多个点,我只是无法直观地看到差异),当使用自定义 DateTimeAxis 解析函数(例如 Adob​​e 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 对象时,它们的时间值也会设置为本地系统时间。请记住将这些值也设置为零,否则您将得到与轴标签不完全对齐的点。

Thanks to Heikki for his help. The following code works to use the axis values to draw on your Cartesian Data Canvas:

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

Casting the values as Date really helped. The rest of the code used above is unecessary.

One thing to note, I was using a DateFormatter to format the date values from my data. What I didn't consider was that when using a DateTimeAxis, Flex will automatically add in extra dates to display on the axis. In my case, I was using a custom parse function to create MY points, but wasnt considering the points Flex was creating and also passing to my parse function (Therefore, they were not getting parsed correctly). Once I corrected this, the values laid out correctly in the case of multiple data points. I'm still having a bit of an issue with single data points and them not filling the chart entirely, but they are now drawing.

UPDATE:
Although there are signs of life, the minimum and maximum are still not drawing the entire width of the chart in some cases depending on the dataUnits and labelUnits combination.

UPDATE #2: SOLVED
Ok, so the axis does work as minimum/maximum values for the Cartesian Data Canvas but there is something important to remember. For a single point (and probably for multiple points as well, I just couldnt visually see the difference), when using a custom DateTimeAxis parse function such as what was in the Adobe Flex ASDoc tutorials:

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;

}

You MUST remember to set the UTC values as shown above also. Since the DateTimeAxis uses date AND time, when you create new Date objects, their time values also get set to the local system time. Remember to set those values to zero also or you will get points that dont exactly line up with your axis labels.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文