flex line chrat 例子

最新推荐文章于 2022-04-28 16:14:15 发布

最新推荐文章于 2022-04-28 16:14:15 发布 · 192 阅读

文章标签：

#Flex

flex 专栏收录该内容

6 篇文章

订阅专栏

本文提供了一个使用Flex创建的曲线图示例，展示了如何利用LineChart组件及相关的数据集配置来展示不同类型的财务数据，包括利润、支出和余额等。

flex曲线图例子如下:
myflex.mxml:


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  width="100%">
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([          
          {Day: "11", Profit: 2000, Expenses: 1500, Amount: 450},
            {Day: "12", Profit: 1000, Expenses: 200, Amount: 600},
            {Day: "13", Profit: 1500, Expenses: 500, Amount: 300},     
            {Day: "14", Profit: 1000, Expenses: 800, Amount: 600} ,
             {Day: "15", Profit: 1100, Expenses: 700, Amount: 300} ,
              {Day: "16", Profit: 1500, Expenses: 600, Amount: 600} ,
               {Day: "17", Profit: 1800, Expenses: 900, Amount: 700} ,
                {Day: "18", Profit: 600, Expenses: 1000, Amount: 900} ,
                 {Day: "19", Profit: 800, Expenses: 1300, Amount: 100}, 
                  {Day: "20", Profit: 500, Expenses: 800, Amount: 300}     
              ]);
    ]]></mx:Script>
    <mx:Panel title="曲线图" fontSize="20" width="100%">
        <mx:LineChart dataProvider="{expenses}" showDataTips="true" width="100%">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{expenses}" categoryField="Day"/>
            </mx:horizontalAxis>
            <mx:series>
                <mx:LineSeries yField="Profit" displayName="111"  />
                <mx:LineSeries yField="Expenses" displayName="曲线"  />
                  <mx:LineSeries yField="Amount" displayName="Amount"/>
            </mx:series>
        </mx:LineChart>
    </mx:Panel>
</mx:Application>