Порядок наложения оверлейной диаграммы столбца Flex
У меня есть столбец диаграммы в flex, который имеет довольно много столбцов, пользователь может выбрать для отображения в порядке столбцов или наложением. В зависимости от экрана пользователя это делает диаграмму более удобочитаемой. Тем не менее, это любой вызов, который я могу сделать, чтобы изменить порядок наложения в зависимости от данных. т.е. самый большой столбец данных за спиной, перекрывается следующим самым большим и т. д. и т. д. до четвертого, пока самый маленький столбец не окажется сверху. В настоящее время поведение по умолчанию, некоторые из маленьких столбцов скрыты большими столбцами, я не хочу изменять альфа-значения, чтобы сделать это. (прежде всего, благодаря flashharry!, поскольку я видел этот вопрос 2-3 раза на некоторых дискуссионных форумах, но нигде не отвечал). Это возможно в гибкой диаграмме столбца???
Любая помощь будет очень цениться.
Заранее спасибо..
@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>
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>