Flex:反转 LinearAxis 值 [英] Flex: Inverting LinearAxis values
问题描述
我有一个折线图，每隔几秒更新一次，类似于您在 Windows 的任务管理器中看到的那个.图表从右到左，最近的数据在右边，然后向左.我将如何反转 X 轴的值，以便最小值在右侧，最高值在左侧?这是一个线性轴.
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屋！
