Flex动态创建多个曲线图+柱形图
获取数据后的回调函数
private function resultHandlerDay(event:ResultEvent):void {
statisticCount = event.result.statistic.weekstatistic.length;
var source:ArrayCollection = event.result.statistic.buildingtatistic;
var seriesArr:Array = new Array();
for(var i:Number = 0;i<source.length;i++){
var columnSeries:ColumnSeries = new ColumnSeries();
columnSeries.xField = "statday";
columnSeries.yField = "pitchpower"+(i+1);
columnSeries.displayName = source[i].buildingname;
seriesArr.push(columnSeries);
}
if(statisticCount==null){
myData=null;
}else{
columnCharts.series = seriesArr;
columnCharts.dataProvider = event.result.statistic.weekstatistic;
}
}
<mx:HTTPService id="myService" url="loaddata.action" method="GET" result="resultHandlerDay(event)">
</mx:HTTPService>
<mx:Panel
title="能耗统计"
width="643" height="462" fontSize="12" paddingTop="10" paddingBottom="0" paddingLeft="0" paddingRight="0" layout="absolute"
borderAlpha="1"
id="panelid"
borderThicknessBottom="0"
borderThicknessLeft="0"
borderThicknessRight="0"
borderThicknessTop="0"
horizontalGap="0"
verticalGap="0"
verticalAlign="top"
titleStyleName="fileItemover" x="0" y="0">
<mx:ViewStack id="myViewstack" width="643" height="422" borderStyle="solid" paddingTop="0" backgroundColor="white" x="0" y="10">
<mx:VBox id="child1" height="411" width="632" verticalAlign="middle">
<mx:ColumnChart id="columnCharts" dataProvider="{myData}" showDataTips="true" columnWidthRatio="0.6" width="623" height="338">
<mx:backgroundElements>
<mx:GridLines>
<mx:horizontalStroke>
<mx:Stroke color="haloSilver" weight="0" />
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:verticalAxis>
<mx:LinearAxis id="la" baseAtZero="true" title="能耗(单位:万千瓦时)"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{la}" canDropLabels="false" fontSize="12"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis id="ca" categoryField="statday" title="时间(单位:周)"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" canDropLabels="false" fontSize="12"/>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries xField="statday" yField="pitchpower1" displayName="建筑" fontSize="12" labelPosition="outside" id="changeOption1" showDataEffect="{interpolateIn}">
<mx:fill>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="haloBlue"
ratio="0.0"
alpha="1.0" />
</mx:Array>
</mx:entries>
</mx:RadialGradient>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend horizontalGap="28" paddingLeft="150" id="legend" dataProvider="{columnCharts}" direction="horizontal" legendItemClass="BigFontLegendItem" width="621" height="32"/>
</mx:VBox>
</mx:ViewStack>
</mx:Panel>
xml 数据源:
<statistic>
<weekstatistic>
<statday>11</statday>
<pitchpower1>11.11</pitchpower1>
<pitchpower2>11.11</pitchpower2>
</weekstatistic>
<weekstatistic>
<statday>22</statday>
<pitchpower1>22.22</pitchpower1>
<pitchpower2>11.11</pitchpower2>
</weekstatistic>
<buildingtatistic>
<buildingname>建筑一号</buildingname>
</buildingtatistic>
<buildingtatistic>
<buildingname>建筑2号</buildingname>
</buildingtatistic>
</statistic>
分享到:
相关推荐
### Flex动态创建多个曲线图和柱形图源码解析 #### 概述 在Adobe Flex框架下,开发者可以通过MXML和ActionScript实现丰富的用户界面和交互功能。在本例中,我们将探讨如何利用Flex来动态地创建多个曲线图和柱形图...
在描述中提到的"折线图+柱形图(在一个图中展示,双Y轴,共用X轴)",意味着我们需要创建两个不同的`ValueAxis`(一个对应折线图,另一个对应柱形图),并确保它们共享同一个`DomainAxis`(X轴)。这样,数据就可以在...
本文将深入探讨“flash js 曲线图+饼状图+柱状图绚丽插件”这一主题,这是一组用于创建动态、交互式数据可视化的工具。 首先,让我们关注“曲线图”。曲线图,也称为折线图,是一种表示数值数据趋势的有效方式。在...
例如,可以通过组合多个图表(如曲线图和柱形图)在同一视图中,以提供更丰富的数据呈现。 此外,AchartEngine还支持导出图表为图像文件,这在需要将数据可视化结果分享或保存时非常方便。通过调用`ChartFactory....
通过Echarts,开发者可以方便地创建动态、响应式的数据可视化应用,将数据以吸引人的方式呈现出来。 接下来,柱形图是数据可视化中的基本元素,用于比较不同类别的数值。在3D地图中,柱形图通常用于表示与地理位置...
### 交流Origin中绘制双Y轴曲线图(柱形图)的方法 #### 一、引言 在学术研究中,为了更直观地展示不同数据集之间的对比与关联,经常需要绘制双Y轴的曲线图或柱形图。Origin是一款功能强大的科学绘图与数据分析软件...
在IT行业中,JSP(JavaServer Pages)是一种用于创建动态网页的技术,而JFreeChart则是一个强大的Java图表库,能够生成各种类型的图表,包括曲线图和柱形图。本项目结合两者,旨在实现数据可视化,使得Web应用可以...
在C#编程中,创建数据曲线图和柱形图是一项常见的任务,特别是在数据分析、可视化以及UI界面设计中。本文将详细讲解如何利用C#来实现这些图表,并且着重讨论如何添加缩放、平移功能以及导出图表为图片。 首先,我们...
这个压缩包提供了一系列基于AChartEngine库实现的图表,包括曲线图、折线图、双曲线图、柱形图和饼图。AChartEngine是一个轻量级的图表库,适合用于快速开发Android应用中的数据展示功能。 首先,我们要了解...
官方的API并没有提供可以借鉴的动态更新饼图的方法,考虑到数据都是活动的,不可能总是用静态数据,所以我下面的demo就是模拟动态数据用饼图显示,但是肯定可以使用的,具体是通过定时器+Handler实现定时任务,通过...
这里提到的"AChartEngine"是一个开源的Android图表库,它为开发者提供了创建各种图表的能力,包括曲线图、折线图、双曲线图、柱形图和饼图。这些图表类型在数据展示和分析中都有广泛的应用。 1. **曲线图**:曲线图...
在实际应用中,开发者可以利用Flex的这些图表组件创建动态、交互式的可视化界面,例如,用户可以通过点击饼图的扇区查看详细信息,或者通过鼠标悬停在柱形图上显示数据提示。通过深入学习和掌握Flex的图表API,可以...
本示例将详细介绍如何使用chartControl来创建柱形图、饼形图和曲线图。 首先,柱形图是一种常见的统计图表,用于比较不同类别的数量或频率。在DEVexpress chartControl中,你可以通过以下步骤创建柱形图: 1. 创建...
HTML5 JQUERY CSS3柱形图曲线图插件代码,作者:DevilJie ,使用时请参照以下参数来设置曲线图: document: 输出图形的位置id s:柱状图数据 例如:[[1,2,3,4]]单柱状图 [[1,2,3,4],[2,3,4,5]] 双柱状图 ...
在Android开发中,数据可视化是不可或缺的一部分,尤其是在创建各种类型的图表时,如曲线图、折线图、双曲线图、柱形图和饼图。这些图表可以帮助用户直观地理解复杂的数据信息。本资源提供了一个基于AChartEngine库...
标题中的“安卓图表报表相关-里面有曲线图折线图双曲线图柱形图饼图在achartengine的基础上更改了一些颜色.zip”表明这是一个关于Android应用程序开发的资源包,专注于图表和报表的展示。其中包含了多种类型的图表,...
1. Flash统计图:Flash是一种交互式矢量图形和多媒体平台,它允许开发人员创建动态和交互式的统计图表,通过XML配置,可以实现数据的灵活展示。这些图表通常用于网页中,以直观地呈现复杂的数据信息。 2. 柱形图:...
构建动态柱形图,官方的API并没有提供可以借鉴的动态更新饼图的方法,考虑到数据都是活动的,不可能总是用静态数据,具体是通过定时器+Handler实现定时任务,通过Handler更新主线程UI,在更新之前要把之前的数据清除...
ASP(Active Server Pages)是一种...以上是对“ASP动态柱形图程序”的详细解析,涵盖了从ASP基础到柱形图的生成、数据处理、交互设计等多个方面。这个程序不仅展示了ASP的实用性和灵活性,也体现了数据可视化的价值。