过滤折线图上显示的数据
我正在 Flex 上制作折线图,这使我能够根据年份查看数据的进度。 我尝试过使用滑块进行过滤,但似乎不起作用。
我并不是完全过滤数据提供者,而是过滤阿尔法。 我的函数将从数组集合中检索所有信息,但将 alpha 设置为 0,因此当用户拖动滑块时,如果年份低于该特定年份,它将显示数据,然后我将 alpha 设置为 100。
数据在那里,轴都设置好了,alpha设置为0。问题是它没有按照我想要的那样逐行显示信息,而是只显示整个图表,直到我拖动滑块到最后。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Year:"1990", Profit:2000 },
{Year:"1991", Profit:1000 },
{Year:"1992", Profit:1500 },
{Year:"1993", Profit:2100 },
{Year:"1994", Profit:2500 },
{Year:"1995", Profit:1500 },
{Year:"1996", Profit:1900 },
]);
private function init():void {
expenses.filterFunction = sliderFilterFunc;
expenses.refresh();
}
private function sliderFilterFunc(item:Object):Boolean{
var result:Boolean = true;
pro.alpha=0;
if(item.Year<=slider.value || item.Year==slider.value)
{
pro.alpha=100;
return result;
}
return result;
}
]]></mx:Script>
<mx:VBox horizontalCenter="0" top="10" horizontalAlign="center" height="100%">
<mx:HSlider id="slider" minimum="1990" maximum="1996" value="220" liveDragging="true" change="init()" width="570" snapInterval="1" dataTipPrecision="0" labels="['1990','1996']" tickInterval="1" themeColor="#000000" borderColor="#FFFFFF" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#000000, #000000, #FFFFFF, #1400D1]" height="48" styleName="myDataTip"/>
<mx:Panel title="Line Chart with One Shadow">
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true" >
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Year"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries id="pro" alpha="0"
yField="Profit"
displayName="Profit"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}" />
</mx:Panel>
</mx:VBox>
</mx:Application>
I am working on a line chart on flex which enable me to view the progress of data according to the year. I have tried using a slider to filter but it doesn't seemed to work.
I am not exactly filtering the dataprovider, but the alpha. My function will retrieve all the information from my array collection, but set the alpha to 0, so when user drags the slider, if the year falls below that particular year, it will display the data, which i then set the alpha to 100.
The data is there, the axis are all set, alpha is set to 0. The problem is it doesn't display the information line by line as what I wanted it to be, instead, it display the whole graph only until I drag the slider to the end.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Year:"1990", Profit:2000 },
{Year:"1991", Profit:1000 },
{Year:"1992", Profit:1500 },
{Year:"1993", Profit:2100 },
{Year:"1994", Profit:2500 },
{Year:"1995", Profit:1500 },
{Year:"1996", Profit:1900 },
]);
private function init():void {
expenses.filterFunction = sliderFilterFunc;
expenses.refresh();
}
private function sliderFilterFunc(item:Object):Boolean{
var result:Boolean = true;
pro.alpha=0;
if(item.Year<=slider.value || item.Year==slider.value)
{
pro.alpha=100;
return result;
}
return result;
}
]]></mx:Script>
<mx:VBox horizontalCenter="0" top="10" horizontalAlign="center" height="100%">
<mx:HSlider id="slider" minimum="1990" maximum="1996" value="220" liveDragging="true" change="init()" width="570" snapInterval="1" dataTipPrecision="0" labels="['1990','1996']" tickInterval="1" themeColor="#000000" borderColor="#FFFFFF" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#000000, #000000, #FFFFFF, #1400D1]" height="48" styleName="myDataTip"/>
<mx:Panel title="Line Chart with One Shadow">
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true" >
<mx:seriesFilters>
<mx:Array/>
</mx:seriesFilters>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Year"
/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries id="pro" alpha="0"
yField="Profit"
displayName="Profit"
/>
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}" />
</mx:Panel>
</mx:VBox>
</mx:Application>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
为您的 sliderFilterFunc 尝试一下:
Try this for your sliderFilterFunc: