下载Flex图表插件 http://download.csdn.net/detail/allen_gang/5557877
1.柱形图
<?xml version="1.0" encoding="utf-8" ?>
<s:Application 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:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[ import mx.collections.ArrayCollection;
[Bindable]
private var chartData:ArrayCollection = new ArrayCollection([
{year:2005,income:23.5,expenses:18.1},
{year:2006,income:26.2,expenses:22.8},
{year:2007,income:30.1,expenses:23.9},
{year:2008,income:29.5,expenses:25.1},
{year:2009,income:24.6,expenses:25.0}
]);
]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
<amcharts:AmSerialChart width="100%" height="100%" id="chart" dataProvider="{chartData}" categoryField="year" startDuration="1" angle="30" depth3D="30">
<amcharts:categoryAxis>
<amcharts:CategoryAxis gridPosition="start" />
</amcharts:categoryAxis>
<amcharts:graphs>
<amcharts:AmGraph title="Income" id="g0" valueField="income" type="column" lineAlpha="0" fillAlphas="[1]" />
<amcharts:AmGraph title="Expenses" id="g1" valueField="expenses" type="line" lineThickness="2" bullet="round" />
</amcharts:graphs>
</amcharts:AmSerialChart>
<amcharts:AmLegend dataProvider="{chart}" width="100%" switchType="v" marginRight="20" marginLeft="40" textClickEnabled="false" marginBottom="15" />
</s:VGroup>
</s:Application>
2.折线图
<?xml version="1.0" encoding="utf-8" ?>
<s:Application 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:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" creationComplete="{generateChartData()}" viewSourceURL="srcview/index.html">
<fx:Script>
<![CDATA[ import com.amcharts.axes.Guide;
import com.amcharts.chartClasses.AmGraph;
import mx.collections.ArrayCollection;
import flash.filters.DropShadowFilter;
[Bindable]
private var chartData:ArrayCollection = new ArrayCollection();
// generate some random data
private function generateChartData():void{
var firstDate:Date = new Date();
firstDate.setDate(firstDate.getDate() - 20);
for(var i:Number = 0; i < 20; i++){
var newDate:Date = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits:Number = Math.round(Math.random() * 40) + 100;
chartData.addItem({date:newDate, visits:visits});
}
// create guide and add it to category axis
var verticalGuideDate:Date = new Date();
verticalGuideDate.setHours(0,0,0,0);
verticalGuideDate.date -= 10;
var verticalGuideToDate:Date = new Date();
verticalGuideToDate.setHours(0,0,0,0);
verticalGuideToDate.date -= 5;
var guide:Guide = new Guide();
guide.date = verticalGuideDate;
guide.toDate = verticalGuideToDate;
guide.fillAlpha = 0.15;
guide.lineAlpha = 0;
catAxis.addGuide(guide);
}
[Bindable]
private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);
]]>
</fx:Script>
<amcharts:AmSerialChart id="chart" width="50%" height="50%" autoMargins="false" marginTop="0" marginLeft="0" marginRight="0" marginBottom="0" dataProvider="{chartData}" categoryField="date">
<amcharts:graphs>
<amcharts:AmGraph id="g1" lineColor="#7717D7" title="Visits" valueField="visits" type="line" dashLength="3" lineThickness="1" bullet="round" filters="{[shadow]}" />
</amcharts:graphs>
<amcharts:valueAxes>
<amcharts:ValueAxis inside="true" tickLength="0">
<amcharts:guides>
<amcharts:Guide value="0" toValue="105" fillColor="#CC0000" fillAlpha="0.20" lineAlpha="0" />
<amcharts:Guide value="105" toValue="110" fillColor="#CC0000" fillAlpha="0.15" lineAlpha="0" />
<amcharts:Guide value="110" toValue="115" fillColor="#CC0000" fillAlpha="0.10" lineAlpha="0" />
<amcharts:Guide value="115" toValue="120" fillColor="#CC0000" fillAlpha="0.05" lineAlpha="0" />
<amcharts:Guide value="120" toValue="125" fillColor="#0000cc" fillAlpha="0.05" lineAlpha="0" />
<amcharts:Guide value="125" toValue="130" fillColor="#0000cc" fillAlpha="0.10" lineAlpha="0" />
<amcharts:Guide value="130" toValue="135" fillColor="#0000cc" fillAlpha="0.15" lineAlpha="0" />
<amcharts:Guide value="135" toValue="200" fillColor="#0000cc" fillAlpha="0.20" lineAlpha="0" />
</amcharts:guides>
</amcharts:ValueAxis>
</amcharts:valueAxes>
<amcharts:categoryAxis>
<amcharts:CategoryAxis id="catAxis" parseDates="true" minPeriod="DD" inside="true" tickLength="0" />
</amcharts:categoryAxis>
<amcharts:chartCursor>
<amcharts:ChartCursor />
</amcharts:chartCursor>
<amcharts:chartScrollbar>
<amcharts:ChartScrollbar graph="{g1}" hideResizeGrips="false" />
</amcharts:chartScrollbar>
</amcharts:AmSerialChart>
</s:Application>
<?xml version="1.0" encoding="utf-8" ?>
<s:Application 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:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" viewSourceURL="srcview/index.html">
<fx:Style>@font-face { fontFamily: "Tahoma"; embedAsCFF: false; unicode-range: U+0020-U+0040, /* Punctuation, Numbers */ U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ } .MyTextStyle { font-family: Tahoma; }</fx:Style>
<fx:Script>
<![CDATA[ import mx.collections.ArrayCollection;
[Bindable]
private var chartData:Array = [{country:"USA",visits:4252,color:0xFF0F00},
{country:"China",visits:1882,color:0xFF6600},
{country:"Japan",visits:1809,color:0xFF9E01},
{country:"Germany",visits:1322,color:0xFCD202},
{country:"UK",visits:1122,color:0xF8FF01},
{country:"France",visits:1114,color:0xB0DE09},
{country:"India",visits:984,color:0x04D215},
{country:"Spain",visits:711,color:0x0D8ECF},
{country:"Netherlands",visits:665,color:0x0D52D1},
{country:"Russia",visits:580,color:0x2A0CD0},
{country:"South Korea",visits:443,color:0x8A0CCF},
{country:"Canada",visits:441,color:0xCD0D74},
{country:"Brazil",visits:395,color:0x754DEB},
{country:"Italy",visits:386,color:0xDDDDDD},
{country:"Australia",visits:384,color:0x999999},
{country:"Taiwan",visits:338,color:0x333333},
{country:"Poland",visits:328,color:0x000000}];
]]>
</fx:Script>
<amcharts:AmSerialChart rotate="false" styleName="MyTextStyle" width="60%" height="40%" id="chart" dataProvider="{chartData}" categoryField="country" startDuration="1">
<amcharts:graphs>
<amcharts:AmGraph cornerRadiusTop="10" valueField="visits" balloonText="[[category]]: [[value]]" colorField="color" type="column" lineAlpha="0" fillAlphas="[0.8]" />
</amcharts:graphs>
<amcharts:valueAxes>
<amcharts:ValueAxis title="VISITS PER DAY" titleTextColor="#CC0000" />
</amcharts:valueAxes>
<amcharts:categoryAxis>
<amcharts:CategoryAxis gridPosition="start" labelRotation="45" gridCount="{chartData.length}" />
</amcharts:categoryAxis>
<amcharts:balloon>
<amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1" />
</amcharts:balloon>
<amcharts:chartCursor>
<amcharts:ChartCursor zoomable="false" cursorAlpha="0" categoryBalloonEnabled="false" />
</amcharts:chartCursor>
</amcharts:AmSerialChart>
</s:Application>
3.饼状图
<?xml version="1.0" encoding="utf-8" ?>
<s:Application 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:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" viewSourceURL="srcview/index.html">
<fx:Style>@font-face { fontFamily: "Tahoma"; embedAsCFF: false; unicode-range: U+0020-U+0040, /* Punctuation, Numbers */ U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ } .MyTextStyle { font-family: Tahoma; }</fx:Style>
<fx:Script>
<![CDATA[ import mx.collections.ArrayCollection;
import flash.filters.DropShadowFilter;
[Bindable]
private var chartData:Array = [{country:"USA",visits:4252},{country:"China",visits:1882},{country:"Japan",visits:1809},{country:"Germany",visits:1322},{country:"UK",visits:1122},{country:"France",visits:1114},{country:"India",visits:984},{country:"Spain",visits:711},{country:"Netherlands",visits:665},{country:"Russia",visits:580},{country:"South Korea",visits:443},{country:"Canada",visits:441},{country:"Brazil",visits:395},{country:"Italy",visits:386},{country:"Australia",visits:384},{country:"Taiwan",visits:338},{country:"Poland",visits:328}];
[Bindable]
private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);
]]>
</fx:Script>
<s:HGroup width="100%" height="100%">
<amcharts:AmPieChart styleName="MyTextStyle" width="50%" height="50%" dataProvider="{chartData}" valueField="visits" titleField="country" angle="5" depth3D="5" innerRadius="10" groupPercent="3" gradient="radial" filters="{[shadow]}" startDuration="1.5" startRadius="100" marginLeft="0" marginRight="0" labelWidth="100">
<amcharts:balloon>
<amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1" />
</amcharts:balloon>
</amcharts:AmPieChart>
</s:HGroup>
</s:Application>
相关推荐
在IT行业中，FLEX图表是一种广泛使用的数据可视化工具，它允许开发者创建丰富的、交互式的2D和3D图表，以直观地展示复杂的数据。本文将深入探讨FLEX图表相关解决方案，帮助你理解如何利用FLEX进行高效的数据图表开发...
"flex图表展示数据源码"指的是使用Flex进行数据可视化时，用于驱动图表的源代码。 在Flex中，数据图表主要由两种组件构成：mx.charts和spark.charts。MX图表是早期版本Flex中的图表库，而Spark图表是Flex 4（即Gaia...
要实现“flex图表导出图片”的功能，我们需要解决两个主要问题：一是如何将图表渲染为图像，二是如何将图像保存或导出。这个问题通常涉及到两个技术：Canvas渲染和图片编码。 1. **Canvas渲染**：在Flex中，我们...
在 Flex 开发中，图表组件是一个强大的工具，用于以图形化方式展示数据，使用户能够更直观地理解和分析信息。本文将深入探讨 Flex 图表组件的使用，包括柱状图、条状图、线图等多种图表类型，以及如何定义图表数据。...
Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表...
flex 图表源码展示
### Flex图表组件使用说明知识点详解 #### 一、引言 **编写目的**：本文档旨在为开发人员提供关于Amcharts_flex_components的全面指南，帮助他们更好地理解并利用该图表组件来创建丰富的数据可视化应用。 **参考...
chart.rar--java+flex图表 Flex3高级图表开发指南.pdf--英文的 Flex+白皮书.pdf flex-demo.rar Flex入门培训资料及PPT.rar flex中文帮助.pdf InfoQ Flex与JSON及XML的互操作.mht 结合java做的flex图表例子 - 点点...
这通常通过在服务器端将Flex图表渲染为位图，然后提供一个URL供前端JavaScript调用，从而实现下载功能。Flex本身不具备直接将图表导出为图片的能力，但可以借助第三方库或自定义解决方案来实现。 至于标签"flex ...
Flex图表插件是一种用于在Adobe Flex应用程序中创建交互式数据可视化的工具。Flex是一个开源的框架，基于ActionScript编程语言，用于构建富互联网应用程序（RIA）。这些图表插件能够帮助开发者将复杂的数据转换为...
FLEX图表组件是FLEX框架中的重要部分，它允许开发者创建各种复杂的图形展示，如曲线图、柱状图和饼状图等，用于数据可视化。这些图表组件不仅美观，而且动态性强，能够帮助用户更好地理解和分析数据。 "amcharts_...
Flex图表组件是基于Adobe Flex技术开发的一种用于在Web应用程序中展示数据可视化的工具。Flex是一种开源的、基于ActionScript的框架，主要用于构建富互联网应用程序（RIA）。它允许开发者创建交互式、高性能的用户...
在Flex图表中，DataTips是一种非常实用的功能，它可以在用户悬停在图表的特定数据点上时显示相关信息。DataTips的样式可以根据需求进行定制，包括背景颜色、文字颜色、字体大小、边框样式等多个方面，使得图表更加...
在本压缩包中，我们有四个Flex项目工程，这些工程着重于动画图表的实现，特别是利用了flare库来增强图表的视觉效果和交互性。 Flare是一个数据可视化库，由加州大学圣克鲁兹分校的互动媒体研究实验室开发。它主要用...
在本案例中，"flex柱状图表很漂亮的源码"指的是使用Flex技术创建的，具有美观视觉效果的柱状图表。这种图表通常用于数据可视化，帮助用户直观地理解大量信息。 柱状图是一种常见的统计图表类型，它通过矩形的高度或...
标题中的“Flex_4系统组件：图表”指的是Adobe Flex 4框架中用于创建数据可视化的图表组件。这些组件是Flex SDK的一部分，允许开发者构建交互式的、动态的数据展示应用。Flex 4引入了全新的图形渲染引擎（称为Spark...
1. **Flex图表组件**：Flex提供了多种图表类型，包括折线图、柱状图、饼图等。曲线图，即折线图，用于展示数据随时间变化的趋势。它通过连接一系列数据点形成连续的线条，使用户能够直观地看到数据的变化情况。 2. ...
1. **数据提供者**：Flex图表的数据通常来自于一个数据提供者，它可以是Array、XML、ArrayCollection等。数据提供者中的每一项都对应图表的一个数据点。 2. **Chart组件**：这是MX组件库中的核心组件，用于绘制各种...
数据驱动是Flex图表的核心，理解如何有效地将数据映射到图表元素至关重要。 3. **自定义图表**：讨论如何通过扩展或覆盖默认行为来自定义图表，包括自定义标记、图例、轴样式和动画效果，以满足特定的可视化需求。 ...