Flex 图表渐变填充

Question

我正在努力重现此chart 的渐变填充。是否有工具可以帮助测试填充的 GradientEntry 属性？

Answer 1

我终于做对了。如果您有兴趣，请在代码下方

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
  <![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var dummyData:ArrayCollection = new ArrayCollection([
            { x:10, y1: 2000, y2:1200 },
            { x:20, y1: 3000, y2:1000  },
            { x:30, y1: 2000, y2:1500 },
            { x:40, y1: 1800, y2:1200  },
            { x:50, y1: 2000, y2:1400  },
            { x:60, y1: 1500, y2:1200  },
            { x:70, y1: 2000, y2:1200 },
            { x:80, y1: 1500, y2:2000  },
            { x:90, y1: 1500, y2:2500 },
            { x:100, y1: 1800, y2:1700  },
            { x:110, y1: 2400, y2:1200  },
            { x:120, y1: 3000, y2:1500  },
            { x:130, y1: 200, y2:200 }
     ]);

  ]]>
  </mx:Script>
  <mx:Panel title="Area Chart">
     <mx:AreaChart id="myChart" dataProvider="{dummyData}"
     showDataTips="true" >
     <mx:fill>
           <mx:SolidColor color="#000000" />
     </mx:fill>

      <mx:horizontalAxis>
          <mx:CategoryAxis 
               dataProvider="{dummyData}" 
               categoryField="x"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:AreaSeries yField="y1" displayName="y1">
            <mx:areaStroke>
              <mx:Stroke color="#00688B" weight="2"/>
            </mx:areaStroke>
            <mx:areaFill>
             <mx:LinearGradient angle="90">
           <mx:entries>
                <mx:GradientEntry color="#00688B" alpha="0.8" />
                <mx:GradientEntry color="#005B79" alpha="0.8" />
                <mx:GradientEntry color="#00475F" alpha="0.8" />
                <mx:GradientEntry color="#003445" alpha="0.5" />
                <mx:GradientEntry color="#002734" alpha="0.5" />
                <mx:GradientEntry color="#00131A" alpha="0.5" />
                <mx:GradientEntry color="#000000" alpha="0.2" />
           </mx:entries>
             </mx:LinearGradient>
            </mx:areaFill>
           </mx:AreaSeries>   
           <mx:AreaSeries yField="y2" displayName="y2">
            <mx:areaStroke>
              <mx:Stroke color="#FF7D40" weight="2"/>
            </mx:areaStroke>
            <mx:areaFill>
             <mx:LinearGradient angle="90">
           <mx:entries>
                <mx:GradientEntry color="#FF7D40" alpha="0.8" />
                <mx:GradientEntry color="#EF753C" alpha="0.8" />
                <mx:GradientEntry color="#DF6D38" alpha="0.8" />
                <mx:GradientEntry color="#AF552C" alpha="0.5" />
                <mx:GradientEntry color="#6F361C" alpha="0.5" />
                <mx:GradientEntry color="#4F2714" alpha="0.5" />
                <mx:GradientEntry color="#000000" alpha="0.2" />
           </mx:entries>
             </mx:LinearGradient>
            </mx:areaFill>
         </mx:AreaSeries>
        </mx:series>      
     </mx:AreaChart>
 </mx:Panel>
</mx:Application>