主要用到showDataEffect属性,废话不说,直接上code.
Code 1.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="initDP();">
<mx:Script>
<![CDATA[
private const MAX_ITEMS:uint = 10;
private function initDP():void {
var i:uint;
dp = [];
for (i = 0; i < MAX_ITEMS; i++) {
dp.push({data:getRandomUint(100), label:"item " + i});
}
}
private function getRandomUint(max:uint):uint {
return Math.round(Math.random() * max);
}
]]>
</mx:Script>
<mx:Array id="dp" />
<mx:ApplicationControlBar dock="true">
<mx:Button label="Change Data"
click="initDP();" />
</mx:ApplicationControlBar>
<mx:PieChart id="chart"
height="100%"
width="100%"
dataProvider="{dp}">
<mx:series>
<mx:PieSeries field="data">
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1000" />
</mx:showDataEffect>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</mx:Application>
CODE 2,
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function updateDP():void {
var str:String = categoryFieldComboBox.selectedItem.data;
barSeries.xField = str;
barSeries.displayName = str;
}
]]>
</mx:Script>
<mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
<mx:SeriesSlide id="seriesSlide" duration="1000" direction="right" />
<mx:SeriesZoom id="seriesZoom" duration="1000" />
<mx:Array id="dataEffects">
<mx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
<mx:Object label="seriesSlide" data="{seriesSlide}" />
<mx:Object label="seriesZoom" data="{seriesZoom}" />
</mx:Array>
<mx:Array id="categoryFields">
<mx:Object data="obp" label="OBP" />
<mx:Object data="slg" label="SLG" />
<mx:Object data="avg" label="AVG" />
</mx:Array>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="categoryField:">
<mx:ComboBox id="categoryFieldComboBox"
dataProvider="{categoryFields}"
change="updateDP();" />
</mx:FormItem>
<mx:FormItem label="showDataEffect:">
<mx:ComboBox id="showDataEffectComboBox"
dataProvider="{dataEffects}"
change="updateDP();" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:BarChart id="barChart"
showDataTips="true"
dataProvider="{arrColl}"
width="100%"
height="100%">
<mx:verticalAxis>
<mx:CategoryAxis categoryField="name"/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries id="barSeries"
yField="name"
xField="obp"
displayName="obp"
showDataEffect="{showDataEffectComboBox.selectedItem.data}" />
</mx:series>
</mx:BarChart>
</mx:Application>
分享到:
相关推荐
C# 动态添加数据到折线图 chart 动态折线图。 C#窗口程序chart控件实现动态将数据添加到折线图的功能,勾选框可指示数据是否显示 C# chart 动态折线图
Delphi7.0源码生成一个柱状图表chart,使用了ntdll.dll,这个直方图表效果如图所示。使用了第三方控件实现的图表制作生成软件,功能比较强大。以下是图表测试源代码: Chart := TChart.Create(nil); try Chart...
http://blog.csdn.net/tx_officedev/article/details/7864219 相关资源
本资源主要为c#中使用chart控件绘制曲线图,当数据量较大时,x轴出现滚动条,实现全局视图和滚动视图的功能
C#chart控件游标CursorX跟随鼠标移动的例子。
只要把这个userControl添加到你的website里就可以用了。示例代码: chart1.dataSource = 此处为一个Table。 chart1.Title = "IHC Notebook Products /VPM PSG Team Level of Availablity %(LOS)"; chart1.Caption_...
新增添加了鼠标点击事件demo,并且将曲线改为折线,放心使用
自制柱形图表(Chart)效果源码,源码TestBarChart,话说最近需要做一个报表,于是想到了就achartengine这个高级货,可惜,这个东西太麻烦了(PS: 其实就是没看懂)。于是乎,本着偷懒的原则,自己就装模作样的写了一...
android chart MPchart
C#实现chart的图上插点功能。有时我们采集数据的时候可能会出现短暂丢失,导致数据不完整,此时就可以根据采集数据的走势,内插出丢失的数据。本程序实现在chart中查看数据,并内插出丢失的数据。
Chart图表 折线图
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...chart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js org...
C# WinFrom Chart 图表控件的具体使用方法示例,加入X轴滚动条,采用日期时间坐标,可添加间隔日期的数据,折线与点共同存在,值得学习研究。
ASP.net Chart 4.0 动态添加、删除曲线
WPF调用toolkit,使用Chart控件,各种数据的显示图表,并可自定义设置模板,开发属于自己的Chart控件,基本满足常规需求。
Android-LineChart 介绍 一个简单的折线,贝塞尔曲线图表控件,高度可扩展,支持动态显示。 效果图 使用 设置布局 2. 添加数据 ```Java lineChartView.setData(datas); 修改Y轴标尺间隔 lineChartView....
C#后台动态增加chart控件,根据数据库读取的参数个数动态增加chart控件,并设置图表的属性使其样式美观,且实现动态显示数据
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。 是基于HTML5 Canvas的,一个朋友说里面饼状图缺少文字信息的功能,于是自己实现了一下,包内有说明,如果坐标不太精准,请按自己的需求进行微调...
chartjs-chart-financial, 金融证券的Chart.js 模块 Chart.js-财务图表用于烛台和OHLC图表的Chart.js MODULE使用和路线图这个 MODULE 还没有初始版本,在npm...Chart.js 2.7.0添加了我们的timeseries扩展作为名为 dist
很好的chart插件 中文解释 很好的chart插件 中文解释 很好的chart插件 中文解释很好的chart插件 中文解释 很好的chart插件 中文解释 很好的chart插件 中文解释很好的chart插件 中文解释很好的chart插件 中文解释很好...