欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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实现动态数据介绍的详细内容,更多请关注其它相关文章!

上一篇:

下一篇: