如何将 XML 设置为 Flex 中图表的 dataProvider？答案

【问题标题】：How to Set XML as dataProvider for Charts in Flex?如何将 XML 设置为 Flex 中图表的 dataProvider？
【发布时间】：2011-03-13 10:12:13
【问题描述】：

我想将从 Oracle 数据库导出的 XML 显示为图表......

xml 的结构如下：

<ROWSET>
  <ROW>
        <ORDER_ITEMS_ID>1</ORDER_ITEMS_ID>
        <ORDER_ID>1</ORDER_ID>
        <PRODUCT_ID>1</PRODUCT_ID>
        <UNIT_PRICE>1200</UNIT_PRICE>
        <QUANTITY>1</QUANTITY>
  </ROW>
  <ROW>
        <ORDER_ITEMS_ID>2</ORDER_ITEMS_ID>
        <ORDER_ID>7</ORDER_ID>
        <PRODUCT_ID>1</PRODUCT_ID>
        <UNIT_PRICE>1100</UNIT_PRICE>
        <QUANTITY>3</QUANTITY>
  </ROW>

我见过许多使用 ArrayCollection 作为 DataProvider 的图表示例。使用相同的方式，我尝试设置 xml 。但没有结果。

您能否建议我如何将 XML 设置为 dataprovider ？（或 XMLList 或 XMLlistcollection ）（我正在 AIR 中开发一个小应用程序）

【问题讨论】：

你能分享一下你用来让xml成为数据提供者的代码吗？？

标签： xml apache-flex flex4 dataprovider

【解决方案1】：

我不知道你的图表是什么意思，但这里有一个简单的例子，XMLList 提供程序用于基于元素的值和基于属性的值

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)"
               >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            private var xml1:XML = <ROWSET>
                                        <ROW>
                                            <ORDER_ITEMS_ID>1</ORDER_ITEMS_ID>
                                            <ORDER_ID>1</ORDER_ID>
                                            <PRODUCT_ID>1</PRODUCT_ID>
                                            <UNIT_PRICE>1200</UNIT_PRICE>
                                            <QUANTITY>1</QUANTITY>
                                        </ROW>
                                        <ROW>
                                            <ORDER_ITEMS_ID>2</ORDER_ITEMS_ID>
                                            <ORDER_ID>7</ORDER_ID>
                                            <PRODUCT_ID>1</PRODUCT_ID>
                                            <UNIT_PRICE>1100</UNIT_PRICE>
                                            <QUANTITY>3</QUANTITY>
                                        </ROW>
                                </ROWSET>;

            private var xml2:XML = <ROWSET>
                                            <ROW ORDER_ITEMS_ID="1"
                                                ORDER_ID="1"
                                                PRODUCT_ID="1"
                                                UNIT_PRICE="1200"
                                                QUANTITY="1"
                                            />
                                            <ROW ORDER_ITEMS_ID="2"
                                                ORDER_ID="7"
                                                PRODUCT_ID="1"
                                                UNIT_PRICE="1100"
                                                QUANTITY="3"
                                            />

                                    </ROWSET>;

            [Bindable]
            private var xmlList1:XMLList;
            [Bindable]
            private var xmlList2:XMLList;


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                xmlList1 = xml1.ROW;
                xmlList2 = xml2.ROW;
            }   

        ]]>
    </fx:Script>


    <s:VGroup>
        <mx:ColumnChart id="chart1" dataProvider="{xmlList1}" showDataTips="true">
            <mx:series>
                <mx:ColumnSeries
                    yField="ORDER_ITEMS_ID"
                    />
                <mx:ColumnSeries
                    yField="ORDER_ID"
                    />
                <mx:ColumnSeries
                    yField="PRODUCT_ID"
                    />
                <mx:ColumnSeries
                    yField="UNIT_PRICE"
                    />
                <mx:ColumnSeries
                    yField="QUANTITY"
                    />              
            </mx:series>
        </mx:ColumnChart>

        <mx:ColumnChart id="chart2" dataProvider="{xmlList2}" showDataTips="true">
            <mx:series>
                <mx:ColumnSeries
                    yField="@ORDER_ITEMS_ID"
                    />
                <mx:ColumnSeries
                    yField="@ORDER_ID"
                    />
                <mx:ColumnSeries
                    yField="@PRODUCT_ID"
                    />
                <mx:ColumnSeries
                    yField="@UNIT_PRICE"
                    />
                <mx:ColumnSeries
                    yField="@QUANTITY"
                    />  
            </mx:series>
        </mx:ColumnChart>       
    </s:VGroup>
</s:Application>

【讨论】：

【解决方案2】：

如果你想使用 xml 文件作为数据提供者并且你的文件是这样的

<data>
<result month="Jan-04">
<apple>81768</apple>
<orange>60310</orange>
<banana>43357</banana>
</result>
<result month="Feb-04">
<apple>81156</apple>
<orange>58883</orange>
<banana>49280</banana>
</result>
</data>

你可以这样做

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="results" source="../assets/data.xml"/>
<mx:Panel title="Line Chart">
 <mx:LineChart id="myChart" dataProvider="{results.result}" showDataTips="true">
    <mx:horizontalAxis>
       <mx:CategoryAxis categoryField="month"/>
    </mx:horizontalAxis>
    <mx:series>
       <mx:LineSeries yField="banana" displayName="Banana"/>
       <mx:LineSeries yField="apple" displayName="Apple"/>
       <mx:LineSeries yField="orange" displayName="Orange"/>
    </mx:series>
 </mx:LineChart>
 <mx:Legend dataProvider="{myChart}"/>

在从任何数据库检索数据后，您还可以使用 php 或任何其他类型的服务器端编码将数据呈现为 xml。在这种情况下，请使用 mx:Model 的源代码

source="http://localhost/yourproj/data.php"

【讨论】：

【解决方案3】：

[Bindable] private var PIE_XML:XML= <RowSet>
                                                <row>
                                                  <category>red</category>
                                                  <other_data>50</other_data>
                                                </row>
                                                <row>
                                                  <category>blue</category>
                                                  <other_data>20</other_data>
                                                </row>
                                                <row>
                                                  <category>green</category>
                                                  <other_data>30</other_data>
                                                </row>
                                                <row>
                                                  <category>gold</category>
                                                  <other_data>30</other_data>
                                                </row>
                                            </RowSet>;

私有函数init():void {

            var newItem:Object;
            for(var i:int=0;i<PIE_XML.row.length();i++)
            {
                newItem=new Object();
                newItem.label=PIE_XML.row[i].category;
                newItem.data=PIE_XML.row[i].other_data;

                _pieChart.addItem(newItem);
            }

}

从上面的代码中，我们可以将 XML 转换为数组集合，然后我们可以将数组用于图表的数据提供者。提供的解决方案是http://digitaladwords.com/的一半

【讨论】：