[
https://issues.apache.org/jira/browse/FLEX-33520?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13640917#comment-13640917
]
Terra Peterson commented on FLEX-33520:
---------------------------------------
I think i know what is causing this issue. I thought it was the FTE, but it is
not. I have a showdataeffect on the Pie Chart and when i remove this the
legend is rendered properly. Please see this post
http://seetsy.wordpress.com/2011/07/27/piechart-showdataeffect-with-seriesinterpolate-legend-bug/.
When you run the following code and change the "Occupation Group" it will not
show the legend colors. If you remove the showdataeffect from the pie chart it
will display the legend colors regardless.
Main Application Code:
<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"
xmlns:view="gov.bls.ncs.ors.ui.views.*"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import flashx.textLayout.compose.TextLineRecycler;
import mx.charts.ChartItem;
import mx.charts.chartClasses.IAxis;
import mx.charts.chartClasses.Series;
import mx.charts.series.items.BarSeriesItem;
import mx.charts.series.items.ColumnSeriesItem;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
public var occGroups:ArrayCollection = new
ArrayCollection([
{label:"Occupation Group 1"},
{label:"Occupation Group 2"}]);
[Bindable]
public var pieData:ArrayCollection = new
ArrayCollection([
{map:0, children: [
{education:"High School or
less",value:"23"},
{education:"Associate's / Other
Cert.",value:"20"},
{education:"Bachelor's",value:"40"},
{education:"Master's",value:"0"},
{education:"Doctorate/Professional
Degree",value:"0"}
]},
{map:1, children: [
{education:"High School or
less",value:"40"},
{education:"Associate's / Other
Cert.",value:"10"},
{education:"Bachelor's",value:"10"},
{education:"Master's",value:"40"},
{education:"Doctorate/Professional
Degree",value:"0"}
]}
]);
[Bindable]
public var columnData:ArrayCollection = new
ArrayCollection([
{map:0, children: [
{requirement:"Climb
Ladders",value:"13"},
{requirement:"Climb Stairs",value:"29"},
{requirement:"Crawling",value:"8"},
{requirement:"Crouching",value:"23"},
{requirement:"Fine Manip.",value:"9"},
{requirement:"Foot Leg
Controls",value:"69"},
{requirement:"Forward",value:"58"},
{requirement:"Gross Manip.",value:"48"},
{requirement:"Hand Arm
Controls",value:"26"},
{requirement:"Kneeling",value:"78"},
{requirement:"Lateral",value:"36"},
{requirement:"Overhead",value:"86"},
{requirement:"Pull Arms",value:"0"},
{requirement:"Push Arms",value:"0"},
{requirement:"Push Legs",value:"0"},
{requirement:"Reaching",value:"9"},
{requirement:"Shoulder",value:"9"},
{requirement:"Speaking",value:"0"},
{requirement:"Stooping",value:"5"}
]},
{map:1, children: [
{requirement:"Climb
Ladders",value:"10"},
{requirement:"Climb Stairs",value:"9"},
{requirement:"Crawling",value:"0"},
{requirement:"Crouching",value:"0"},
{requirement:"Fine Manip.",value:"3"},
{requirement:"Foot Leg
Controls",value:"49"},
{requirement:"Forward",value:"73"},
{requirement:"Gross Manip.",value:"24"},
{requirement:"Hand Arm
Controls",value:"19"},
{requirement:"Kneeling",value:"0"},
{requirement:"Lateral",value:"0"},
{requirement:"Overhead",value:"15"},
{requirement:"Pull Arms",value:"0"},
{requirement:"Push Arms",value:"0"},
{requirement:"Push Legs",value:"0"},
{requirement:"Reaching",value:"3"},
{requirement:"Shoulder",value:"63"},
{requirement:"Speaking",value:"45"},
{requirement:"Stooping",value:"29"}
]},
{map:2, children: [
{requirement:"Climb Ladders",value:"3"},
{requirement:"Climb Stairs",value:"53"},
{requirement:"Crawling",value:"10"},
{requirement:"Crouching",value:"5"},
{requirement:"Fine Manip.",value:"68"},
{requirement:"Foot Leg
Controls",value:"23"},
{requirement:"Forward",value:"40"},
{requirement:"Gross Manip.",value:"0"},
{requirement:"Hand Arm
Controls",value:"5"},
{requirement:"Kneeling",value:"35"},
{requirement:"Lateral",value:"18"},
{requirement:"Overhead",value:"0"},
{requirement:"Pull Arms",value:"0"},
{requirement:"Push Arms",value:"0"},
{requirement:"Push Legs",value:"0"},
{requirement:"Reaching",value:"5"},
{requirement:"Shoulder",value:"5"},
{requirement:"Speaking",value:"0"},
{requirement:"Stooping",value:"35"}
]},
{map:3, children: [
{requirement:"Climb
Ladders",value:"10"},
{requirement:"Climb Stairs",value:"3"},
{requirement:"Crawling",value:"13"},
{requirement:"Crouching",value:"45"},
{requirement:"Fine Manip.",value:"85"},
{requirement:"Foot Leg
Controls",value:"25"},
{requirement:"Forward",value:"0"},
{requirement:"Gross Manip.",value:"75"},
{requirement:"Hand Arm
Controls",value:"28"},
{requirement:"Kneeling",value:"13"},
{requirement:"Lateral",value:"0"},
{requirement:"Overhead",value:"5"},
{requirement:"Pull Arms",value:"0"},
{requirement:"Push Arms",value:"0"},
{requirement:"Push Legs",value:"0"},
{requirement:"Reaching",value:"20"},
{requirement:"Shoulder",value:"5"},
{requirement:"Speaking",value:"58"},
{requirement:"Stooping",value:"13"}
]}
]);
private function pieSeries_labelFunc(item:Object,
field:String, index:Number, percentValue:Number):String {
return item.value+"%";
}
private function
setCustomLabelColumn(element:ChartItem, series:Series):String {
var data:ColumnSeriesItem =
ColumnSeriesItem(element);
return data.yNumber+"%";
}
private function linearAxis_labelFunc(item:Object,
prevValue:Object, axis:IAxis):String {
return item+"%";
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects)
here -->
<mx:SeriesSlide
duration="1000"
direction="up"
minimumElementDuration="20"
elementOffset="30"
id="slideUp"/>
<mx:SeriesSlide
duration="1000"
direction="right"
minimumElementDuration="20"
elementOffset="30"
id="slideRight"/>
<mx:SeriesInterpolate
id="pieEffect"
duration="1000"
/>
</fx:Declarations>
<fx:Style source="/assets/css/main.css"/>
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:SkinnableContainer id="controlBar" skinClass="ControlBarSkin"
top="0" right="0" left="0" height="35">
<s:ComboBox id="occGrp" prompt="Occupational Group" width="350"
dataProvider="{occGroups}" selectedIndex="0"/>
<s:Spacer width="10" />
<s:ComboBox prompt="Occupation" width="350"/>
<s:Spacer width="10"/>
<s:ComboBox prompt="Occupation Characteristic" width="350"/>
</s:SkinnableContainer>
<s:Group top="{controlBar.y+controlBar.height+10}" left="5" right="5"
bottom="5">
<s:layout>
<s:HorizontalLayout verticalAlign="bottom"/>
</s:layout>
<mx:PieChart id="pieChart" width="100%" height="100%"
dataProvider="{pieData.getItemAt(occGrp.selectedIndex).children}"
showDataTips="true">
<mx:series>
<mx:PieSeries
field="value"
nameField="education"
labelPosition="outside"
labelFunction="pieSeries_labelFunc"
showDataEffect="{pieEffect}"/>
</mx:series>
</mx:PieChart>
<mx:Legend id="pieLegend" dataProvider="{pieChart}"
top="{pieChart.y+pieChart.height+5}"
direction="vertical"/>
<mx:VRule height="100%" />
<mx:ColumnChart
dataProvider="{columnData.getItemAt(occGrp.selectedIndex).children}"
showDataTips="true"
width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis id="hAxis"
dataProvider="{columnData.getItemAt(occGrp.selectedIndex).children}"
categoryField="requirement"
/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer labelRotation="45"
axis="{hAxis}"/>
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis maximum="100"
labelFunction="linearAxis_labelFunc"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries
labelAlign="center"
labelPosition="outside"
xField="requirement"
yField="value"
labelFunction="setCustomLabelColumn"
showDataEffect="{slideUp}"
styleName="columnFills"/>
</mx:series>
</mx:ColumnChart>
</s:Group>
</s:Application>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Main.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace spark "spark.skins.spark.*";
@font-face{
src:url("assets/fonts/arial.ttf");
fontFamily: myFont;
embedAsCFF: true;
fontAntiAliasType: advanced;
}
@font-face{
src:url("assets/fonts/arial.ttf");
fontFamily: myFontMX;
embedAsCFF: false;
}
s|Application {
backgroundColor: #ffffff;
}
.headerStyle
{
fontSize: 25;
color: #ffffff;
fontWeight: bold;
}
.navigatorStyle
{
backgroundColor: #e6e6e6;
cornerRadius: 0;
tabStyleName: "MyTabs";
firstTabStyleName: "MyFirstTab";
lastTabStyleName: "MyLastTab";
selectedTabTextStyleName: "MySelectedTab";
borderColor: silver;
tabHeight: 40;
tabWidth: 200;
fontSize: 14;
}
.MyTabs {
fillColors: #ffffff, #cccccc;
cornerRadius: 0;
color: black;
}
.MyFirstTab,
.MyLastTab {
cornerRadius: 0;
color: black;
}
.MySelectedTab {
color: haloBlue;
textRollOverColor: haloBlue;
fontWeight: bold;
}
.containerlabelStyle
{
fontSize: 14;
color: #000000;
fontWeight: bold;
backgroundColor: haloSilver;
paddingTop: 7;
paddingBottom: 5;
}
.textAreaStyle
{
fontSize: 12;
color: #000000;
fontWeight: bold;
}
.contentStyle {
backgroundColor: haloSilver;
}
s|ComboBox {
}
.sectionLabel
{
fontSize: 12;
color: #000000;
fontWeight: normal;
}
.dataGrid {
verticalGridLines: false;
borderThickness: 0;
borderStyle: none;
backgroundAlpha: 0;
useRollOver: false;
fontSize: 11;
}
mx|LegendItem
{
fontFamily: myFontMX;
fontWeight: normal;
textFieldClass: ClassReference("mx.core.UITextField");
}
mx|ColumnChart {
fontFamily: myFont;
}
.columnFills
{
/*fills: #993333;*/
}
.barFills
{
/*fills: #993333;*/
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ControlBarSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for a Spark SkinnableContainer container.
@see spark.components.SkinnableContainer
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"; alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.SkinnableContainer")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!--- Defines the appearance of the SkinnableContainer class's background.
-->
<s:Rect id="background" left="0" right="0" top="0" bottom="0">
<s:fill>
<!--- @private -->
<s:SolidColor id="bgFill" color="#e6e6e6"/>
</s:fill>
</s:Rect>
<!--
Note: setting the minimum size to 0 here so that changes to the host
component's
size will not be thwarted by this skin part's minimum size. This is a
compromise,
more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
-->
<!--- @copy spark.components.SkinnableContainer#contentGroup -->
<s:Group id="contentGroup" left="0" right="0" top="0" bottom="0"
minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" paddingBottom="10"
paddingRight="5" paddingLeft="5" paddingTop="5"/>
</s:layout>
</s:Group>
</s:Skin>
> When using FTE with MX components the color box in the Legend does not show
> up for series displayed in Pie Chart.
> -----------------------------------------------------------------------------------------------------------------
>
> Key: FLEX-33520
> URL: https://issues.apache.org/jira/browse/FLEX-33520
> Project: Apache Flex
> Issue Type: Bug
> Components: Charts
> Affects Versions: Apache Flex 4.9.0
> Environment: Windows 7, using Flashbuilder 4.6.
> Reporter: Terra Peterson
>
> I've tried to embed another font to use with MX components and then assigned
> this font to the LegendItem with the text field class (as shown below), but
> it still does not work properly.
> mx|LegendItem
> {
> fontFamily: myFontMX;
> fontWeight: normal;
> textFieldClass: ClassReference("mx.core.UITextField");
> }
--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators
For more information on JIRA, see: http://www.atlassian.com/software/jira
