amcharts简单封装

只是简单是封装了一下，目前只能输出线图（折现，圆滑线等），柱状图。

代码如下：

;!function(win,$,AC,undefined){
    var DDcharts = function(o){
        this.o = $.extend(true,{},this.default_o,o);
        if(this.o.type == 'serial'){
            this.chart = this.AmSerialChart();
            this.setCateGoryAxis().setValueAxis().setChartCursor().setAmLegend();
        }
    };

    DDcharts.prototype = {
        default_o:{
            type:'serial', // 类型：折线、饼图等
            dataProvider:{}, // 数据对象
            categoryField:'date',
            autoMargins:true,
            marginTop:0,
            marginRight:0,
            marginBottom:0,
            marginLeft:0,
            startDuration:1, // 动画时间
            write2where:'ddchart',
            // 横轴
            categoryAxis:{
                parseDates:true,
                minPeriod:'DD', // 最小时间：fff - milliseconds, ss - seconds, mm - minutes, hh - hours, DD - days, MM - months, YYYY - years.
                inside:false,
                fillAlpha:0.1, // 间隔区域透不明度
                fillColor:'#cccccc', // 间隔区域填充颜色
                labelRotation:0, // 刻度旋转角度
                startOnAxis:0
            },
            // 纵轴
            valueAxis:{
                title:'', // 轴名称
                axisAlpha:0,
                dashLength:5
            }, 
            line:{
                type:'line', // Possible values are: "line", "column", "step", "smoothedLine", "candlestick", "ohlc". XY and Radar charts can only display "line" type graphs.
                valueField:'value',
                hideBulletsCount:50
            }
        },
        AmSerialChart:function(){
            var chart = new AC.AmSerialChart();
            chart.dataProvider = this.o.dataProvider;
            chart.categoryField = this.o.categoryField;
            chart.autoMargins = this.o.autoMargins; 
            chart.startDuration = this.o.startDuration;
            if(this.o.autoMargins == false){
                chart.marginTop= this.o.marginTop; 
                chart.marginRight= this.o.marginRight; 
                chart.marginBottom= this.o.marginBottom; 
                chart.marginLeft= this.o.marginLeft;
            }
            return chart;
        },
        // 设置横轴
        setCateGoryAxis:function(){
            var categoryAxis = this.chart.categoryAxis;
            categoryAxis.parseDates = this.o.categoryAxis.parseDates; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = this.o.categoryAxis.minPeriod; // our data is daily, so we set minPeriod to DD
            categoryAxis.inside = this.o.categoryAxis.inside;
            categoryAxis.gridAlpha = 0; // 格子线不透明度 0 - 透明，1 - 不透明
            categoryAxis.axisAlpha = 0; // 轴不透明度 0 - 透明，1 - 不透明
            categoryAxis.fillAlpha = this.o.categoryAxis.fillAlpha;
            categoryAxis.fillColor = this.o.categoryAxis.fillColor;
            categoryAxis.labelRotation = this.o.categoryAxis.labelRotation;
            categoryAxis.startOnAxis = this.o.categoryAxis.startOnAxis;
            return this;
        },
        // 设置纵轴
        setValueAxis:function(){
            var valueAxis = new AC.ValueAxis();
            valueAxis.axisAlpha = this.o.valueAxis.axisAlpha;
            valueAxis.dashLength = this.o.valueAxis.dashLength;
            valueAxis.title = this.o.valueAxis.title;
            this.chart.addValueAxis(valueAxis);
            return this;
        },
        // 添加鼠标滑过时的效果
        setChartCursor:function(){
            var chartCursor = new AC.ChartCursor();
            this.chart.addChartCursor(chartCursor);
            return this;
        },
        // LEGEND
        setAmLegend:function(){
            var legend = new AC.AmLegend();
            legend.markerType = "square"; // Possible values are: "square", "circle", "line", "dashedLine", "triangleUp", "triangleDown", "bubble", "none".                
            this.chart.addLegend(legend);
        },
        // 增加折线
        addLine:function(valueField,type,title){
            var graph = new AC.AmGraph();
            graph.type = type || this.o.line.type;
            if(graph.type == 'column'){
                graph.fillAlphas = 0.8;
            }else{
                graph.bullet = "round";
            }
            graph.valueField = valueField || this.o.line.valueField;
            graph.title = title || graph.valueField;
            graph.balloonText = "[[title]]: [[value]]";
            graph.hideBulletsCount = this.o.line.hideBulletsCount; // this makes the chart to hide bullets when there are more than 50 series in selection
            this.chart.addGraph(graph);
            return this;
        },
        // 输出
        write:function(write2where){
            this.chart.write(write2where || this.o.write2where);
        }
    }
    
    win.DDcharts = DDcharts;

}(this,jQuery,AmCharts);

使用实例（ddcharts.js为上述封装代码）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="Public/js/jquery-1.9.1.js" type="text/javascript"></script>        
        <script src="Public/js/amcharts.js" type="text/javascript"></script>        
        <script src="Public/js/ddcharts.js" type="text/javascript"></script>        
        <script type="text/javascript">
            var lineChartData = [{
                date: new Date(2009, 10, 2),
                value: 5,
                value1:6
            }, {
                date: new Date(2009, 10, 3),
                value: 15,
                value1:16
            }, {
                date: new Date(2009, 10, 4),
                value: 13,
                value1:6
            }, {
                date: new Date(2009, 10, 5),
                value: 17,
                value1:36
            }, {
                date: new Date(2009, 10, 6),
                value: 15,
                value1:6
            }, {
                date: new Date(2009, 10, 9),
                value: 19,
                value1:2
            }, {
                date: new Date(2009, 10, 10),
                value: 21,
                value1:6
            }, {
                date: new Date(2009, 10, 11),
                value: 20,
                value1:11               
            }, {
                date: new Date(2009, 10, 12),
                value: 20,
                value1:18
            }, {
                date: new Date(2009, 10, 13),
                value: 19,
                value1:12
            }, {
                date: new Date(2009, 10, 16),
                value: 25,
                value1:17
            }, {
                date: new Date(2009, 10, 17),
                value: 24,
                value1:19
            }, {
                date: new Date(2009, 10, 18),
                value: 26,
                value1:6
            }, {
                date: new Date(2009, 10, 19),
                value: 27,
                value1:2
            }, {
                date: new Date(2009, 10, 20),
                value: 25,
                value1:6
            }, {
                date: new Date(2009, 10, 23),
                value: 29,
                value1:61
            }, {
                date: new Date(2009, 10, 24),
                value: 28,
                value1:16
            }, {
                date: new Date(2009, 10, 25),
                value: 30,
                value1:2
            }, {
                date: new Date(2009, 10, 26),
                value: 72,
                value1:6,
                customBullet: "images/redstar.png"   // note, one line has a custom bullet defined
            }, 
             {
                date: new Date(2009, 10, 27),
                value: 43,
                value1:32
            }, {
                date: new Date(2009, 10, 30),
                value: 31,
                value1:16
            }, {
                date: new Date(2009, 11, 1),
                value: 30,
                value1:16
            }, {
                date: new Date(2009, 11, 2),
                value: 29,
                value1:6
            }, {
                date: new Date(2009, 11, 3),
                value: 27,
                value1:3
            }, {
                date: new Date(2009, 11, 4),
                value: 26,
                value1:45
            }];

        $(function(){
            var ddcharts = new DDcharts({dataProvider:lineChartData,categoryAxis:{inside:false,labelRotation:0},line:{type:'smoothedLine'}});
            ddcharts.addLine().addLine("value1",'line').write('chartdiv');
        });    
        </script>
    </head>
    
    <body>
        <div id="chartdiv" style="width:100%; height:400px;"></div>
    </body>

</html>