如何在水平轴上显示Flex Line Chart的按年分组的月数?

时间:2010-11-04 02:16:49

标签: flex charts flex3 linechart

基本上我有一个Flex Line Chart,x轴看起来像这样:

 ---|--------|--------|--------|--------|--------|--------|---
 November December January February   March    April     May


这很好,但我也希望显示月份所属的年份,如下所示:

 ---|--------|--------|--------|--------|--------|--------|---
 November December January February   March    April     May
       2010           |                2011


我的数据提供者是一个xml文档,如下所示:

<Chart>
    <Month count="1"  month="November" year="2010" />
    <Month count="5"  month="December" year="2010" />
    <Month count="0"  month="January"  year="2011" />
    <Month count="10" month="February" year="2011" />
    <Month count="3"  month="March"    year="2011" />
    <Month count="9"  month="April"    year="2011" />
    <Month count="3"  month="May"      year="2011" />
</Chart>


这就是我对LineChart控件的看法:

<mx:LineChart 
    height="100%" 
    width="100%" 
    dataProvider="{this._report.Month}">
    <mx:backgroundElements>
        <mx:GridLines>
            <mx:horizontalStroke>
                <mx:Stroke color="0x000000" weight="1" />
            </mx:horizontalStroke>
        </mx:GridLines>
    </mx:backgroundElements>
    <mx:horizontalAxisRenderers>
        <mx:AxisRenderer
            axis="{months}"
            axisStroke="{axis}"
            placement="bottom"
            tickLength="5"
            tickPlacement="outside"
            labelRotation="45">
            <mx:tickStroke>{ticks}</mx:tickStroke>
        </mx:AxisRenderer>
    </mx:horizontalAxisRenderers>
    <mx:verticalAxisRenderers>
        <mx:AxisRenderer
            axis="{countForMonths}"
            axisStroke="{axis}"
            placement="bottom"
            tickLength="5"
            tickPlacement="outside"
            minorTickPlacement="none">
            <mx:tickStroke>{ticks}</mx:tickStroke>
        </mx:AxisRenderer>
    </mx:verticalAxisRenderers>
    <mx:horizontalAxis>
        <mx:CategoryAxis id="months" categoryField="@month"/>
    </mx:horizontalAxis>
    <mx:verticalAxis>
        <mx:LinearAxis id="countForMonths" />
    </mx:verticalAxis>
    <mx:series>
        <mx:LineSeries
            yField="@count" 
            displayName="Report" 
            lineStroke="{myreportstroke}"/>
    </mx:series>
</mx:LineChart>

我花了好几个小时试图找到一个类似但没有运气的例子。 Flex文档有几个示例,显示y轴上的多个轴,但x轴没有。

我已经看到其他人发布的其他一些想要做类似事情的问题,但大多数人从来没有得到答案,或者答案是看多轴的文档 - 我已经完成了。

我在IBM网站上找到了this的一个Flex组件。这似乎表明可以按照我想要的方式格式化轴。我只需要有人引导我朝着正确的方向前进。

1 个答案:

答案 0 :(得分:0)

非常有趣的问题。去调查一下。我的起点将在这里:http://christianyates.com/blog/flex/displaying-multiple-axes-single-series-flex-charts