适用于当LineChart显示的数据较多时(这时x轴上的标签会很接近)
水平滚动X轴数据,Y轴保持不变
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Panel 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:chartClasses="views.charts.chartClasses.*"
width="600" height="500" creationComplete="panel1_creationCompleteHandler(event)"
title="可滚动的LineChart">
<fx:Script>
<![CDATA[
import mx.formatters.DateFormatter;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import spark.effects.Move;
import spark.events.IndexChangeEvent;
[Bindable]
private var historyData:ArrayCollection;
protected function panel1_creationCompleteHandler(event:FlexEvent):void
{
var len:int = 1 * 60 * 1000;
var now:Date = new Date();
historyData = new ArrayCollection();
now.setTime(now.time - len);
for (var i:int = 0; i < len / 1000; i++)
{
now.setTime(now.time + 1000);
var t:Date = new Date(now.time);
var gas:Object = {time:t, value:Math.random() * 0.9};
historyData.addItem(gas);
}
chart1.dataProvider = historyData;
}
protected function hAxisLabelFunction(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String
{
var _df:DateFormatter = new DateFormatter;
_df.formatString = "JJ:NN:SS";
return _df.format(categoryValue);
}
protected function hsb_changeHandler(event:Event):void
{
setDataProvider();
}
private var totalPage:int = 1;
protected function zoomin(event:MouseEvent):void
{
if(totalPage >= (1 << 4))
return;
hsb.value = hsb.value * 0.5;
totalPage = totalPage << 1;
hsb.maximum = (totalPage - 1) * 10;
setDataProvider();
}
protected function zoomout(event:MouseEvent):void
{
if(totalPage == 1)
return;
hsb.value = hsb.value * 2;
totalPage = totalPage >> 1;
hsb.maximum = (totalPage - 1) * 10;
setDataProvider();
}
protected function setDataProvider():void
{
var j:int = int(hsb.value / hsb.maximum * (hsb.maximum / 10 / totalPage) * historyData.length);
var ac:ArrayCollection = new ArrayCollection();
var len:int = Math.ceil(1.0 * historyData.length / totalPage);
for (var i:int = 0; (i < len) && (i + j) < historyData.length; i++)
{
ac.addItem(historyData.getItemAt(i + j));
}
chart1.dataProvider = ac;
}
protected function widthDropDown_changeHandler(event:IndexChangeEvent):void
{
totalPage = int(widthDropDown.selectedItem.@value);
hsb.maximum = (totalPage - 1) * 10;
hsb.value = 0;
setDataProvider();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:controlBarContent>
<s:HGroup width="100%" height="25" horizontalAlign="center" verticalAlign="middle">
<s:DropDownList id="widthDropDown" change="widthDropDown_changeHandler(event)"
labelField="@label" requireSelection="true">
<s:XMLListCollection>
<fx:XMLList xmlns="">
<node label="原始宽度" value="1"/>
<node label="两倍宽度" value="2"/>
<node label="四倍宽度" value="4"/>
</fx:XMLList>
</s:XMLListCollection>
</s:DropDownList>
<s:Button label="放大" click="zoomin(event)"/>
<s:Button label="缩小" click="zoomout(event)"/>
<s:HScrollBar id="hsb" width="100%" height="20" change="hsb_changeHandler(event)"
maximum="0" minimum="0" snapInterval="1" value="0"/>
</s:HGroup>
</s:controlBarContent>
<s:Group id="chartGroup" width="100%" height="100%">
<mx:LineChart id="chart1" width="100%" height="100%">
<mx:horizontalAxis>
<mx:CategoryAxis id="hAxis1" categoryField="time" displayName="时间"
labelFunction="hAxisLabelFunction"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="vAxis1" baseAtZero="true" displayName="Gas比例" maximum="1"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries displayName="Gas" form="curve" xField="time" yField="value"/>
</mx:series>
</mx:LineChart>
</s:Group>
</s:Panel>
好像没什么需要解释的。
分享到:
相关推荐
改变datatips显示字体大小的方法,也可以跟据这种方法自己定义别的样式。 包含了linechart样式的改变,颜色也可以改变
以下是我最近做flex组件编程时的总结,是主要针对lineChart的用法,其中某些属性对同是有横纵坐标的columnChart、barChart等都有效,比如对背景的网格线、横纵坐标线条的粗细颜色和标签的设置都有效。
Flex Chart Sytles 简单示例 基本样式使用,网上搜到的收藏下。
flex三种实现滚动条方式,其实是两种,样式的以两种表现形式写出了。然后,自定了一个滚动条
通过修改flex4滚动条的皮肤来修改Scroller组件的外观,外观直接去除了上下箭头,可以自行改变滚动条的皮肤颜色,投影颜色等。滚动条更加现代化。
Flex BlazeDs 推数据生成lineChart实例 前台生成lineChart 实时监控可作参考
flex LineChart实例个人项目开发中的一个页面
flex项目开发过程中的动态linechart,主要是曲线可以增量的刷新,纵坐标、刷新频率可以调整,也可以稍微改下根据配置进行曲线设置,这个是少了获取数据的方法用随机数代替,项目中用到动态linechart的可以参考。
flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。 1.该图表的数据源为ArrayCollection类型的arrayC 2.每增加一条线,其实就是增加一个数据源中的ArrayCollection每个对象的一个属性,且属性...
发觉FLEX中Image组件载入图片后,虽然自动缩放了,但是是等比缩放的。比如图片是16:9的,Image设置的宽高是4:3的,它不会自动拉伸成4:3,而是上下留白依然16:9。这个问题VideoDisplay组件载入FLV也一样,都是等比...
flex 4 check box legend chart
自定义滚动条.用canvas做滚动条条 用button做滑块
flex横向条形图增加滚动条,拖动滚动条显示数据
flex tree 自动显示横向滚动条 自定义重写
动态添加曲线条数 通过传递lablefild,和dataProvider的数组实现动态添加曲线
Flex 按钮代替滚动条,看了就知道了。。
flex textlayout 滚动条 flex textlayout 滚动条 flex textlayout 滚动条
Flex 图片旋转 缩放 拖动 特效 整个项目,其中的特效封装成一个控件,直接使用,
FFLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子LEX 平移,缩放例子
Flex 的特效-缩放模糊效果,可以根据具体的需求进行缩放和模糊的实现