【问题标题】:Reverse order of bars in a Flex BarChartFlex BarChart 中的条形反转顺序
【发布时间】:2009-10-14 17:19:30
【问题描述】:

我正在尝试在 Flex 中使用条形图。我希望它根据我喂给它的 ArrayCollection 的顺序来订购酒吧。即索引 0 处的数据应该是顶部的第一个柱。但是,Flex 给了我完全相反的顺序。即索引 0 处的数据不是底部的最后一个柱。

除了颠倒我的 ArrayCollection 的顺序之外,我如何告诉 BarChart 颠倒顺序?谢谢!!

这是我的脚本标签中的代码块:

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

这是我的条形图代码:

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

【问题讨论】:

  • 作为临时补丁.. 为什么不直接反转数组排序?
  • 因为还有其他东西依赖于它原来的顺序。图表是唯一需要逆序的东西。如果我调用“data.source.reverse()”,我会搞砸其他事情。作为临时补丁,我正在创建一个新数组,并为其分配反向数据数组。

标签: apache-flex sql-order-by arraycollection bar-chart


【解决方案1】:

根据 Flex BarCharts 的工作方式,您获得的输出是正确的,这也是您应该期待的输出。原点位于左下角,因此对象/列表从左下角开始,并继续向外向上和向右。
http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_03.html

我确实从视觉上理解您将如何以相反的方式解释它。因此,假设有人以该顺序为您提供了 dataProvider/ArrayCollection,但您想以相反的顺序进行可视化。 我要么 1)

//public var data:ArrayCollection;
data.source.reverse();

http://livedocs.adobe.com/flex/3/langref/Array.html

或 2)
使用 AxisRenderer.labelFunction 属性反转垂直轴上的标签。
Flex: Inverting LinearAxis values

【讨论】:

  • 非常感谢您的回答。您指出原点位于底部左侧,这很有见地。我尝试将原点切换到 top_left,希望通过将水平轴放在顶部来反转顺序。但它仍然没有工作。还有其他方法吗?反转数据源顺序对我不起作用,因为我还有其他依赖于原始顺序的东西。但是谢谢指出功能。现在我可以破解它来返回一个新的反转数组。至于反转标签,我想不出一个好方法来反转我的分类轴,就像他们对线性轴 (* -1) 所做的那样。
【解决方案2】:

解决方案很简单。使用相同的对象创建一个新的数组或数组集合(您可能必须覆盖图表的 dataProvider 属性)并对它们进行排序。

【讨论】:

    猜你喜欢
    • 2020-10-16
    • 2020-10-18
    • 2023-03-08
    • 2017-07-31
    • 1970-01-01
    • 2019-02-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多