开发者

Flex charts gradient fill

开发者 https://www.devze.com 2022-12-08 14:23 出处:网络
I\'m struggling to reproduce the gradient 开发者_如何学Cfill of this chart. Are there tools that help testing GradientEntry properties on fills?I finally got it right. Below the code if you are intere

I'm struggling to reproduce the gradient 开发者_如何学Cfill of this chart. Are there tools that help testing GradientEntry properties on fills?


I finally got it right. Below the code if you are interested

<?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>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号