Question

我有以下xml结构：

<root>
   <day name="Sun" values="21,22,25,26"/>
   <day name="Mon" values="27,20,22,25"/>
</root>

我希望它在带有堆叠条形的柱形图中表示。第一列将包括彼此堆叠的列，其值21,22,25和26对应于星期日。每次更新数据提供者时，值的长度可能会更改。所以我写了代码：

var columnChart:ColumnChart = new ColumnChart();
columnchart.type="stacked";
var yAxisData:String = "@values";
var xAxisData:String = "@name";
var dp:XMLListCollection = new XMLListCollection(xmlFile.day); 
columnchart.dataProvider = dp;

var valueLength:int = dp[0][yAxisData].toString().split(",").length;
for(var count:int = 0;count<valueLength;count++){
var bSeries:ColumnSeries = new ColumnSeries();
bSeries.dataProvider = dataProvider;
bSeries.xField = xAxisData;
bSeries.yField = yAxisData+"["+count+"]";
columnchart.series.push(bSeries);
}
var hAxis:CategoryAxis = new CategoryAxis();
hAxis.dataProvider = dp;
hAxis.categoryField = xAxisData ;   
CartesianChart(columnchart).horizontalAxis = hAxis;

但图表显示为空。我哪里做错了？

Answer 1

以下代码可以帮助您： -

<?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">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:XML format="e4x" id="xmlFile">
            <root>
                <day name="Fri" values="11,22,33,44,55,66"/>
                <day name="Sat" values="10,20,30,40,50,60"/>
                <day name="Sun" values="21,22,25,26,56,76"/>
                <day name="Mon" values="5,10,15,20,25,30"/>
            </root>
        </fx:XML>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.charts.CategoryAxis;
            import mx.charts.ColumnChart;
            import mx.charts.Legend;
            import mx.charts.chartClasses.CartesianChart;
            import mx.charts.chartClasses.Series;
            import mx.charts.series.ColumnSeries;
            import mx.charts.series.ColumnSet;
            import mx.collections.ArrayCollection;
            import mx.collections.XMLListCollection;


            private function createChart():void
            {
                var columnChart:ColumnChart = new ColumnChart();
                var dp:XMLListCollection = new XMLListCollection(xmlFile.day);  
                var stackedData:ArrayCollection = new ArrayCollection();

                var yAxisData:String = "@values";
                var xAxisData:String = "@name";

                var horizontalCategoryAxis:CategoryAxis = new CategoryAxis();
                horizontalCategoryAxis.categoryField = "name";
                columnChart.horizontalAxis = horizontalCategoryAxis;

                var columnSet:ColumnSet = new ColumnSet();
                columnSet.type = "stacked";

                for(var row:int=0; row < dp.length; row++){
                    var arrayData:Array = dp[row][yAxisData].toString().split(",");

                    var seriesArray:Array = new Array();

                    var obj:Object = new Object();
                    obj.name = dp[row][xAxisData].toString();

                    for(var j:int=0; j < arrayData.length; j++)
                    {
                        obj["xValues"+j] = arrayData[j].toString();
                    }
                    stackedData.addItem(obj);
                }

                for(var col:int=0; col < arrayData.length; col++){
                    var colmSeries:ColumnSeries = new ColumnSeries();
                    colmSeries.yField = "xValues"+col;
                    colmSeries.displayName = "Value at "+col;
                    seriesArray.push(colmSeries);
                }

                columnSet.series = seriesArray;
                columnChart.series = [columnSet];

                columnChart.dataProvider = stackedData;
                columnChart.percentWidth = 70;
                columnChart.percentHeight = 70;
                columnChart.showDataTips = true;

                var legend:Legend = new Legend();
                legend.direction = "horizontal";
                legend.dataProvider = columnChart;

                container.addElement(columnChart);
                container.addElement(legend);
            }

        ]]>
    </fx:Script>

    <s:VGroup id="container" width="100%" height="100%" creationComplete="createChart()"/>
</s:Application>

Flex Stacked ColumnChart未显示

1 个答案: