How do I set background color of Line Series chart in Flex

Question

I have a Line Series Chart in Flex with values from 0 to 90. I would like to set the background of the chart in such a way that, 0 - 30 is in green, 31 - 60 is in red and 61 - 90 is in blue.

I am new to Flex. Can someone tell me how this can be done?

Answer 1

This is super old, but I stumbled upon it while Googling and for posterity sake, wanted to add this.

The best and preferred way is to set the backgroundElements property of the chart. Here's an example:

<fx:Array id="backgroundChartElements">
<mx:GridLines>
    <mx:horizontalFill>
        <s:SolidColor color="0x000000" alpha="1" />
    </mx:horizontalFill>
    <mx:horizontalAlternateFill>
        <s:SolidColor color="0x000000" alpha=".5" />
    </mx:horizontalAlternateFill>
</mx:GridLines>
</fx:Array>
<mx:LineChart backgroundElements="{backgroundChartElements}" ... />

See this document for more information on messing with the background and grid lines

Answer 2

There is a class called CartesianDataCanvas that is designed for this kind of thing.

You add an instance to the chart's backgroundElements and use a drawing API to draw on it. What is handy is that the drawing API on these objects works in terms of data coordinates, not screen coordinates saving you a lot of converstion work and making scaling and resizing much easier.

More here

Answer 3

最简单的方法是将图形的最大值和最小值设置为固定值（这样它就不会自动调整大小），并使用普通的绘图API在其后绘制颜色条。