flex 共X轴图使用拼接效果图：如下
代码：
<?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"
width="100%" height="100%" creationComplete="initDatas()"
xmlns:draw="draw.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.series.items.LineSeriesItem;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.FlexGlobals;
import mx.rpc.events.ResultEvent;
[Bindable]
private var c1_ytitle:String="A";
[Bindable]
private var c2_ytitle:String="B";
[Bindable]
private var lc_xtitle:String="X";
[Bindable]
private var lc_ytitle:String="C1";
[Bindable]
private var lc_y2title:String="C2";
[Bindable]
private var viewId:String;
[Bindable]
private var resultArr:ArrayCollection = new ArrayCollection;
private var column1Data:ArrayCollection = new ArrayCollection;
private var column2Data:ArrayCollection = new ArrayCollection;
private var lineChartData:ArrayCollection = new ArrayCollection;
private function init():void{
ExternalInterface.addCallback("optStrokeClick",optStrokeClick);
//获取数据
var pattern:RegExp = /#@/g;
var c1Data:XML = new XML(FlexGlobals.topLevelApplication.parameters["c1XmlData"].toString().replace(pattern, "\""));
var c2Data:XML = new XML(FlexGlobals.topLevelApplication.parameters["c2XmlData"].toString().replace(pattern, "\""));
var lcData:XML = new XML(FlexGlobals.topLevelApplication.parameters["lcXmlData"].toString().replace(pattern, "\""));
if(c1Data.toString().length>0){
xmlcheck(c1Data);
}
if(c2Data.toString().length>0){
xmlcheck(c2Data);
}
if(lcData.toString().length>0){
xmlcheck(lcData);
}
}
//测试
private function initDatas():void{
ExternalInterface.addCallback("optStrokeClick",optStrokeClick);
getDatasRequest.url = "config/c2ahsyb.xml";
getDatasRequest.send();
getDatasRequestcy.url = "config/c2ahsybcy.xml";
getDatasRequestcy.send();
getDatasRequestxy.url = "config/c2ahsybxy.xml";
getDatasRequestxy.send();
}
protected function getDatasRequestResult(event:ResultEvent):void
{
var lcData:XML = XML(event.message.body.toString());
xmlcheck(lcData);
}
function optStrokeClick(stroke:String,visible:String){
// Alert.show(stroke);
var series:Array = linechart.series;
var ls:LineSeries;
for(var i:int = 0; i < series.length; i++) {
ls = series[i];
if(stroke == ls.id){
if("yes"==visible){
ls.visible = true;
}else{
ls.visible = false;
}
break;
return;
}
}
}
private function xmlcheck(xml:XML):void{
viewId = xml.attribute("viewId");
var type:String = xml.attribute("chartType");
if("flood" == type){
// label.text = xml.attribute("label");
xml2Array(xml,lineChartData,type);
}else if("allRain" == type){
xml2Array(xml,column1Data,type);
}else if("netRain" == type){
xml2Array(xml,column2Data,type);
}
}
function xml2Array(xml:XML,array:ArrayCollection,type:String):void{
array.removeAll();
if("flood" == type){
for each(var element:XML in xml.descendants("item")) {
var o:Object = new Object();
o.oid = element.@oid;
o.type = xml.attribute("chartType");
o.xfield = element.@xfield;
o.yfield = element.@yfield;
o.y2field = element.@y2field;
o.y3field = element.@y3field;
array.addItem(o);
}
}else{
for each(var element:XML in xml.descendants("item")) {
var o:Object = new Object();
o.oid = element.@oid;
o.type = xml.attribute("chartType");
o.xfield = element.@xfield;
o.yfield = element.@yfield;
array.addItem(o);
}
}
}
protected function itemClickHandler(event:ChartItemEvent):void
{
var psi:LineSeriesItem= event.hitData.chartItem as LineSeriesItem;
var lss:LineSeries = psi.element as LineSeries;
// Alert.show(viewId+"---"+psi.item.xfield+"--"+psi.item.yfield+"-"+psi.item.y2field+"-"+psi.item.y3field);
var xf:String = psi.item.xfield;
ExternalInterface.call("pointClick",viewId,psi.item.yfield,psi.item.y2field,psi.item.y3field,xf.split("-"));
// optStrokeClick("hr5","yes");
// damtophigh = 800;
}
private function dataTipFunc(item:Object):String {
var curObj:Object = item.item;
var curSeries:Object = Object(item.chartItem.element);
var str:String = "";
if(curSeries.displayName == "降雨"){
var cSI1:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
str = "<font>"+lc_xtitle+":"+cSI1.xValue.toString()+ "<br>";
str += curSeries.displayName+":"+(-Number(cSI1.yValue)).toString();
str+="</font>";
}else if(curSeries.displayName == "净雨"){
var cSI1:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
str = "<font>"+lc_xtitle+":"+cSI1.xValue.toString()+ "<br>";
str += curSeries.displayName+":"+cSI1.yValue.toString();
str+="</font>";
}else{
var cSI:LineSeriesItem = item.chartItem as LineSeriesItem;
str = "<font>"+lc_xtitle+":"+cSI.xValue.toString()+ "<br>";
str += curSeries.displayName+":"+cSI.yValue.toString();
str+="</font>";
}
return str;
}
private function categoryAxisLabelFun(categoryValue:Object, previousCategoryValue:Object, axis:CategoryAxis, categoryItem:Object):String {
var kk:Array = categoryValue.toString().split(" ");
// return '<I>' + categoryValue + '</I>';
return '<I>' + kk[1] + '</I>';
}
private function parseToDate(s:String):Date{
//s = "2007-10-15 20:15"
var temp:Array = s.split(" ");
var datepart:String = temp[0];
var datearray:Array = datepart.split("-");
var timepart:String = temp[1];
var timearray:Array = timepart.split(":");
var newDate:Date = new Date(datearray[0],datearray[1],datearray[2],timearray[0],timearray[1]);
return newDate;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id="getDatasRequest" method="POST" result="getDatasRequestResult(event)"/>
<mx:HTTPService id="getDatasRequestcy" method="POST" result="getDatasRequestResult(event)"/>
<mx:HTTPService id="getDatasRequestxy" method="POST" result="getDatasRequestResult(event)"/>
<mx:SolidColor id="sc1" color="0xCCFFF0" alpha=".8"/>
<mx:SolidColor id="sc2" color="0xCC00CC" alpha=".6"/>
<mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
<mx:Stroke id="s1" color="0xCCCC00" weight="1" />
<mx:Stroke id="s2" color="0xCAAACC" weight="1"/>
<mx:Stroke id="s3" color="0xFFCC66" weight="1"/>
<mx:SolidColorStroke id="scs1" color="0x1CF000" weight="1" />
</fx:Declarations>
<mx:VBox width="100%" height="100%" verticalGap="0" verticalAlign="middle" horizontalAlign="center">
<mx:HBox width="100%" height="30" backgroundColor="#ffffff" horizontalAlign="center" verticalAlign="middle">
<mx:Label id="label" text="调度过程线" color="#f05caa" fontSize="20"/>
</mx:HBox>
<mx:HBox width="100%" height="20%" backgroundColor="#ffffff">
<mx:ColumnChart id="column1"
height="100%"
width="92%"
fontSize="12"
showDataTips="true"
seriesFilters="[]"
dataTipFunction="dataTipFunc"
dataProvider="{column1Data}"
>
<mx:backgroundElements>
<mx:GridLines id="cgridLines1"
gridDirection="horizontal"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="0"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<mx:Stroke color="white"
weight="0"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="haloSilver"
alpha="0.1" />
</mx:horizontalFill>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:CategoryAxis id="chaxis1" categoryField="xfield" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer id="chorAxisRend1"
axis="{chaxis1}"
axisStroke="{s2}"
tickStroke="{s2}"
placement="top"
showLabels="false"
/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="cvertAxisRend1"
axis="{cvaxis1}"
axisStroke="{scs1}"
tickStroke="{scs1}"
placement="left" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="xfield"
yField="yfield"
displayName="{c1_ytitle}"
fill="{sc1}"
stroke="{s1}"
fontSize="12"
>
<mx:verticalAxis>
<mx:LinearAxis id="cvaxis1" title="{c1_ytitle}" direction="inverted"/>
</mx:verticalAxis>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
</mx:HBox>
<mx:HBox width="100%" height="20%" backgroundColor="#ffffff">
<mx:ColumnChart id="column2"
height="100%"
width="92%"
fontSize="12"
showDataTips="true"
seriesFilters="[]"
dataTipFunction="dataTipFunc"
dataProvider="{column2Data}"
>
<mx:backgroundElements>
<mx:GridLines id="cgridLines2"
gridDirection="horizontal"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="0"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<mx:Stroke color="blue"
weight="1"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="haloSilver"
alpha="0.1" />
</mx:horizontalFill>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:CategoryAxis id="chaxis2" categoryField="xfield" />
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer id="chorAxisRend2"
axis="{chaxis2}"
axisStroke="{s2}"
tickStroke="{s2}"
placement="bottom"
showLabels="false"
/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="cvertAxisRend2"
axis="{cvaxis2}"
axisStroke="{scs1}"
tickStroke="{scs1}"
placement="left" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="xfield"
yField="yfield"
displayName="{c2_ytitle}"
fill="{sc1}"
stroke="{s1}"
fontSize="12"
>
<mx:verticalAxis>
<mx:LinearAxis id="cvaxis2" title="{c2_ytitle}" direction="normal"/>
</mx:verticalAxis>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
</mx:HBox>
<mx:VBox width="100%" height="60%" backgroundColor="#ffffff">
<mx:CartesianChart id="linechart"
width="{column1.width+60}"
height="100%"
fontSize="12"
showDataTips="true"
seriesFilters="[]"
dataTipFunction="dataTipFunc"
dataProvider="{lineChartData}"
itemClick="itemClickHandler(event)"
>
<mx:backgroundElements>
<mx:GridLines id="gridLines"
gridDirection="horizontal"
verticalTickAligned="false">
<mx:verticalStroke>
<mx:Stroke color="haloSilver"
weight="1"
alpha="1.0" />
</mx:verticalStroke>
<mx:horizontalStroke>
<mx:Stroke color="white"
weight="1"
alpha="0.0" />
</mx:horizontalStroke>
<mx:horizontalFill>
<mx:SolidColor color="haloSilver"
alpha="0.1" />
</mx:horizontalFill>
</mx:GridLines>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:CategoryAxis id="haxis"
dataProvider="{lineChartData}"
categoryField="xfield"
labelFunction="categoryAxisLabelFun"
/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer id="horAxisRend3"
axis="{haxis}"
axisStroke="{scs1}"
showLine="true"
minWidth="1"
minorTickPlacement="cross"
tickLength="2"
tickStroke="{scs1}"
canDropLabels="true"
labelAlign="center"
placement="bottom"
/>
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="vertAxisRend"
axis="{vaxis1}"
axisStroke="{scs1}"
tickStroke="{scs1}"
verticalAxisTitleAlignment="vertical"
placement="left" />
<mx:AxisRenderer id="vertAxisRend2"
axis="{vaxis2}"
axisStroke="{scs1}"
tickStroke="{scs1}"
placement="right"/>
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries id="yfield" yField="yfield" xField="xfield" radius="3" form="curve" displayName="S1" lineStroke="{s1}">
<mx:verticalAxis>
<mx:LinearAxis id="vaxis1" title="{lc_ytitle}"/>
</mx:verticalAxis>
</mx:LineSeries>
<mx:LineSeries id="y2field" yField="y2field" xField="xfield" radius="3" form="curve" displayName="S2" lineStroke="{s2}">
<mx:verticalAxis>
<mx:LinearAxis id="vaxis2" title="{lc_y2title}"/>
</mx:verticalAxis>
</mx:LineSeries>
<mx:LineSeries id="y3field" yField="y3field" xField="xfield" form="curve" displayName="S3" lineStroke="{s3}">
<mx:verticalAxis>
<mx:LinearAxis id="vaxis3" title="{lc_y2title}"/>
</mx:verticalAxis>
</mx:LineSeries>
</mx:series>
</mx:CartesianChart>
<mx:VBox id="legendbox3" width="100%" height="25" horizontalAlign="center">
<mx:Legend dataProvider="{linechart}" id="legend" direction="horizontal" />
</mx:VBox>
</mx:VBox>
</mx:VBox>
</s:Application>
相关推荐
在本文中，我们将深入探讨如何使用Adobe Flex技术创建一个具有拖拽功能的柱状图，以及如何实现点击柱状图后弹出图片窗口的功能。Flex是一个开源的、基于ActionScript的框架，主要用于构建富互联网应用程序（RIA）。...
在本文中，我们将深入探讨如何使用Adobe Flex技术来创建各种柱状图和饼状图。Flex是一个基于ActionScript和MXML的开源框架...无论是简单的柱状图还是复杂的环形分块图，Flex都能够胜任，使得数据的呈现更加直观和生动。
总的来说，Flex提供了一套强大的图表组件，使得开发者能够轻松地创建出美观且功能丰富的柱状图和饼图，以直观地呈现复杂的数据。通过熟练掌握这些组件的使用，可以提升数据可视化的专业度，帮助用户更好地理解和解析...
6. **其他高级特性**：Flex的柱状图还可以进行更复杂的数据分组、堆叠、百分比表示等。此外，你还可以添加工具提示、图例、轴标签等元素来增强图表的可读性。 通过研究提供的"columnChart"项目源代码，你可以了解到...
3. **Chart组件**: Flex框架内置了多种图表组件，如BarChart，我们可以在此基础上进行定制，创建倒立柱状图。 4. **数据绑定**: 在Flex中，可以通过数据绑定将数据源直接连接到图表，简化了数据更新和图表渲染的...
在这个压缩包中，包含了一系列的Flex Demo，涵盖了不同的图表类型，如柱状图、饼图和折线图，这些都是数据可视化的常用工具。 首先，让我们来详细了解一下Flex中的图表组件。Flex提供了强大的图表组件库，允许...
在Flex中，我们可以利用MX图表组件库来创建柱状图，这个库包含了多种图表类型，如条形图（BarChart）、柱状图（ColumnChart）等。这些图表能够以直观的方式展示数据，帮助用户快速理解和分析信息。 动态显示效果是...
本教程将深入讲解如何利用ArcGIS for Flex在地图上显示柱状图、饼状图和折线图，以便于用户更直观地理解地理数据。 首先，我们需要了解ArcGIS for Flex的基本概念。ArcGIS for Flex是一个基于Adobe Flex的开发库，...
在Flex中，可以使用各种图表组件来自定义数据可视化，如饼图、柱状图和面积图。 对于饼图，Flex提供了mx.charts.PieChart类。饼图是一种以圆形表示整体，并用扇形部分表示各个部分占比的图表。开发者可以设定数据...
通过学习和实践这些Flex图表的基本知识，你可以创建出各种复杂的统计图，以有效地展示和解释数据。文件"flex统计图 柱状 饼图折线"可能包含了实现这些图表的示例代码，通过研究这些代码，你可以更深入地理解如何在...
标题中提到的"Flex漂亮的柱状图,横坐标倾斜45度显示amChart"，意味着我们将探讨如何在Flex中利用amChart库创建出具有倾斜横坐标轴的柱状图，同时保持良好的视觉效果和字符完整性，即使横坐标标签很长。 首先，让...
本篇将深入探讨Flex中的饼状图、柱状图以及实时曲线图的实现方法和相关知识点。 一、Flex饼状图 饼状图是一种用于表示部分与整体之间关系的图形。在Flex中，我们可以使用mx.charts.PieChart类来创建饼状图。每个...
### Flex绘制饼状图与柱状图的知识点 #### Flex简介 Flex是一种开源的软件框架，主要用于构建跨浏览器、跨平台的应用程序。它基于ActionScript 3.0，支持多种编程语言，包括ActionScript和MXML。Flex拥有丰富的组件...
根据提供的文件信息，本文将详细介绍如何在Flex4中利用组件添加柱状图、饼状图等图表，并通过示例代码具体展示实现过程。 ### 一、Flex4中的柱状图 #### 1.1 柱状图简介 在Flex4中，柱状图是一种非常常见的数据...
在本案例中，我们关注的是Flex用于创建3D柱状体图形的技术。3D柱状图是一种数据可视化工具，它能有效地展示分类数据的大小或数量，通过在Z轴上增加深度来呈现三维效果，从而提供更丰富的视觉体验。 在Flex中实现3D...
在本压缩包文件"Charts"中，我们聚焦于Flex中的统计图表功能，包括饼状图、柱状图和折线图的实例。这些图表是数据可视化的重要工具，帮助用户直观地理解复杂的数据信息。 饼状图在统计学中被广泛用于显示部分与整体...
在给定的资源中，"Flex制作的几款漂亮的立体柱状图饼状图和折线图"显然涉及到Flex的图表组件，这些组件允许开发者创建出具有专业视觉效果的数据可视化应用。 在Flex中，Chart类是用于展示数据的主要组件。它可以...
很基础的柱状图应用 做报表的可以参考下 可运行
该flex应用程序演示了柱状图动态切换数据源 (event)"> 苹果" yField="apple" click="columnseries1_clickHandler(event)"/> 桔子" yField="orange" /> <!--梨" yField="pear"/>--> ...
Flex是一种基于ActionScript的开源框架，主要用于构建富互联网应用程序（RIA），而JFreeChart则是一个Java库，专门用于生成高质量的图表，包括饼状图、柱状图和曲线图等。 在Flex中，我们通常使用MXML和...