Flex:在LineChart图表中格式化双轴线
2009-10-20 16:03
471 查看
![](http://images.cnblogs.com/cnblogs_com/fooo/flex84.jpg)
lineChart.mxml :
<?xml version="1.0"?>
<!-- Simple example to demonstrate the GridLines class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="com.*">
<mx:Script>
<![CDATA[
import mx.charts.CategoryAxis;
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;
import mx.charts.series.items.PieSeriesItem;
import mx.charts.HitData;
import custer.MyLabel;
import mx.effects.easing.*;
import mx.controls.Alert;
import mx.charts.series.LineSeries;
import mx.charts.chartClasses.DataTransform;
import mx.charts.chartClasses.CartesianTransform;
import mx.charts.series.items.LineSeriesItem;
private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
return currFormatter.format(item);
}
private function init(evt:Event):void {
var chart:CustomLineChart = evt.currentTarget as CustomLineChart;
seriesFilterArr = chart.seriesFilters;
var len:uint = linechart.seriesFilters.length;
if (len > 0) {
linechart.seriesFilters = [];
} else {
linechart.seriesFilters = seriesFilterArr;
}
}
function CustomLineChart_dataTipFunction(item:HitData):String {
// var LCI:LineSeries = item.chartItem as LineSeries;
//return "<b>高度/时间</b><br />时间:" + LCI.item.time + "<br/>高度:"+LCI.item.height+"米";
tit.label = "<b>高度/时间</b><br />时间我们的";
var dt:String = "";
var this_series:LineSeries = LineSeries(item.element);
var dataTransform:DataTransform = this_series.dataTransform;
var vertical_axis:LinearAxis = LinearAxis(dataTransform.getAxis(CartesianTransform.VERTICAL_AXIS));
var horizontal_axis:CategoryAxis = CategoryAxis(dataTransform.getAxis(CartesianTransform.HORIZONTAL_AXIS));
var actionItemID:String = this_series.xField;
var xValue:Object = horizontal_axis.formatForScreen(LineSeriesItem(item.chartItem).xValue);
var n:String = this_series.displayName;
if (n && n != "")
dt += "<font size='14'><b>" + n + "</b><BR/>" + xValue + "-" + actionItemID;
return dt;
}
[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "17", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "18", Profit: 800, Expenses: 200, Amount: 600 },
{ Month: "19", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "20", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "21", Profit: 2400, Expenses: 575, Amount: 500 },
{ Month: "22", Profit: 720, Expenses: 575, Amount: 500 },
{ Month: "23", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "24", Profit: 2400, Expenses: 575, Amount: 500 },
{ Month: "25", Profit: 1400, Expenses: 575, Amount: 500 },
{ Month: "26", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "27", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "28", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "29", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "30", Profit: 2400, Expenses: 575, Amount: 500 },
{ Month: "31", Profit: 3400, Expenses: 575, Amount: 500 },
{ Month: "1", Profit: 1700, Expenses: 1200, Amount: 900 },
{ Month: "2", Profit: 2400, Expenses: 575, Amount: 500 },
{ Month: "3", Profit: 480, Expenses: 575, Amount: 500 },
{ Month: "4", Profit: 2400, Expenses: 575, Amount: 500 },
{ Month: "5", Profit: 1480, Expenses: 575, Amount: 500 },
{ Month: "6", Profit: 570, Expenses: 575, Amount: 500 },
{ Month: "7", Profit: 1970, Expenses: 575, Amount: 500 },
{ Month: "8", Profit: 1600, Expenses: 575, Amount: 500 },
{ Month: "9", Profit: 720, Expenses: 575, Amount: 500 },
{ Month: "10", Profit: 2100, Expenses: 575, Amount: 500 },
{ Month: "11", Profit: 780, Expenses: 575, Amount: 500 },
{ Month: "12", Profit: 1900, Expenses: 575, Amount: 500 },
{ Month: "13", Profit: 1480, Expenses: 575, Amount: 500 },
{ Month: "14", Profit: 1100, Expenses: 575, Amount: 500 },
{ Month: "15", Profit: 2480, Expenses: 575, Amount: 500 },
{ Month: "16", Profit: 700, Expenses: 575, Amount: 500 },
{ Month: "17", Profit: 1400, Expenses: 575, Amount: 500 } ]);
private function linechart_mouseMove(evt:MouseEvent):void {
tit.label = evt.stageY.toString() + " - " + evt.localY+ " - " + this.mouseY;
}
]]>
</mx:Script>
<mx:CurrencyFormatter id="currFormatter" precision="0" />
<mx:Stroke id = "s1" color="#2E95BF" weight="1"/>
<mx:Stroke id = "s2" color="#62C426" weight="1"/>
<mx:Stroke id = "s3" color="#FF8C31" weight="1.5"/>
<mx:Stroke id="vSolid" weight=".002" color="#333333" alpha=".04" />
<mx:Stroke id="hSolid" weight=".03" color="#ff0000" alpha=".1" />
<mx:Stroke id="axisStroke2" color="#6B90DA" weight="2" alpha=".25" caps="square"/>
<mx:SolidColor id="vFill" color="#D6DECE" alpha=".3" />
<mx:SolidColor id="hFill" color="#F9E0E0" alpha=".03" />
<mx:SolidColor id="tFill" color="#ffffff" alpha=".3" />
<mx:Array id="seriesFilterArr" />
<mx:Panel title="海口-重庆 航线订单趋势图" height="100%" width="100%" fontSize="14" fontWeight="normal">
<mx:Button width="301" fontWeight="bold" id="tit" fontSize="12" color="#F2530C" fontFamily="Arial" labelPlacement="left"/>
<comp:CustomLineChart id="linechart" height="100%" width="100%"
paddingLeft="5" paddingRight="5"
showDataTips="true" showAllDataTips="true" dataTipFunction="CustomLineChart_dataTipFunction" dataProvider="{expensesAC}" mouseMove="linechart_mouseMove(event);" creationComplete="init(event);">
<comp:verticalAxis>
<mx:LinearAxis baseAtZero="false" title="Price" labelFunction="linearAxis_labelFunc" minimum="0"
/>
</comp:verticalAxis>
<comp:horizontalAxis>
<mx:CategoryAxis categoryField="Month" />
</comp:horizontalAxis>
<comp:horizontalAxisRenderer>
<mx:AxisRenderer canStagger="false" fontSize="10" >
<mx:axisStroke>{axisStroke2}</mx:axisStroke>
</mx:AxisRenderer>
</comp:horizontalAxisRenderer>
<comp:verticalAxisRenderer>
<mx:AxisRenderer >
<mx:axisStroke>{axisStroke2}</mx:axisStroke>
</mx:AxisRenderer>
</comp:verticalAxisRenderer>
<comp:backgroundElements>
<mx:GridLines direction="both" horizontalTickAligned="true" verticalTickAligned="true"
verticalStroke="{hSolid}" horizontalStroke="{vSolid}"
verticalFill="{vFill}" horizontalFill="{hFill}"
verticalAlternateFill="{tFill}" horizontalAlternateFill="{tFill}"
/>
</comp:backgroundElements>
<comp:series>
<mx:LineSeries yField="Profit" form="curve" displayName="票点明细:" itemRenderer="custer.MyLabel" lineStroke="{s3}" />
</comp:series>
</comp:CustomLineChart>
</mx:Panel>
</mx:Application>
关键部分:axisStroke (参见Api)
<mx:AxisRenderer canStagger="false" fontSize="10" >
<mx:axisStroke>{axisStroke2}</mx:axisStroke>
</mx:AxisRenderer>
相关文章推荐
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Flex:在LineChart图表中创建一个自定义的LinearAxis函数标签(Tip提示)的例子
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Flex中如何通过lineStroke样式改变LineChart图表线条颜色的例子
- flex LineChart 图表动态增删Y轴实现。实现了动态增加但是Y轴删不干净
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Flex中用鼠标拖动LineChart图表的折线
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- Removing the default drop shadow from a LineChart chart in Flex
- flex lineChart中自定义datatip
- Android图表控件MPAndroidChart——曲线图LineChart(多条曲线)动态添加数据^a!HsMa0cWDc
- DEV ChartControl 图表设计 -- Line
- [转]flex:ColumnChart图表各个labe…
- 向Flex中的LineChart中动态添加线
- 如何去除FLEX LINECHART 线条阴影
- Flex: 改变lineChart数据点(交点)颜色值及样式,ItemRenderer border color
- Flex :查看某凼数的详细 ,以及重写Renderer 显示lineChart 的数据点标签值及显示的图标样式。。。。。。。。
- Flex Chart / Charting 图表参考
- flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。
- Flex AIR:Line Chart 示例-用 XML 画图表很简单