amcharts实现动态数据介绍
程序员文章站
2023-12-30 16:48:16
...
JavaScript实现的,同样amcharts 2.7.6支持页面动态数据展现。
以下是方法:
一,去首先amcharts.com/download下载插件包
二,修改amcharts_2.7.6 \样本中的实例
以下是area100PercentStacked.html的动态实例,代码如下:
主要添加了:
chartData2变量
reloadData方法
loadStringData方法
手动刷新按钮
[html] 查看纯文本
<!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 >
以上就是 amcharts实现动态数据介绍的详细内容,更多请关注其它相关文章!