amcharts的使用介绍

关注

转载最新推荐文章于 2026-02-19 00:25:26 发布 7.6k 阅读 AI 写同款· GEO 优化 ›

AmCharts: 构建交互式JavaScript图表本文还有配套的精品资源，点击获取简介：AmCharts是一个基于JavaScript的图表库，提供了柱状图、线图、饼图和地图等多种交互式图表功能。它支持JSON格式数据，拥有高度的自定义能力和良好的兼容性，适用于数据分析和商业智能报告。开发者可通过示例和文档学习如何使用它来增强Web应用的数据可视化体验。 1. JavaScript图表库概述在当今的数据... 阅读详情

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