amcharts的使用介绍

　　Amcharts是一组Flash图表，你可以免费使用在你的网站和基于网络的产品。 Amcharts可以从简单的CSV或XML文件提取数据，也可以从动态数据读取生成，比如PHP, .NET, Ruby on Rails和Perl，以及其他许多编程语言。

先来以一个实实际使用的例子来介绍它的使用方法：

 实际的效果图：

 

代码如下：

 1.数据源和缩放处理函数：

            [Bindable]
            public var chartData:ArrayCollection = new ArrayCollection([
                {cellName:"CELLCELL1",osAlarmNum:1,osAlarmTime:23,avgOsAlarmTime:20},
                {cellName:"CELLCELL2",osAlarmNum:5,osAlarmTime:31,avgOsAlarmTime:23},
                {cellName:"CELLCELL3",osAlarmNum:3,osAlarmTime:24,avgOsAlarmTime:26},
                {cellName:"CELLCELL4",osAlarmNum:7,osAlarmTime:12,avgOsAlarmTime:21},
                {cellName:"CELLCELL5",osAlarmNum:5,osAlarmTime:17,avgOsAlarmTime:15},
        ]);
            
            private function zoom():void{
                if(chartData.length > 10)
                {
                    var count:Number = chartData.length;
                    chart.zoomToIndexes(count - 10, count - 1);
                }
            }

2.图表的参数，myamcharts是重写过的去水印的AmSerialChart：

<myamcharts:AmSerialChart 
        id="chart"
        width="100%"
        height="89%"   
        dataUpdated="{zoom()}"
        dataProvider="{chartData}"
        categoryField="cellName"
        plotAreaFillAlphas="[0]"
        angle="5"
        depth3D="2">
        <myamcharts:graphs>
            <amcharts:AmGraph id="g0"
                              title="退服次数" 
                              balloonText="退服次数：[[osAlarmNum]]"
                              valueAxis="{v1}" 
                              valueField="osAlarmNum" 
                              type="column" lineAlpha="0"
                              fillColors="[#E48701]" fillAlphas="[1]"/>                        
            <amcharts:AmGraph id="g1" 
                              title="退服历时" 
                              balloonText="退服历时：[[osAlarmTime]]"
                              valueAxis="{v2}"
                              valueField="osAlarmTime" 
                              type="column" lineAlpha="0"
                              fillColors="[#A5BC4E]" fillAlphas="[1]"/>
            <amcharts:AmGraph id="g3" 
                              title="平均历时" 
                              balloonText="平均历时：[[avgOsAlarmTime]]"
                              valueAxis="{v2}"
                              valueField="avgOsAlarmTime" 
                              type="column" lineAlpha="0"
                              fillColors="[#1B95D9]" fillAlphas="[1]"/>
        </myamcharts:graphs>
        <myamcharts:valueAxes>
            <amcharts:ValueAxis id="v1"
                                axisColor="0xffffff"/> 
            <amcharts:ValueAxis id="v2"
                                gridAlpha="0"
                                position="right"
                                axisColor="0xffffff"
                                unit="min"/>
        </myamcharts:valueAxes>
        <myamcharts:categoryAxis>
            <amcharts:CategoryAxis gridPosition="start"
                                   gridAlpha="0"
                                   wrapLabels="true"
                                   autoTruncate="true" 
                                   autoGridCount="true"/>                            
        </myamcharts:categoryAxis>
        <myamcharts:balloon>
            <amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1"/>
        </myamcharts:balloon>
        <myamcharts:chartCursor>
            <amcharts:ChartCursor crosshair="false"
                                  zoomable="true"/>
        </myamcharts:chartCursor>
        <myamcharts:chartScrollbar>
            <amcharts:ChartScrollbar graph="{g0}"
                                     graphType="column"
                                     graphFillColor="0xff0000"/>                        
        </myamcharts:chartScrollbar>
    </myamcharts:AmSerialChart>
    
    <amcharts:AmLegend 
        id="amLegend"
        x="0" 
        y="{chart.height - 10}"
        align="center"
        switchable="false"
        dataProvider="{chart}"
        width="100%"
        horizontalGap="10"
        valueWidth="30"/>

-------------------------------------------------------------------------------------------------------------------------

ColumnChart的一些参数说明：

Axes   轴设置

     CategoryAxisAlpha     //x轴坐标线透明度

     CategoryAxisColor   //x轴坐标线颜色

     CategoryAxisTickLength    // x轴坐标刻度线的延长线

     CategoryAxisWidth         //x轴坐标线的厚度

     ValueAxisAlpha     //y轴（值） 坐标线透明度

     ValueAxisAlpha     //y轴坐标线颜色

     ValueAxisLogarithmic    //false 为线性刻度，true为对数刻度

Balloons   //弹出数据指示框的设置

     BalloonAlpha    //弹出框的透明度

     BalloonBorderAlpha   //弹出框边框

     BalloonBorderColor    //弹出框边框的颜色

     BalloonEnabled   // 弹出框是否可用

Column //柱状图的柱子的设置

        ColumnBalloonTextFormatString   //当鼠标移动到柱子时弹出的标签 {value} 为y轴坐标值

        ColumnBorderAlpha //柱子的边框

        ColumnDataLabelFormatString    //柱子的数据文本标签

        ColumnDataLabelTextPosition    //柱子数据标签的位置

        ColumnGradientDirection      //柱子数据标签的

        ColumnGrowEffect              //柱子的动画效果

        ColumnHoverBrightness        //指示柱子时柱子的亮暗变化

        ColumnSequencedGrow         //柱子是同时展示，还是一根接一根

        ColumnSpacing           //同一坐标点的柱子的间距

        Columntype                //柱子的结构

        ColumnWidth          //两个坐标点间柱子的间隔   百分比，100为没有间隔

Context Menu                 //右键菜单

           ContextMenuItems    //用户自定义可选项

           ShowPrintContextMenu     //打印功能

           ShowZoomcontextMenu   //缩放功能

Error messages    //错误信息

Externals   //    数据绑定设置

                 DataType   // 绑定数据类型

                 ExternalDataFileUrl    //数据文件地址

                 ExternalSettingsFileUrl    //设置文件地址

                 ReloadDataInterval      //刷新数据间隔

Grid        //网格线

             CategoryGridDashed     //网格竖线是否连续

             CategoryValuesColor      //x轴坐标文本的颜色

             CategoryVluesEnabled     //x轴坐标文本是否显示

             CategoryValuesFrequency    //x轴文本显示的网格线比例

             CategoryValuesInside       //x轴文本是否显示在网格内

             ValueGridAlpha         //y轴坐标

             ValuesInside       //y轴坐标显示在网格内外

Guides     //显示栏线

Image export    //图片导出

Legend    //图标

        LegendAlign     //图表对齐位置

Line    //曲线

          AreaFillAlpha   //曲线下的面积透明度

          Bullet      //曲线点的标记

          LineBalloonTextFormatString    //曲线弹出框显示的值

Margins    //边距

Plot area    //图形区

Strings    //字符串

DataSourceID     //绑定数据控件

           DataSeriesIdField    //x轴坐标数据

           Graphs //单个图表设置

Angle    3D图的角度

BackColor 控件背景色       

Labels    //图表标记

-----------------------------------------------------------------------------------------------------------------------------

转载于:https://www.cnblogs.com/gongchen/archive/2013/01/26/2877809.html