[img][/img]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="800"
height="400"
fontSize="12"
title="柱状图+线状图"
creationComplete="initApp()">
<!-- 柱状图加线图,各自用各自的Y轴 -->
<mx:Script>
<![CDATA[
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.chartClasses.Series;
import mx.charts.ChartItem;
import mx.collections.ArrayCollection;
/** 绑定的数据源*/
[Bindable]
private var medalsAC:ArrayCollection;
/**
* 初始化方法
*/
private function initApp():void
{
var array:ArrayCollection = new ArrayCollection();
for(var i:uint; i<12; i++)
{
var obj:Object = new Object();
obj.month = (i+1) + "月份";
obj.number = 100 + Math.round(Math.random() * 500);
array.addItem(obj);
}
medalsAC = new ArrayCollection();
//计算增长率
for(var j:uint; j<array.length; j++)
{
obj = new Object();
obj.month = array[j].month;
obj.number = array[j].number;
if(j>0)
{
obj.rise = Number(((array[j].number - array[j-1].number) / array[j-1].number) * 100).toFixed(2);
}
medalsAC.addItem(obj);
}
}
]]>
</mx:Script>
<mx:SolidColor id="sc1" color="blue" alpha="0.6"/>
<mx:Stroke id="s1" color="white" weight="2"/>
<mx:Stroke id="s2" color="red" weight="2"/>
<mx:HBox height="100%" width="100%" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10">
<mx:ColumnChart id="column"
height="100%"
width="100%"
showDataTips="true"
dataProvider="{medalsAC}"
secondDataProvider="{medalsAC}" fontSize="12">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries yField="number" displayName="生产量" fill="{sc1}" stroke="{s1}"/>
</mx:series>
<mx:secondVerticalAxis>
<mx:LinearAxis />
</mx:secondVerticalAxis>
<mx:secondSeries>
<mx:LineSeries yField="rise" displayName="增长率" form="curve" lineStroke="{s2}"/>
</mx:secondSeries>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}" fontWeight="bold"/>
</mx:HBox>
</mx:Panel>
分享到:
相关推荐
FLEX画图之各种柱状图饼状图画法
通过几天的研究终于可以用arcgis for flex 在地图上显示柱状图 饼状图和折线图
彩色 多种颜色 FLEX 柱状图 可牛逼了 就我这有
多款风格的Flex的Demo、柱状图、饼图、折线图等,好不容易才找得到的,非常不错的Flex的使用demo!
该flex应用程序演示了柱状图动态切换数据源 (event)"> 苹果" yField="apple" click="columnseries1_clickHandler(event)"/> 桔子" yField="orange" /> <!--梨" yField="pear"/>--> ...
Flex 实例,flex拖拽形成柱状图,点击弹出图片窗口,柱状图用法
flex 柱状图 饼图 方便使用,导入项目就能使用,也有生成好的文件可以打开查看
包括了Flex柱状图动态效果和不同的颜色效果,其中包括demo源代码和柱状图的源代码,非常实用 运行的时候直接双击test.html即可看到漂亮的柱状图(Flex的ColumnChart)的动态效果
flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图flex 地图...
flex纯手工绘制,具体样式可以看图片,有json文件格式说明 今后发的一切东西都free,希望能对您有所帮助
flex柱状图表很漂亮的源码1
flex 柱状图表2
flex 柱状图表1
flex柱状图表很漂亮的源码
本文实例为大家分享了vue echarts实现横向柱状图的具体代码,供大家参考,具体内容如下 实现效果: 代码: <template> <div class="OverYearsPompany"> <div id="OverYearsPompanyChart" style="flex: 1;...
Flex画饼状、柱状图资料参考,Asp.Net报表资料,Flex画3D柱状图
flex做的柱状图,动态显示效果,只要修改xml的数值,即可改变柱状图的显示,
包含各种漂亮的立体柱状图,饼状图,折线图和区域图,含3D效果,并且包含源码,含有各种特效,超炫咯
flex统计图标实例 饼状图 柱状图 折线图
flex统计图 柱状 饼图折线 详细代码