Flex Charts：您可以使用笛卡儿数据画布的IAxis中的最小/最大点绘制图表的整个宽度吗？ [英] Flex Charts: Can you use a minimum/maximum point from an IAxis for Cartesian Data Canvas to draw the entire width of the chart?

问题描述

在Adobe Flex折线图内，我有一个以DateTime轴为水平的图表，以及一个用于垂直线的Linear Axis。我想使用笛卡尔数据画布作为背景元素，并绘制大多数矩形的自定义背景图形集。当我有不止一个数据点时，图形完美的工作，因为它们应该跨越整个图表的宽度。

当我只有一个数据点，但是，我似乎无法得到绘制矩形。因为我想我的矩形横跨图表的整个宽度，我想我可以从我的坐标轴得到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; 
 
 //当超过1个数据点时，这个工作正常
 minPt = chtCanvas.localToData（new Point（0，0））; 
 maxPt = chtCanvas.localToData（new Point（canvasWidth，canvasHeight））; 
 
 //这会返回一个日期对象，但不会在
下绘制minPtDate = axisDate.minimum; 
 maxPtDate = axisDate.maximum; 
 
 //这将返回NaN的x 
 minPtComplete = chtCanvas.dataToLocal（minPtDate，axisSalary.minimum）; 
 maxPtComplete = chtCanvas.dataToLocal（maxPtDate，axisSalary.maximum）; 
 
 //也试过这个。也返回NaN的x值
 // minPtComplete = chtCanvas.dataToLocal（axisDate.minimum，axisSalary.minumum）; 
 // maxPtComplete = chtCanvas.dataToLocal（axisDate.maximum，axisSalary.maximum）; 
  

我的实际绘图方法如下：

  //尝试了这一点，使用点> 2，不绘制单个数据点
 chtCanvas.drawRect（minPt [0]，detail [i] .MaxValue， maxPt [0]，detail [i] .MinValue）; 
 
 //试过这个，没有单点效果
 //chtCanvas.drawRect(minPtDate，detail [i] .MaxValue，maxPtDate，detail [i] .MinValue）; 
 
 //试过这个，对单点
没有影响//chtCanvas.drawRect（minPtDate，minPt [1]，maxPtDate，detail [i] .MinValue）; 
 
 //试过这也
 //chtCanvas.drawRect（minPtComplete.x，detail [i] .MaxValue，maxPtComplete.x，detail [i] .MinValue）; 
  

在这个例子中，detail是一个薪水值的数组集合，Im使用数组中的数据值以确定矩形的垂直边界。

我需要绘制矩形的整个宽度（即使只有一个数据点）。谢谢

解决方案

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

  chtCanvas.drawRect（axisDate.minimum as Date ，axisSalary.maximum，axisDate.maximum as Date，axisSalary.minimum）; 
  

上面使用的其余代码是不必要的。

有一点需要注意，我使用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对象时，它们的时间值也被设置为本地系统时间。请记住将这些值也设置为零，否则您将得到不与您的轴标签完全对齐的点。
 
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
解决方案
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.

                        
这篇关于Flex Charts：您可以使用笛卡儿数据画布的IAxis中的最小/最大点绘制图表的整个宽度吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！