amcharts的使用介绍

转载于 2017-10-17 14:34:32 发布 · 7.5k 阅读

jQuery 专栏收录该内容

68 篇文章

订阅专栏

本文详细介绍Amcharts的使用方法，包括如何设置数据源、图表参数及各种图表元素的配置。通过一个具体的实例展示了如何创建带有多个数据系列的3D柱状图，并解释了各个配置项的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"/>