【www.bbyears.com--flex】
有时候线图或面积图里数据太密集，如果想要重点关注，或者看清其中某一段时间的数据趋势。就需要给图表添加一个动态缩放功能。
即允许鼠标在图上拖动选择一个区域，图表便自动放大展示这块区域的内容。同时放大后右上角还会出现一个“还原”按钮，点击恢复成最初状态。
效果图如下：
代码如下：
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init(event)">
import mx.charts.chartClasses.Series;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
//原始数据
private var _myData:ArrayCollection = new ArrayCollection( [
{time: "10:00", value1: 34, value2: 54},
{time: "10:05", value1: 35, value2: 65},
{time: "10:10", value1: 25, value2: 34},
{time: "10:15", value1: 36, value2: 56},
{time: "10:20", value1: 54, value2: 45},
{time: "10:25", value1: 63, value2: 66},
{time: "10:30", value1: 23, value2: 34},
{time: "10:35", value1: 55, value2: 73},
{time: "10:40", value1: 64, value2: 44},
{time: "10:45", value1: 75, value2: 23},
{time: "10:50", value1: 31, value2: 56},
{time: "10:55", value1: 33, value2: 43},
{time: "11:00", value1: 34, value2: 55},
{time: "11:05", value1: 23, value2: 23},
{time: "11:10", value1: 25, value2: 34},
{time: "11:15", value1: 23, value2: 56},
{time: "11:20", value1: 54, value2: 45},
{time: "11:25", value1: 63, value2: 43},
{time: "11:30", value1: 34, value2: 32},
{time: "11:35", value1: 33, value2: 43},
{time: "11:40", value1: 54, value2: 15},
{time: "11:45", value1: 75, value2: 23},
{time: "11:50", value1: 13, value2: 43},
{time: "11:55", value1: 33, value2: 32},
{time: "12:00", value1: 34, value2: 54},
{time: "12:05", value1: 35, value2: 65},
{time: "12:10", value1: 25, value2: 34},
{time: "12:15", value1: 32, value2: 56},
{time: "12:20", value1: 54, value2: 45},
{time: "12:25", value1: 63, value2: 66},
{time: "12:30", value1: 53, value2: 34},
{time: "12:35", value1: 55, value2: 43},
{time: "12:40", value1: 64, value2: 33},
{time: "12:45", value1: 75, value2: 23},
{time: "12:50", value1: 31, value2: 56},
{time: "12:55", value1: 23, value2: 43},
{time: "13:00", value1: 45, value2: 52},
{time: "13:05", value1: 34, value2: 34},
{time: "13:10", value1: 25, value2: 34},
{time: "13:15", value1: 23, value2: 56},
{time: "13:20", value1: 54, value2: 43},
{time: "13:25", value1: 63, value2: 43},
{time: "13:30", value1: 44, value2: 55},
{time: "13:35", value1: 33, value2: 43},
{time: "13:40", value1: 54, value2: 23},
{time: "13:45", value1: 75, value2: 23},
{time: "13:50", value1: 13, value2: 55},
{time: "13:55", value1: 33, value2: 32}
]);
//放大区域的开始时间
private var _zoomStartTime:String="";
//放大区域的结束时间
private var _zoomEndTime:String="";
//放大区域的开始索引
private var _zoomStartIndex:int=-1;
//放大区域的结束索引
private var _zoomEndIndex:int=-1;
//页面初始化
protected function init(event:FlexEvent):void
{
vAxis.maximum = 100;
loadData();
}
//数据加载
private function loadData():void{
linechart.dataProvider = _myData;
zoomOutBtn.visible = false;
}
//鼠标按下
protected function linechart_mouseDownHandler(event:MouseEvent):void
{
//记下鼠标按下时的时间和位置
_zoomStartTime = getTimeNearMouse();
for(var index:int = 0;index
_zoomStartIndex = index;
break;
}
}
}
//鼠标移动
private function linechart_mouseMoveHandler(event:MouseEvent):void {
if(_zoomStartTime != ""){
//记下鼠标移动时的时间和位置
_zoomEndTime = getTimeNearMouse();
for(var index:int = 0;index
_zoomEndIndex = index;
break;
}
}
//绘制 选中区域背景
var startX:Number = linechart.series[0].items[_zoomStartIndex]["x"];
var endX:Number = linechart.series[0].items[_zoomEndIndex]["x"];;
zoomArea.graphics.clear();
zoomArea.graphics.beginFill(0x65EEFC,0.4);
zoomArea.graphics.drawRect(startX,0,endX-startX,chartBg.height);
zoomArea.graphics.endFill();
}
}
//鼠标弹起
protected function linechart_mouseUpHandler(event:MouseEvent):void
{
if(_zoomStartTime!=""){
zoomIn()
}
_zoomStartTime = "";
}
//开始缩放
private function zoomIn():void{
zoomArea.graphics.clear();
//避免单击也放大
if(_zoomStartTime == _zoomEndTime){
return;
}
zoomOutBtn.visible = true;
//保证开始索引小于结束索引（不管鼠标从左向右拖 还是从右向左拖）
if(_zoomStartIndex>_zoomEndIndex){
var t:int = _zoomStartIndex;
_zoomStartIndex = _zoomEndIndex;
_zoomEndIndex = t;
}
//只加载选中区域的数据
var zoomData:ArrayCollection = new ArrayCollection();
for(var index:int = 0;index
zoomData.addItem(linechart.dataProvider.getItemAt(index));
}
}
linechart.dataProvider = zoomData;
}
//获取最接近鼠标位置的时间
private function getTimeNearMouse():String{
if(linechart.series[0]!=null){
var series:Series = linechart.series[0];
var leftPoint:Point = new Point(series.mouseX,0);
var leftArr:Array = series.localToData(leftPoint);
return leftArr[0];
}else{
return "";
}
}
]]>
mouseMove="linechart_mouseMoveHandler(event)"
mouseDown="linechart_mouseDownHandler(event)"
mouseUp="linechart_mouseUpHandler(event)"
rollOut="linechart_mouseUpHandler(event)">