柔性圖表漸變填充

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>