Reverse order of bars in a Flex BarChart
-
21-09-2019 - |
문제
I'm trying to use a BarChart in Flex. I'd like it to order the bars according to the order of the ArrayCollection I fed it. i.e. data at index 0 should be the first bar on top. However, Flex is giving me the exact reverse order. i.e. data at index 0 is not the last bar in bottom.
How could I tell the BarChart to reverse the order other than reversing the order of my ArrayCollection? Thanks!!
Here's the block of code in my script tag:
[Bindable]
private var optionsArray:ArrayCollection = new ArrayCollection([
new VotingOption('Yes, it rocks!', 'yes', 5),
new VotingOption('Meh, it is okay!', 'ok', 10),
new VotingOption('No, it sucks!', 'no', 15)
]);
And here's my BarChart code:
<mx:BarChart x="9.1" y="8" id="barchart1" width="563.0303" height="454.01514" maxBarWidth="30"
type="overlaid" dataProvider="{optionsArray}" showAllDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis id="vertAxis" categoryField="optionSMSCode"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{vertAxis}" showLabels="false"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:BarSeries xField="optionResult" showDataEffect="morph"/>
</mx:series>
</mx:BarChart>
해결책
The output that you are getting is correct according to how Flex BarCharts work, and this is also the output you should be expecting. The origin is at the bottom_left, and as such objects/lists start at the bottom_left and continue outward towards the the top and to the right.
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_03.html
I do understand visually how you would interpret it the reverse way. So let's say that someone gave you that dataProvider/ArrayCollection in that order, but you wanted to visualize in the reverse order. I would either 1)
//public var data:ArrayCollection;
data.source.reverse();
http://livedocs.adobe.com/flex/3/langref/Array.html
or 2)
reverse the labels on the vertical axis using the AxisRenderer.labelFunction property.
Flex: Inverting LinearAxis values
다른 팁
The solution is simple. Make a new array or array collection (you might have to override the dataProvider property of the chart) using the same objects and sort them.