Flex：反相LinearAxis值 [英] Flex: Inverting LinearAxis values
问题描述
我有一个更新的线图，每秒，所以秒，类似于你在Windows的任务管理器中看到的。图表从右到左，最右侧的数据向左移动。我如何反转X轴的值，使最低值在右边，最高在左边？这是一个LinearAxis。
I have a line chart that is updated every so and so seconds, similar to the one you see in Windows' Task Manager. The chart goes right-to-left, with the most recent data on the right, and going leftwards. How would I invert the values of the X axis so that the lowest value is on the right and the highest on the left? It's a LinearAxis.
我试着做一个CategoryAxis并手动放置数字，但是不工作的方式应该（标签不与
I tried making it a CategoryAxis and putting the numbers in manually, but that doesn't work the way it should (the labels are not aligned with the ticks).
或者，有一种方法可以让CategoryAxis中的标签与标记对齐？
Or, is there a way to have the labels in a CategoryAxis align with the ticks?
推荐答案
所以我看了一下，我也看不到一个简单的方法来翻转轴。然而，我有一个解决方案，可以很好地工作，是相对优雅的，省略了一个属性来为你做这个。
So I've looked into it an i also can't see a straightforward way of flipping the axis. However i do have a solution that would work perfectly well and is relatively elegant giving the omission of a property to do this for you.
右侧折线图（应该只能将其复制并粘贴到项目中进行测试）。
So consider this normal left-to-right line chart (should just be able to copy and paste this into a project to test).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var timeValue:ArrayCollection = new ArrayCollection( [
{ Time: 0, Value: 18 },
{ Time: 1, Value: 20 },
{ Time: 2, Value: 30 },
{ Time: 3, Value: 35 },
{ Time: 4, Value: 35 },
{ Time: 5, Value: 32 },
{ Time: 6, Value: 40 },
{ Time: 7, Value: 62 },
{ Time: 8, Value: 80 },
{ Time: 9, Value: 75 },
{ Time: 10, Value: 76 } ]);
]]>
</mx:Script>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="yellow" weight="2"/>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="column"
height="100%"
width="100%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{timeValue}" >
<mx:horizontalAxis>
<mx:LinearAxis maximum="10" minimum="0"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis maximum="100" minimum="0" />
</mx:verticalAxis>
<mx:series>
<mx:LineSeries
xField="Time"
yField="Value"
displayName="TimeValue"
fill="{sc1}"
stroke="{s1}"
/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
要将此更改为从右到左的图表，使它们为负，然后沿使用负最小值和零作为最大值的轴绘制它们。然后，我还在标签上运行一个函数，使它们再次为正确的数据源。
To change this to a right-to-left chart, i do some inverting of the time values to make them negative and then plot them along an axis that uses a negative minimum and zero as the maximum. I also then run a function on the labels to make them positive again to fit the original data source.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.charts.chartClasses.IAxisRenderer;
import mx.collections.ArrayCollection;
[Bindable]
private var timeValue:ArrayCollection = new ArrayCollection( [
{ Time: 0, Value: 18 },
{ Time: 1, Value: 20 },
{ Time: 2, Value: 30 },
{ Time: 3, Value: 35 },
{ Time: 4, Value: 35 },
{ Time: 5, Value: 32 },
{ Time: 6, Value: 40 },
{ Time: 7, Value: 62 },
{ Time: 8, Value: 80 },
{ Time: 9, Value: 75 },
{ Time: 10, Value: 76 } ]);
private function verticalAxisParseFunction(value : Number) : Number
{
return value * -1;
}
private function horizontalAxisRenderedLabelFunction(axisRenderer:IAxisRenderer, label:String):String
{
var labelAsNumber : Number = Number(label);
if (isNaN(labelAsNumber))
{
return label;
}
return (labelAsNumber * -1).toString();
}
]]>
</mx:Script>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="yellow" weight="2"/>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="column"
height="100%"
width="100%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{timeValue}" >
<mx:horizontalAxis>
<mx:LinearAxis id="horizontalAxis" maximum="0" minimum="-10" parseFunction="{verticalAxisParseFunction}"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="verticalAxis" maximum="100" minimum="0" />
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{horizontalAxis}"
labelFunction="{horizontalAxisRenderedLabelFunction}" />
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{verticalAxis}"
placement="right" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries
xField="Time"
yField="Value"
displayName="TimeValue"
fill="{sc1}"
stroke="{s1}"
/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
这篇关于Flex：反相LinearAxis值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
