<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()"
backgroundColor="#FFFFFF" width="350" height="125"
layout="absolute">
<!-- 鼠标指中时候弹出提示框的样式，可根据个人情况而修改 -->
<mx:Style>
*{
fontFamily:”Verdana”,”宋体”;
fontSize: 12;
}
</mx:Style>
<mx:Script>
<!--[CDATA[
//导入相关包
import mx.collections.ArrayCollection;
import mx.charts.*;
import mx.charts.series.ColumnSeries;
import mx.charts.series.BarSeries;
import mx.charts.chartClasses.Series;
import mx.collections.ArrayCollection;
import mx.graphics.IFill;
import mx.charts.ChartItem;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.series.items.BarSeriesItem;
import mx.charts.CategoryAxis;
import mx.graphics.SolidColor;
//颜色集合
private var arrayColor:Array=["#FF8000", "#00FFFF"];
private static var cnt:int=0;
//定义生成柱状图的数组
[Bindable]
private var medalsAC:ArrayCollection=new ArrayCollection([{date: "重复信息", close: 28, open: 0}, {date: "全部信息", close: 0, open: 100}]);
private var obj2:Array=[{xField: "close", displayName: "left"}, {xField: "open", displayName: "right"}];
/**
* 初始化方法
*/
internal function initApp():void
{
//var aryDailyVoucher:Array=[{date: "type1", close: 41.71}, {date: "type12", close: 44},];
// var obj2:Array=[{xField: "close", displayName: "left"}, {xField: "open", displayName: "right"}];
// bar.dataProvider=medalsAC;
// bar.verticalAxis=setCategoryAxis("date");
// bar.series=setColumnSeries(obj2, "date");
// bar.setStyle("barWidthRatio", 0.5);
}
// /**
// *设置颜色
// */
public function colorFillFunction(item:ChartItem, index:Number):IFill
{
cnt++;
if (cnt % 2 == 0)
return arrayColor[0];
else
return arrayColor[1];
}
public function myLabelFormat(obj:Object, pcat:Object, ax:LinearAxis):String
{
if (int(obj) > 100)
return "";
return numForm.format(obj) + "%";
}
public function myLabelDisplay(hd:HitData):String
{
//return "相似度:" + hd.item.close + "%";
var curObj:Object=hd.item;
var curSeries:BarSeries=BarSeries(hd.chartItem.element);
if (curSeries.xField == "close")
return "重复度:" + hd.item.close + "%";
else
// return null;
return "全部信息:" + hd.item.open + "%";
}
public function setCustomLabel(element:ChartItem, series:Series):String
{
var item:BarSeriesItem=BarSeriesItem(element);
var ser:BarSeries=BarSeries(series);
if (ser.xField == "close")
return "重复度:" + item.xNumber + "%";
// return '<font color="#ff0000">' + "相似度:" + item.xNumber + "%" + '</font>';
else
return "";
//return ser.xField.toString() + ":" + item.xNumber;
}
private function myLabelFunction(element:ChartItem, series:Series):String {
trace("hello");
var item:BarSeriesItem = BarSeriesItem(element);
var ser:BarSeries = BarSeries(series);
return (ser.xField.toString() +":"+ item.xNumber);
}
// This method customizes the values of the axis labels.
// This signature (with 4 arguments) is for a CategoryAxis.
public function defineLabel(
cat:Object,
pcat:Object,
ax:CategoryAxis,
labelItem:Object):String
{
// Return the customized categoryField value:
//return cat + "";
return '<font size="20"><font color="#0B0B0B" weight="4">' + cat + '</font></font>';
//'<font color="#ff0000">' + temp + </font>';
//return null;
}
/**
*设置柱图形categoryField
*/
public function setCategoryAxis(categoryField:String):CategoryAxis
{
var ca:CategoryAxis=new CategoryAxis;
ca.categoryField=categoryField;
return ca;
}
/**
* 设置柱形X轴对应柱状数据
* xy数组必需为xy=[{yField:"Gold"},{yField:"Gold1"}]
* displayName要与setCategoryAxis的值对应
*/
public function setColumnSeries(xFieldArr:Object, yField:String):Array
{
arrayColor=new Array();
var cs:BarSeries;
var rsArr:Array=new Array;
for (var i:int=0; i < xFieldArr.length; i++)
{
cs=new BarSeries();
var xField:String=xFieldArr[i]["xField"];
var color:String=xFieldArr[i]["color"];
var displayName:String=xFieldArr[i]["displayName"];
cs.name=new String(i);
cs.displayName=displayName;
cs.xField=xField;
cs.yField=yField;
cs.fillFunction=colorFillFunction;
cs.labelFunction=myLabelFunction;
cs.setStyle("labelPosition","outside");
rsArr.push(cs);
arrayColor.push(color);
}
return rsArr;
}
public function dataSourceChange(data:Object):void
{
medalsAC[0]["close"] = int(data);
bar.dataProvider = medalsAC;
}
]]-->
</mx:Script>
<mx:NumberFormatter id="numForm"
useThousandsSeparator="true"/>
<!-- 横条的颜色 alpha为透明度，默认为.10 -->
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="#ff9f2c"/>
<mx:SolidColor id="sc2" color="#73c9ec"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="#ff9f2c" />
<mx:Stroke id="s2" color="#73c9ec" />
<!-- 调用dataTipFunction重写鼠标指中时弹出的提示信息 -->
<mx:BarChart id="bar"
width="100%"
height="100%" paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0"
dataProvider="{medalsAC}"
dataTipFunction="myLabelDisplay"
showDataTips="true">
<!-- background elements -->
<!--
<mx:backgroundElements>
<mx:GridLines direction="vertical">
<mx:verticalFill>
<mx:SolidColor color="haloBlue" alpha="0.2" />
</mx:verticalFill>
<mx:verticalAlternateFill>
<mx:SolidColor color="haloSilver" alpha="0.2" />
</mx:verticalAlternateFill>
</mx:GridLines>
</mx:backgroundElements>
-->
<!-- 设置横坐标的最小刻度以及最大刻度，另外调用labelFunction重写刻度格式为百分比 -->
<mx:horizontalAxis>
<mx:LinearAxis minimum="0"
maximum="130"
labelFunction="myLabelFormat" id="a1"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:CategoryAxis
categoryField="date" id="a2" labelFunction="defineLabel" />
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{a1}">
<mx:axisStroke>
<mx:Stroke color="#6E6E6E"
caps="round"
/></mx:axisStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{a2}">
<mx:axisStroke>
<mx:Stroke color="#6E6E6E"
caps="round"
/>
</mx:axisStroke>
</mx:AxisRenderer>
</mx:verticalAxisRenderers>
<mx:series>
<mx:BarSeries labelPosition="outside" labelFunction="setCustomLabel" fontSize="10"
xField="close"
yField="date"
fill="{sc1}"
/>
<mx:BarSeries labelPosition="outside" labelFunction="setCustomLabel"
xField="open"
yField="date"
fill="{sc2}"
/>
</mx:series>
</mx:BarChart>
<mx:Style>
BarChart {
horizontalAxisStyleName:myAxisStyles;
verticalAxisStyleName:myAxisStyles;
}
.myAxisStyles {
tickPlacement:none;
}
</mx:Style>
</mx:Application>
