amcharts实现动态数据介绍

<！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示例</ title > 
 < link rel = “stylesheet” href = “style.css” type = “text / css” > 
 < script src = “../amcharts / amcharts.js” type = “text / javascript” > </ script> 
 < script type = “text / javascript” > 
 变形图 
 
 var chartData = [{ 
 年份：1994年， 
 汽车：1587， 
 摩托车：650， 
 自行车：121 
 }，{ 
 年：1995年， 
 汽车：1567， 
 摩托车：683， 
 自行车：146 
 }，{ 
 年：1996年， 
 汽车：1617， 
 摩托车：691， 
 自行车：138 
 }，{ 
 年：1997年， 
 汽车：1630， 
 摩托车：642， 
 自行车：127 
 }，{ 
 年份：1998年， 
 汽车：1660， 
 摩托车：699， 
 自行车：105 
 }，{ 
 年份：1999年， 
 汽车：1683， 
 摩托车：721， 
 自行车：109 
 }，{ 
 年份：2000年， 
 汽车：1691， 
 摩托车：737， 
 自行车：112 
 }，{ 
 年份：2001年， 
 汽车：1298， 
 摩托车：680， 
 自行车：101 
 }，{ 
 年：2002年， 
 汽车：1275， 
 摩托车：664， 
 自行车：97 
 }，{ 
 年份：2003年， 
 汽车：1246， 
 摩托车：648， 
 自行车：93 
 }，{ 
 年份：2004年， 
 汽车：1218， 
 摩托车：637， 
 自行车：101 
 }，{ 
 年份：2005年， 
 汽车：1213， 
 摩托车：633， 
 自行车：87 
 }，{ 
 年份：2006年， 
 汽车：1199， 
 摩托车：621， 
 自行车：79 
 }，{ 
 年份：2007年， 
 汽车：1110， 
 摩托车：210， 
 自行车：81 
 }，{ 
 年份：2008年， 
 汽车：1165， 
 摩托车：232， 
 自行车：75 
 }，{ 
 年份：2009年， 
 汽车：1145， 
 摩托车：219， 
 自行车：88 
 }，{ 
 年份：2010年， 
 汽车：1163， 
 摩托车：201， 
 自行车：82 
 }，{ 
 年份：2011， 
 汽车：1180， 
 摩托车：285， 
 自行车：87 
 }，{ 
 年份：2012， 
 汽车：1159， 
 摩托车：277， 
 自行车：71 
 }]; 
 
 var chartData2 = [{ 
 年：1995年， 
 汽车：1567， 
 摩托车：683， 
 自行车：146 
 }，{ 
 年：1996年， 
 汽车：1617， 
 摩托车：691， 
 自行车：138 
 }，{ 
 年：1997年， 
 汽车：1630， 
 摩托车：642， 
 自行车：127 
 }，{ 
 年份：1998年， 
 汽车：1660， 
 摩托车：699， 
 自行车：105 
 }，{ 
 年份：1999年， 
 汽车：1683， 
 摩托车：721， 
 自行车：109 
 }，{ 
 年份：2000年， 
 汽车：1691， 
 摩托车：737， 
 自行车：112 
 }，{ 
 年份：2001年， 
 汽车：1298， 
 摩托车：680， 
 自行车：101 
 }，{ 
 年：2002年， 
 汽车：1275， 
 摩托车：664， 
 自行车：97 
 }，{ 
 年份：2003年， 
 汽车：1246， 
 摩托车：648， 
 自行车：93 
 }，{ 
 年份：2004年， 
 汽车：1218， 
 摩托车：637， 
 自行车：101 
 }，{ 
 年份：2005年， 
 汽车：1213， 
 摩托车：633， 
 自行车：87 
 }，{ 
 年份：2006年， 
 汽车：1199， 
 摩托车：621， 
 自行车：79 
 }，{ 
 年份：2007年， 
 汽车：1110， 
 摩托车：210， 
 自行车：81 
 }，{ 
 年份：2008年， 
 汽车：1165， 
 摩托车：232， 
 自行车：75 
 }，{ 
 年份：2009年， 
 汽车：1145， 
 摩托车：219， 
 自行车：88 
 }，{ 
 年份：2010年， 
 汽车：1163， 
 摩托车：201， 
 自行车：82 
 }，{ 
 年份：2011， 
 汽车：1180， 
 摩托车：285， 
 自行车：87 
 }，{ 
 年份：2012， 
 汽车：1159， 
 摩托车：277， 
 自行车：71 
 }，{ 
 年份：2013年， 
 汽车：1259， 
 摩托车：377， 
 自行车：91 
 }]; 
 
 AmCharts.ready（function（）{ 
 //串行图 
 chart = new AmCharts.AmSerialChart（）; 
 chart.pathToImages = “../amcharts/images/” ; 
 chart.zoomOutButton = { 
 backgroundColor：“＃000000”， 
 backgroundAlpha：0.15 
 }; 
 chart.dataProvider = chartData ; 
 chart.categoryField = “year” ; 
 
 chart.addTitle（“每年交通事故”，15）; 
 
 // AXES 
 //类别 
 var categoryAxis = chart .categoryAxis; 
 categoryAxis.gridAlpha = 0 .07; 
 categoryAxis.axisColor = “#DADADA” ; 
 categoryAxis.startOnAxis = true ; 
 
 //值 
 var valueAxis = new AmCharts.ValueAxis（）; 
 valueAxis.title = “percent” ; //这行使图表“堆叠” 
 valueAxis.stackType = “100％” ; 
 valueAxis.gridAlpha = 0 .07; 
 chart.addValueAxis（valueAxis）; 
 
 // GRAPHS 
 //第一张图 
 var graph = new AmCharts.AmGraph（）; 
 graph.type = “line” ; //这是简单的线图 
 graph.title = “汽车” ; 
 graph.valueField = “cars” ; 
 graph.balloonText = “[[value]]（[[ percents ]]％）” ; 
 graph.lineAlpha = 0 ; 
 graph.fillAlphas = 0 0.6; //将fillAlphas设置为 > 0，使其成为区域图 
 chart.addGraph（图形）; 
 
 //第二张图 
 var graph = new AmCharts.AmGraph（）; 
 graph.type = “line” ; 
 graph.title = “摩托车” ; 
 graph.valueField = “摩托车” ; 
 graph.balloonText = “[[value]]（[[ percents ]]％）” ; 
 graph.lineAlpha = 0 ; 
 graph.fillAlphas = 0 0.6; 
 chart.addGraph（图形）; 
 
 //第三张图 
 var graph = new AmCharts.AmGraph（）; 
 graph.type = “line” ; 
 graph.title = “自行车” ; 
 graph.valueField = “bike” ; 
 graph.balloonText = “[[value]]（[[ percents ]]％）” ; 
 graph.lineAlpha = 0 ; 
 graph.fillAlphas = 0 0.6; 
 chart.addGraph（图形）; 
 
 // LEGEND 
 var legend = new AmCharts.AmLegend（）; 
 legend.align = “center” ; 
 chart.addLegend（图例）; 
 
 // CURSOR 
 var chartCursor = new AmCharts.ChartCursor（）; 
 chartCursor.zoomable = false ; //因为图表显示的值不是太多，所以禁用缩放 
 chartCursor.cursorAlpha = 0 ; 
 chart.addChartCursor（chartCursor）; 
 
 // WRITE 
 chart.write（ “chartdiv”）; 
 }）; 
 //刷新事件 
 function reloadData（url）{ 
 var dynamicData = loadStringData （url）; 
 // fileSystemChart.dataProvider = eval （'（'+ dynamicData +'）'）; //如果ajax获取得来的数据包含引号，需要eval（）函数处理一下 
 chart.dataProvider = dynamicData ; 
 chart.validateNow（）; 
 chart.validateData（）; 
 } 
 // AJAX请求 
 function loadStringData（link）{ 
 
 return chartData2; 
 
 / *下面的是ajax请求，可以从服务器获取动态数据 
 if（window.XMLHttpRequest）{ 
 // IE7 +，Firefox，Chrome，Opera，Safari 
 var request = new XMLHttpRequest（）; 
 } 
 else { 
 //代码为IE6，IE5 
 var request = new ActiveXObject（'Microsoft.XMLHTTP'）; 
 } 
 //加载 
 request.open（'GET'，link，false）; 
 request.send（）; 
 return request.responseText; 
 * / 
 } 
 
 
window.setInterval（“reloadData（''）”，5000）; //五秒刷新 
 
 
 </ script > </ head > < body > < div id = “chartdiv” style = “width：100％; height：400px;” > </div > < input type = “button” value = “手动刷新” onclick = “reloadData（''）” /> 
</ body > 
</ html >