flex做報表的功能比較強大,還有個專門做報表anyChart類庫,不過人家是收費的額,不過做折綫圖
報表,lineChart功能基本達到了。比較特別的是它的數據源格式,每一筆數據中,要包含橫座標的數據
和每條折綫在這個橫座標上對應的縱座標的數據,所以sql寫起來也比較費勁,不過還是可以解決的。
這里是個可以動態添加折綫條數的例子,如果需要其他例子可以到http://blog.flexexamples.com/上
找,資源豐富。。。
flex3.5
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.controls.Alert;
import mx.controls.HorizontalList;
import mx.charts.series.LineSeries;
import mx.charts.LineChart;
import mx.collections.ArrayCollection;
private var dataSource:ArrayCollection = new ArrayCollection([{Hour:"8:00",Profit:70,Expenses:90,Amount:80},{Hour:"9:00"
,Profit:80,Expenses:85,Amount:85},{Hour:"10:00",Profit:85,Expenses:90,Amount:90},{Hour:"11:00",
Profit:75,Expenses:98,Amount:78}]);
//縱座標數據
private var dataArray:Array = new Array("Profit","Expenses","Amount");
private function init():void{
var arr:Array = new Array();
//動態添加lineSeries
for(var i:int = 0; i < dataArray.length ; i ++){
var line:LineSeries = new LineSeries();
line.xField = "Hour";
line.yField = dataArray[i];
line.displayName= dataArray[i];
arr.push(line);
}
myChart.series = arr;
}
//鼠標指示的效果
private function ShowTipData(hd:HitData):String{
var result:String="";
var dataKeyObj:Object=hd.element;
var dataValue:Object=hd.item;
result="數列: '"+dataKeyObj.yField+"'\n"+"資料點: '"+dataValue[dataKeyObj.xField]+"'\n"+"值: "+dataValue[dataKeyObj.yField];
return result;
}
]]>
</mx:Script>
<mx:Legend dataProvider="{myChart}"
direction="vertical" />
<mx:LineChart id="myChart"
dataProvider="{dataSource}"
showDataTips="true" dataTipFunction="ShowTipData">
<!--橫座標-->
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Hour"/>
</mx:horizontalAxis>
<!--縱座標-->
<mx:verticalAxis>
<mx:LinearAxis
title="百分率(%)"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries xField="Hour" form="curve"/>
</mx:series>
<!--背景 -->
<mx:backgroundElements>
<mx:GridLines id="gridLines"
direction="both"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="0"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<!-- Set alpha to 0 so stroke isn't visible. -->
<mx:Stroke color="white"
weight="0"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="haloSilver"
alpha="0.1" />
</mx:horizontalFill>
</mx:GridLines>
</mx:backgroundElements>
</mx:LineChart>
<!--線條顏色說明-->
</mx:Application>
相关推荐
flex 折线图
flex各种折线图(饼状图,折线图,柱状图),java方向的案例
flex 关于LineChart的左右移动
NULL 博文链接:https://wuxiubing.iteye.com/blog/906805
改变datatips显示字体大小的方法,也可以跟据这种方法自己定义别的样式。 包含了linechart样式的改变,颜色也可以改变
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。
Flex BlazeDs 推数据生成lineChart实例 前台生成lineChart 实时监控可作参考
NULL 博文链接:https://abstractforever.iteye.com/blog/1184800
flex LineChart实例个人项目开发中的一个页面
flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。
通过几天的研究终于可以用arcgis for flex 在地图上显示柱状图 饼状图和折线图
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
下载的是具有短期(好像是3个月)的试用期,并且带有其公司logo,没有使用。 3.CVSLib 是从csdn上面下载一个图形报表控件。好像是flex和.net用的,我因为用的是flex+java,没有用。 4.就是最主要也最重要的框架了。...
动态添加曲线条数 通过传递lablefild,和dataProvider的数组实现动态添加曲线
flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性...
多款风格的Flex的Demo、柱状图、饼图、折线图等,好不容易才找得到的,非常不错的Flex的使用demo!
flex统计图标实例 饼状图 柱状图 折线图
使用flex绘制折线图,分为单线和双线,flash工具为4.5,可以直接运行