Flex:堆叠条形图,日期为x轴,名称为y轴

时间:2012-04-13 07:49:17

标签: flex date charts bar-chart stacked

我正在创建一个图表,其中x轴需要有日期和y轴名称。当日期晚些时,酒吧的长度更长。但我想在彼此堆叠多个酒吧。例如

这是我到目前为止的代码

<fx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var medicines:ArrayCollection = new ArrayCollection([
            {name:"pil1", date:"05/01/2008"},
            {name:"pil2", date:"06/01/2008"},
            {name:"pil3", date:"07/01/2008"},
        ]);
    ]]>
</fx:Script>



<mx:BarChart id="myChart" width="758" height="448" dataProvider="{medicines}" showDataTips="true">

    <mx:verticalAxis>
        <mx:CategoryAxis categoryField="name"/>
    </mx:verticalAxis>

    <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="date" dataProvider="{medicines}"/>
    </mx:horizontalAxis>

    <mx:series>

        <mx:BarSet type="stacked">
            <mx:BarSeries  xField="date"/>
            <mx:BarSeries  xField="date"/>
        </mx:BarSet>
    </mx:series>

</mx:BarChart>

我对这段代码的看法是右轴,但是没有绘制条形图。

我想在this figure上找到一个图表,但在X轴上应该有站立的日期。

仅供参考,它是一个移动应用程序。

1 个答案:

答案 0 :(得分:0)

<fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var medicines:ArrayCollection = new ArrayCollection([
                {name:"pil1", date:new Date(2008, 5, 1).time},
                {name:"pil2", date:new Date(2008, 6, 1).time},
                {name:"pil3", date:new Date(2008, 7, 1).time},
            ]);

            protected function application3_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
            }

            private function getLabel(catValue:*, prevCatValue:*, axis:*, catItem:*):String
            {

                return "Your date String";
            }

        ]]>
    </fx:Script>



    <mx:BarChart id="myChart" width="758" height="448" dataProvider="{medicines}" showDataTips="true">

        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>

        <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="date" dataProvider="{medicines}" labelFunction="{getLabel}"/>
        </mx:horizontalAxis>

        <mx:series>

            <mx:BarSet type="stacked">
                <mx:BarSeries  xField="date"/>
                <mx:BarSeries  xField="date"/>
            </mx:BarSet>
        </mx:series>

    </mx:BarChart>



</s:Application>

在标签功能中,您可以为标签指定要在轴上显示的内容,希望这有助于