我在flex中有一个柱形图，它有很多列，用户可以选择按列顺序显示或重叠显示。根据用户屏幕，它使图表更具可读性。 但是，根据数据，我可以进行任何调用以使叠加顺序发生变化。即背面的最大数据列，由下一个最大的数据列覆盖，所以第四列直到最小列在顶部。 目前默认行为一些小列被较大的列遮挡，我不想更改alpha值来执行此操作。 （首先要归功于flashharry! 我在一些论坛上看过question 2-3次，但在任何地方都没有回答。这是可能的flex柱形图???
任何帮助都会非常感激。
提前致谢..
@Serge Him
代码示例： - 在下面的代码中，最近两个月的利润低于费用，因此我们无法看到系列，因为它是支出系列的背后。我希望更大的价值总是落后于较低的价值
<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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1100, Expenses:500},
{Month:"Apr", Profit:1300, Expenses:900},
{Month:"May", Profit:900, Expenses:1200},
{Month:"June", Profit:1500, Expenses:2500}
]);
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:BorderContainer width="100%" height="100%" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:ColumnChart id="myChart" width="65%"
dataProvider="{expenses}"
showDataTips="true"
type="overlaid"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField="Profit"
displayName="Profit"
>
<mx:fill>
<s:SolidColor color="0x00ff00"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries
yField="Expenses"
displayName="Expenses"
>
<mx:fill>
<s:SolidColor color="0xff0000"/>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:DataGrid dataProvider="{expenses}" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Month" editable="true"/>
<mx:DataGridColumn dataField="Profit" editable="true"/>
<mx:DataGridColumn dataField="Expenses" editable="true"/>
</mx:columns>
</mx:DataGrid>
</s:BorderContainer>
</s:Application>
答案 0 :(得分：1)
我已经研究过您的问题，深入初始化ColumnChart组件。有一个功能，系列中的所有列都放在单独的图层中。因此，绿色列位于顶部或红色。无法从系列中更改一列的父级...我担心您必须覆盖组件的基本行为并将所有列放在同一容器中并对其深度进行排序。我举了一个例子：
<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" width="900" height="600">
<fx:Script>
<![CDATA[
import mx.charts.series.items.ColumnSeriesItem;
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:200, Expenses:100, Expenses2:50},
{Month:"Feb", Profit:1000, Expenses:2000, Expenses2:500},
{Month:"Mar", Profit:1100, Expenses:500, Expenses2:100},
{Month:"Apr", Profit:1300, Expenses:900, Expenses2:1000},
{Month:"May", Profit:900, Expenses:1200, Expenses2:1000},
{Month:"June", Profit:1000, Expenses:2000, Expenses2:1500}
]);
private var items:Array = [];
private function init():void
{
items = [];
for (var i:int=0; i<myChart.series.length; i++)
{
var series:ColumnSeries = myChart.series[i] as ColumnSeries;
for (var j:int=0; j<series.items.length; j++)
{
if (!items[j])
items[j] = [];
var item:ColumnSeriesItem = series.items[j] as ColumnSeriesItem;
items[j][i] = item;
series.parent.addChild(item.itemRenderer as DisplayObject);
}
}
sort();
}
private function sort():void
{
var h:Number = myChart.height - 50;
for (var i:int=0; i<items.length; i++)
{
var group:Array = items[i];
group.sort(sortFunction);
for (var j:int=0; j<group.length; j++)
{
var item:ColumnSeriesItem = group[j] as ColumnSeriesItem;
item.itemRenderer.parent.setChildIndex(item.itemRenderer as DisplayObject, group.length - j - 1);
item.min = NaN;
if (j > 0)
item.min = h - group[j-1].itemRenderer.height;
}
}
}
private function sortFunction(item1:ColumnSeriesItem, item2:ColumnSeriesItem):int
{
var yValue1:int = item1.item[Object(item1.element).yField];
var yValue2:int = item2.item[Object(item2.element).yField];
return (yValue1 < yValue2) ? -1 : (yValue1 > yValue2) ? 1 : 0;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:BorderContainer width="100%" height="100%" >
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:ColumnChart id="myChart" width="65%"
dataProvider="{expenses}"
showDataTips="true"
type="overlaid"
updateComplete="init()"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField="Profit"
displayName="Profit"
>
<mx:fill>
<s:SolidColor color="0x00ff00"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries
yField="Expenses"
displayName="Expenses"
>
<mx:fill>
<s:SolidColor color="0xff0000"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries
yField="Expenses2"
displayName="Expenses2"
>
<mx:fill>
<s:SolidColor color="0xffff00"/>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}"/>
<mx:DataGrid dataProvider="{expenses}" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Month" editable="true"/>
<mx:DataGridColumn dataField="Profit" editable="true"/>
<mx:DataGridColumn dataField="Expenses" editable="true"/>
<mx:DataGridColumn dataField="Expenses2" editable="true"/>
</mx:columns>
</mx:DataGrid>
</s:BorderContainer>
</s:Application>