如何在Flex Chart中绘制色带？

Question

我想在弹性曲线图中绘制自定义背景，垂直轴是线性轴，水平轴是类别。在背景中，我想根据用户给出的数据对区域进行着色。 我在图表背景元素中尝试了CartesianDataCanvas和网格线，但没有得到一个好的解决方案。有人有想法吗？我更喜欢使用没有mxml的脚本。 提前谢谢..

我正在添加我的代码以显示我在使用CartesianDataCanvas时遇到的问题。它在面积图中完美运行，但我想在气泡图中绘制。由于气泡系列不是从水平类别轴的开始开始，因此CartesianDataCanvas从第一个气泡的中点开始绘制。但我试图在图表的整个宽度上绘制矩形。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >


    <fx:Script><![CDATA[
        import mx.charts.ChartItem;
        import mx.charts.LinearAxis;
        import mx.charts.chartClasses.CartesianCanvasValue;
        import mx.charts.chartClasses.CartesianTransform;
        import mx.charts.series.items.ColumnSeriesItem;
        import mx.collections.ArrayCollection;
        import mx.containers.Box;
        import mx.containers.HBox;
        import mx.controls.Alert;
        import mx.core.INavigatorContent;
        import mx.events.FlexEvent;

        [Bindable]
        public var profits:ArrayCollection = new ArrayCollection([
            {Month:'jan', Profit:130},
            {Month:'feb', Profit:75},
            {Month:'mar', Profit:110},
            {Month:'apr', Profit:300}
        ]);
        [Bindable]
        public var ratios:Array=['25','25','25','50'];
        [Bindable]
        public var colors:Array=['0xff0000','0x00ff00','0x0000ff','0xc0c0c0']
        private function draw():void {
            canvas.clear();
            canvas2.clear();
            if(colors.length==ratios.length){
                var canvasWidth = canvas.width;
                var canvasHeight = canvas.height;
                var sumRatio:Number=getSum(ratios);
                var nextMax:Number=0;
                for(var j:int=0, colnum:int=colors.length-1;j<colors.length;j++,colnum--){
                    canvas.beginFill(uint(colors[colnum]));
                    canvas2.beginFill(uint(colors[colnum]));
                    var minPt:Array;
                    var minimumPoint:Point;
                    if(j==0){
                        minimumPoint=new Point(0,0);

                    }else{
                        minimumPoint=new Point(0, canvasHeight*nextMax);
                    }
                    minPt= canvas.localToData(minimumPoint);
                    var division:Number=Number(ratios[colnum])/sumRatio;
                    var maxPt:Array = canvas.localToData(new Point(canvasWidth,minimumPoint.y+canvasHeight*division));
                    nextMax+=division;
                    canvas.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
                    canvas.endFill();
                    canvas2.drawRect(minPt[0], maxPt[1], maxPt[0], minPt[1]);
                    canvas2.endFill();
                }

            }


        }

        private function getSum(array:Array):Number{
            var sum:Number=0;
            for(var i:int=0;i<array.length;i++){
                if(!isNaN(Number(array[i]))){
                    sum+=Number(array[i]);
                }
            }
            return sum;
        }


    ]]></fx:Script>
    <s:HGroup>


            <mx:AreaChart id="myChart"  showDataTips="true"
                          dataProvider="{profits}" 
                          selectionMode="single" creationComplete="draw()"
                          >
                <mx:annotationElements>
                    <mx:CartesianDataCanvas id="canvas" alpha="0.2" includeInRanges="true"/>
                </mx:annotationElements>

                <mx:horizontalAxis>
                    <mx:CategoryAxis  
                        dataProvider="{profits}" 
                        categoryField="Month"
                        />
                </mx:horizontalAxis>

                <mx:series>
                    <mx:AreaSeries
                        id="series1"
                        xField="Month" 
                        yField="Profit" 
                        displayName="Profit"
                        selectable="true" 
                        >

                    </mx:AreaSeries>
                </mx:series>
            </mx:AreaChart>
            <mx:Legend dataProvider="{myChart}"/>
        <mx:BubbleChart id="mybubChart"  showDataTips="true"
                        dataProvider="{profits}" 
                        selectionMode="single" creationComplete="draw()"
                        >
            <mx:annotationElements>
                <mx:CartesianDataCanvas id="canvas2" alpha="0.2" includeInRanges="true"/>
            </mx:annotationElements>
            <mx:horizontalAxis>
                <mx:CategoryAxis  
                    dataProvider="{profits}" 
                    categoryField="Month"
                    />
            </mx:horizontalAxis>
            <mx:series>
                <mx:BubbleSeries
                    id="series2"
                    xField="Month" 
                    yField="Profit" 
                    radiusField="Profit"
                    displayName="Profit"
                    selectable="true" 
                    >
                    <mx:fill>
                        <mx:SolidColor color="0x663399"/>
                    </mx:fill>
                </mx:BubbleSeries>
            </mx:series>
        </mx:BubbleChart>
        <mx:Legend dataProvider="{mybubChart}"/>
    </s:HGroup>
</s:Application>