Question

我创建了View stack.Inside该视图堆栈包含canvas.I已经开发了单独的图表组件。我想在canvas上的视图堆栈中加载这些图表。如何将图表组件添加到画布？伙计你有什么想法吗？

<mx:VBox left="700" id="group" >

<mx:HBox top="300">
    <s:Button label="Column Chart" click="columnChart(event)"/>
    <s:Button label="Pie Chart" click="pieChart(event)"/>
    <s:Button label="Stacked Chart" click="stackedChart(event)"/>
    <mx:Button label="Bar Chart" click="barChart(event)"/>
</mx:HBox>


<mx:ViewStack id="stack">

    <mx:Canvas id="pie"/>

    <mx:Canvas id="stacked"/>

    <mx:Canvas id="column"/>

    <mx:Canvas id="bar"/>

</mx:ViewStack>

Answer 1

ViewStack控件使用selectedIndex和selectedChild属性来决定要显示的元素。您只需将子项添加到您的画布并设置所需的selectedIndex（尽管我建议每个Canvas都有自己的MXML独立组件）

        [Bindable]
        public var _barData:ArrayCollection =
            new ArrayCollection([{Month: "Jan", Profit: 2000, Expenses: 1500},
            {Month: "Feb", Profit: 1000, Expenses: 200}, {Month: "Mar", Profit: 1500, Expenses: 500}]);

        [Bindable]
        public var _pieData:ArrayCollection =
            new ArrayCollection([{Expense: "Taxes", Amount: 2000}, {Expense: "Rent", Amount: 1000},
            {Expense: "Bills", Amount: 100}, {Expense: "Car", Amount: 450}, {Expense: "Gas", Amount: 100},
            {Expense: "Food", Amount: 200}]);
    ]]>
</mx:Script>

<mx:VBox width="640" height="480" horizontalCenter="0" verticalCenter="0">
    <mx:ButtonBar id="navBar" selectedIndex="0">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>Pie Chart</mx:String>
                <mx:String>Bar Chart</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>
    <mx:ViewStack id="stack" width="100%" height="100%" selectedIndex="{this.navBar.selectedIndex}">

        <mx:Canvas id="pie">
            <mx:Panel width="100%" height="100%" title="Pie Chart">
                <mx:PieChart id="pieChart" dataProvider="{_pieData}" showDataTips="true">
                    <mx:series>
                        <mx:PieSeries field="Amount" labelPosition="callout" nameField="Expense" />
                    </mx:series>
                </mx:PieChart>
                <mx:Legend dataProvider="{this.pieChart}" />
            </mx:Panel>
        </mx:Canvas>

        <mx:Canvas id="bar">
            <mx:Panel width="100%" height="100%" title="Bar Chart">
                <mx:BarChart id="barChart" dataProvider="{_barData}" showDataTips="true">
                    <mx:verticalAxis>
                        <mx:CategoryAxis dataProvider="{_barData}" categoryField="Month" />
                    </mx:verticalAxis>
                    <mx:series>
                        <mx:BarSeries displayName="Profit" xField="Profit" yField="Month" />
                        <mx:BarSeries displayName="Expenses" xField="Expenses" yField="Month" />
                    </mx:series>
                </mx:BarChart>
                <mx:Legend dataProvider="{this.barChart}" />
            </mx:Panel>
        </mx:Canvas>

    </mx:ViewStack>
</mx:VBox>

如何向Canvas添加自定义组件

1 个答案: