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>
